From 3f40a240f04a7f121b84dca55f90a897581b6eaf Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 14:19:31 +0200
Subject: [PATCH 01/60] Apply data-slot conventions to remaining UI components

Omit presence flags when false in dropdown menu items and labels, serialize
a null dropdown defaultValue as an empty attribute, scope carousel parts to
their own root, sync theme toggles after page loads, forward Layout lang and
type Video props as iframe attributes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ui/carousel/carousel.astro       | 17 ++++++++---------
 .../dropdown-menu-checkbox-item.astro           |  4 ++--
 .../ui/dropdown-menu/dropdown-menu-item.astro   |  4 ++--
 .../ui/dropdown-menu/dropdown-menu-label.astro  |  2 +-
 .../dropdown-menu-radio-item.astro              |  4 ++--
 .../ui/dropdown-menu/dropdown-menu.astro        |  2 +-
 src/components/ui/layout/layout.astro           |  2 +-
 .../ui/theme-toggle/theme-toggle.astro          |  1 +
 src/components/ui/video/video.astro             |  2 +-
 9 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/ui/carousel/carousel.astro b/src/components/ui/carousel/carousel.astro
index 4f172130b..b8ec648ce 100644
--- a/src/components/ui/carousel/carousel.astro
+++ b/src/components/ui/carousel/carousel.astro
@@ -49,26 +49,25 @@ const resolvedOpts: EmblaOptionsType = {
   }
 
   const instances = new Map<CarouselRoot, () => void>()
+  // A nested carousel owns its own parts.
+  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>
+    [...root.querySelectorAll<T>(`[data-slot="${slot}"]`)].filter(
+      (part) => part.closest('[data-slot="carousel"]') === root
+    )
   const initialize = () => {
     for (const root of document.querySelectorAll<CarouselRoot>(
       '[data-slot="carousel"]'
     )) {
       if (instances.has(root)) continue
-      const viewport = root.querySelector<HTMLElement>(
-        '[data-slot="carousel-content"]'
-      )
+      const viewport = getParts<HTMLElement>(root, "carousel-content")[0]
       if (!viewport) continue
       const opts: EmblaOptionsType = JSON.parse(
         root.dataset.carouselOptions || "{}"
       )
       const api = EmblaCarousel(viewport, opts)
       root.__fulldevCarouselApi = api
-      const previous = root.querySelectorAll<HTMLButtonElement>(
-        '[data-slot="carousel-previous"]'
-      )
-      const next = root.querySelectorAll<HTMLButtonElement>(
-        '[data-slot="carousel-next"]'
-      )
+      const previous = getParts<HTMLButtonElement>(root, "carousel-previous")
+      const next = getParts<HTMLButtonElement>(root, "carousel-next")
       const emit = (type: "carousel:init" | "carousel:select") => {
         root.dispatchEvent(
           new CustomEvent(type, {
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.astro b/src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.astro
index 5c53ce747..628a8341d 100644
--- a/src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.astro
+++ b/src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.astro
@@ -28,9 +28,9 @@ const {
   data-slot="dropdown-menu-checkbox-item"
   data-value={value}
   data-default-checked={defaultChecked}
-  data-disabled={disabled}
+  data-disabled={disabled || undefined}
   data-variant={variant}
-  data-inset={inset}
+  data-inset={inset || undefined}
   disabled={disabled ? true : undefined}
   type={type}
   class={cn(
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-item.astro b/src/components/ui/dropdown-menu/dropdown-menu-item.astro
index 1870560a1..3602877e9 100644
--- a/src/components/ui/dropdown-menu/dropdown-menu-item.astro
+++ b/src/components/ui/dropdown-menu/dropdown-menu-item.astro
@@ -24,9 +24,9 @@ const {
 
 <Tag
   data-slot="dropdown-menu-item"
-  data-disabled={disabled}
+  data-disabled={disabled || undefined}
   data-variant={variant}
-  data-inset={inset}
+  data-inset={inset || undefined}
   disabled={Tag === "button" && disabled ? true : undefined}
   type={Tag === "button" ? type : undefined}
   class={cn(
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-label.astro b/src/components/ui/dropdown-menu/dropdown-menu-label.astro
index b8a737458..89fafacca 100644
--- a/src/components/ui/dropdown-menu/dropdown-menu-label.astro
+++ b/src/components/ui/dropdown-menu/dropdown-menu-label.astro
@@ -12,7 +12,7 @@ const { class: className, inset, ...props } = Astro.props
 
 <div
   data-slot="dropdown-menu-label"
-  data-inset={inset}
+  data-inset={inset || undefined}
   class={cn("cn-dropdown-menu-label", className)}
   {...props}
 >
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-radio-item.astro b/src/components/ui/dropdown-menu/dropdown-menu-radio-item.astro
index 3c1424bdb..e4514ec29 100644
--- a/src/components/ui/dropdown-menu/dropdown-menu-radio-item.astro
+++ b/src/components/ui/dropdown-menu/dropdown-menu-radio-item.astro
@@ -28,9 +28,9 @@ const {
   data-slot="dropdown-menu-radio-item"
   data-value={value}
   data-default-checked={defaultChecked}
-  data-disabled={disabled}
+  data-disabled={disabled || undefined}
   data-variant={variant}
-  data-inset={inset}
+  data-inset={inset || undefined}
   disabled={disabled ? true : undefined}
   type={type}
   class={cn(
diff --git a/src/components/ui/dropdown-menu/dropdown-menu.astro b/src/components/ui/dropdown-menu/dropdown-menu.astro
index 79bb4ef03..a3e3080fe 100644
--- a/src/components/ui/dropdown-menu/dropdown-menu.astro
+++ b/src/components/ui/dropdown-menu/dropdown-menu.astro
@@ -45,7 +45,7 @@ const defaultValuesAttr =
 <div
   data-slot="dropdown-menu"
   data-default-open={defaultOpen}
-  data-default-value={defaultValue}
+  data-default-value={defaultValue === null ? "" : defaultValue}
   data-default-values={defaultValuesAttr}
   data-close-on-click-outside={closeOnClickOutside}
   data-close-on-escape={closeOnEscape}
diff --git a/src/components/ui/layout/layout.astro b/src/components/ui/layout/layout.astro
index 2b6fb81d8..8ab9407c8 100644
--- a/src/components/ui/layout/layout.astro
+++ b/src/components/ui/layout/layout.astro
@@ -16,7 +16,7 @@ const { class: className, lang, ...props } = Astro.props
     className
   )}
   data-slot="layout"
-  lang={Astro.currentLocale || "en"}
+  lang={lang || Astro.currentLocale || "en"}
   {...props}
 >
   <slot />
diff --git a/src/components/ui/theme-toggle/theme-toggle.astro b/src/components/ui/theme-toggle/theme-toggle.astro
index d6b776b81..51675c527 100644
--- a/src/components/ui/theme-toggle/theme-toggle.astro
+++ b/src/components/ui/theme-toggle/theme-toggle.astro
@@ -51,6 +51,7 @@ const {
     }
 
     syncThemeToggles()
+    document.addEventListener("astro:page-load", syncThemeToggles)
 
     const observer = new MutationObserver(syncThemeToggles)
 
diff --git a/src/components/ui/video/video.astro b/src/components/ui/video/video.astro
index 6efb69087..0f9cfcabf 100644
--- a/src/components/ui/video/video.astro
+++ b/src/components/ui/video/video.astro
@@ -3,7 +3,7 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-type Props = Omit<HTMLAttributes<"div">, "src"> & {
+type Props = Omit<HTMLAttributes<"iframe">, "src"> & {
   src?: string
 }
 

From ccaabd8ab8ea31de35a2b2c2fa0a76a96eb78eb0 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 14:22:48 +0200
Subject: [PATCH 02/60] Add data-slot markers and resolved data-variant to
 remaining UI parts

Mark Banner container, Logo, LogoText, Marquee, Price, PriceValue,
PriceUnit, Rating, Video and Icon with data-slot. Banner, Header and
Section default their variant so data-variant reflects the cva default,
PriceValue exposes its variant on the root, and Carousel controls emit
their resolved data-variant and data-size like Button.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ui/banner/banner-container.astro    | 1 +
 src/components/ui/banner/banner.astro              | 7 ++++++-
 src/components/ui/carousel/carousel-next.astro     | 2 ++
 src/components/ui/carousel/carousel-previous.astro | 2 ++
 src/components/ui/header/header.astro              | 2 +-
 src/components/ui/icon/icon.astro                  | 1 +
 src/components/ui/logo/logo-text.astro             | 2 +-
 src/components/ui/logo/logo.astro                  | 1 +
 src/components/ui/marquee/marquee.astro            | 1 +
 src/components/ui/price/price-unit.astro           | 1 +
 src/components/ui/price/price-value.astro          | 2 ++
 src/components/ui/price/price.astro                | 6 +++++-
 src/components/ui/rating/rating.astro              | 1 +
 src/components/ui/section/section.astro            | 2 +-
 src/components/ui/video/video.astro                | 1 +
 15 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/components/ui/banner/banner-container.astro b/src/components/ui/banner/banner-container.astro
index e215e5c29..dd2e9a329 100644
--- a/src/components/ui/banner/banner-container.astro
+++ b/src/components/ui/banner/banner-container.astro
@@ -17,6 +17,7 @@ const { class: className, showClose = true, ...props } = Astro.props
     showClose && "pr-10",
     className
   )}
+  data-slot="banner-container"
   {...props}
 >
   <slot />
diff --git a/src/components/ui/banner/banner.astro b/src/components/ui/banner/banner.astro
index f4463020d..a2d12fcca 100644
--- a/src/components/ui/banner/banner.astro
+++ b/src/components/ui/banner/banner.astro
@@ -22,7 +22,12 @@ const variants = cva("cn-banner relative flex items-center", {
   },
 })
 
-const { class: className, variant, storageKey, ...props } = Astro.props
+const {
+  class: className,
+  variant = "default",
+  storageKey,
+  ...props
+} = Astro.props
 ---
 
 <aside
diff --git a/src/components/ui/carousel/carousel-next.astro b/src/components/ui/carousel/carousel-next.astro
index d2b183759..14dab995e 100644
--- a/src/components/ui/carousel/carousel-next.astro
+++ b/src/components/ui/carousel/carousel-next.astro
@@ -19,6 +19,8 @@ const {
 <button
   type="button"
   data-slot="carousel-next"
+  data-variant={variant}
+  data-size={size}
   data-manual-disabled={disabled ? "true" : undefined}
   disabled={disabled}
   class={cn(
diff --git a/src/components/ui/carousel/carousel-previous.astro b/src/components/ui/carousel/carousel-previous.astro
index 5dfd7480c..f6fa2b180 100644
--- a/src/components/ui/carousel/carousel-previous.astro
+++ b/src/components/ui/carousel/carousel-previous.astro
@@ -19,6 +19,8 @@ const {
 <button
   type="button"
   data-slot="carousel-previous"
+  data-variant={variant}
+  data-size={size}
   data-manual-disabled={disabled ? "true" : undefined}
   disabled={disabled}
   class={cn(
diff --git a/src/components/ui/header/header.astro b/src/components/ui/header/header.astro
index 74e4aa0e1..8b89018e1 100644
--- a/src/components/ui/header/header.astro
+++ b/src/components/ui/header/header.astro
@@ -19,7 +19,7 @@ const variants = cva("cn-header relative z-50 flex w-full items-center gap-4", {
   },
 })
 
-const { class: className, variant, ...props } = Astro.props
+const { class: className, variant = "default", ...props } = Astro.props
 ---
 
 <header
diff --git a/src/components/ui/icon/icon.astro b/src/components/ui/icon/icon.astro
index e1c08d3f2..212fab71d 100644
--- a/src/components/ui/icon/icon.astro
+++ b/src/components/ui/icon/icon.astro
@@ -108,6 +108,7 @@ const isLabelled =
     fill={resolved.source === "simple" ? "currentColor" : "none"}
     class="size-[1em] text-base"
     aria-hidden={isLabelled ? undefined : "true"}
+    data-slot="icon"
     {...props}
   />
 )}
diff --git a/src/components/ui/logo/logo-text.astro b/src/components/ui/logo/logo-text.astro
index e2f0b80d6..e52b60880 100644
--- a/src/components/ui/logo/logo-text.astro
+++ b/src/components/ui/logo/logo-text.astro
@@ -8,6 +8,6 @@ type Props = HTMLAttributes<"span">
 const { class: className, ...props } = Astro.props
 ---
 
-<span class={cn("text-lg", className)} {...props}>
+<span class={cn("text-lg", className)} data-slot="logo-text" {...props}>
   <slot />
 </span>
diff --git a/src/components/ui/logo/logo.astro b/src/components/ui/logo/logo.astro
index 332c73b7c..4fbe0b682 100644
--- a/src/components/ui/logo/logo.astro
+++ b/src/components/ui/logo/logo.astro
@@ -15,6 +15,7 @@ const Comp = href ? "a" : "div"
     "cn-logo flex h-10 items-center justify-start gap-2 whitespace-nowrap",
     className
   )}
+  data-slot="logo"
   href={href}
   {...props}
 >
diff --git a/src/components/ui/marquee/marquee.astro b/src/components/ui/marquee/marquee.astro
index fee48504c..d57ae23d7 100644
--- a/src/components/ui/marquee/marquee.astro
+++ b/src/components/ui/marquee/marquee.astro
@@ -56,6 +56,7 @@ const resolvedStyle = [
     "group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]",
     className
   )}
+  data-slot="marquee"
   style={resolvedStyle}
   {...props}
 >
diff --git a/src/components/ui/price/price-unit.astro b/src/components/ui/price/price-unit.astro
index 26a26c7bf..a342358e9 100644
--- a/src/components/ui/price/price-unit.astro
+++ b/src/components/ui/price/price-unit.astro
@@ -10,6 +10,7 @@ const { class: className, ...props } = Astro.props
 
 <span
   class={cn("text-muted-foreground text-sm leading-tight", className)}
+  data-slot="price-unit"
   {...props}
 >
   / <slot />
diff --git a/src/components/ui/price/price-value.astro b/src/components/ui/price/price-value.astro
index 5034a8e2a..f2487af6d 100644
--- a/src/components/ui/price/price-value.astro
+++ b/src/components/ui/price/price-value.astro
@@ -59,6 +59,8 @@ const hasDiscount = Boolean(formattedCompareAt && formattedDiscount)
 {formattedPrice && (
   <span
     class={cn("inline-flex flex-wrap items-center gap-x-2 gap-y-1", className)}
+    data-slot="price-value"
+    data-variant={variant}
     {...props}
   >
     <span class={cn(variants({ variant }))}>{formattedPrice}</span>
diff --git a/src/components/ui/price/price.astro b/src/components/ui/price/price.astro
index 05b0beae0..ff512885b 100644
--- a/src/components/ui/price/price.astro
+++ b/src/components/ui/price/price.astro
@@ -8,6 +8,10 @@ type Props = HTMLAttributes<"div">
 const { class: className, ...props } = Astro.props
 ---
 
-<div class={cn("flex flex-wrap items-center gap-x-2", className)} {...props}>
+<div
+  class={cn("flex flex-wrap items-center gap-x-2", className)}
+  data-slot="price"
+  {...props}
+>
   <slot />
 </div>
diff --git a/src/components/ui/rating/rating.astro b/src/components/ui/rating/rating.astro
index 36d17a603..10e20902f 100644
--- a/src/components/ui/rating/rating.astro
+++ b/src/components/ui/rating/rating.astro
@@ -20,6 +20,7 @@ const {
   role="img"
   aria-label={ariaLabel}
   class={cn("flex items-center gap-1 text-base", className)}
+  data-slot="rating"
   {...props}
 >
   {Array.from({ length: 5 }).map((_, index) => {
diff --git a/src/components/ui/section/section.astro b/src/components/ui/section/section.astro
index 22330ac1e..374fc1763 100644
--- a/src/components/ui/section/section.astro
+++ b/src/components/ui/section/section.astro
@@ -19,7 +19,7 @@ const variants = cva("cn-section relative flex scroll-mt-12 flex-col", {
   },
 })
 
-const { class: className, variant, ...props } = Astro.props
+const { class: className, variant = "default", ...props } = Astro.props
 ---
 
 <section
diff --git a/src/components/ui/video/video.astro b/src/components/ui/video/video.astro
index 0f9cfcabf..47d1b4ccf 100644
--- a/src/components/ui/video/video.astro
+++ b/src/components/ui/video/video.astro
@@ -50,6 +50,7 @@ const isShort = src?.includes("/shorts/")
       isShort ? "aspect-9/16 max-w-xs" : "aspect-video",
       className
     )}
+    data-slot="video"
     {...props}
   />
 )}

From 779a838140827d87293bc5506ed6f591ddb037aa Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 14:30:55 +0200
Subject: [PATCH 03/60] Use logical directions, native link props, and
 overridable data-slot markers in UI components

Typography and TOC wrappers use logical inline directions, NavigationMenuLink
sets aria-current from active, Item and Logo pick a link from href presence,
ToastAction exposes its variant and size, Video and the newly marked roots
let callers override title and data-slot, and ThemeToggle accepts disabled.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ui/banner/banner-container.astro      |  9 +++++++--
 src/components/ui/icon/icon.astro                    |  4 ++--
 src/components/ui/item/item.astro                    |  2 +-
 src/components/ui/logo/logo-text.astro               |  8 ++++++--
 src/components/ui/logo/logo.astro                    | 11 ++++++++---
 src/components/ui/marquee/marquee.astro              |  3 ++-
 .../ui/navigation-menu/navigation-menu-link.astro    |  8 +++++++-
 src/components/ui/price/price-unit.astro             |  8 ++++++--
 src/components/ui/price/price-value.astro            |  3 ++-
 src/components/ui/price/price.astro                  |  8 ++++++--
 src/components/ui/rating/rating.astro                |  3 ++-
 src/components/ui/theme-toggle/theme-toggle.astro    |  4 +++-
 src/components/ui/toast/toast-action.astro           |  2 ++
 src/components/ui/toc/toc-menu-link.astro            |  4 ++--
 .../ui/typography/typography-blockquote.astro        |  2 +-
 src/components/ui/typography/typography-list.astro   |  2 +-
 .../ui/typography/typography-table-cell.astro        |  2 +-
 .../ui/typography/typography-table-head.astro        |  2 +-
 src/components/ui/video/video.astro                  | 12 +++++++++---
 19 files changed, 69 insertions(+), 28 deletions(-)

diff --git a/src/components/ui/banner/banner-container.astro b/src/components/ui/banner/banner-container.astro
index dd2e9a329..7c8884c37 100644
--- a/src/components/ui/banner/banner-container.astro
+++ b/src/components/ui/banner/banner-container.astro
@@ -8,7 +8,12 @@ type Props = HTMLAttributes<"div"> & {
   showClose?: boolean
 }
 
-const { class: className, showClose = true, ...props } = Astro.props
+const {
+  class: className,
+  showClose = true,
+  "data-slot": dataSlot = "banner-container",
+  ...props
+} = Astro.props
 ---
 
 <div
@@ -17,7 +22,7 @@ const { class: className, showClose = true, ...props } = Astro.props
     showClose && "pr-10",
     className
   )}
-  data-slot="banner-container"
+  data-slot={dataSlot}
   {...props}
 >
   <slot />
diff --git a/src/components/ui/icon/icon.astro b/src/components/ui/icon/icon.astro
index 212fab71d..7b0b17a0c 100644
--- a/src/components/ui/icon/icon.astro
+++ b/src/components/ui/icon/icon.astro
@@ -6,7 +6,7 @@ type Props = Omit<HTMLAttributes<"svg">, "name" | "href"> & {
   name?: string | number
 }
 
-const { name, href, ...props } = Astro.props
+const { name, href, "data-slot": dataSlot = "icon", ...props } = Astro.props
 
 const hrefMap = {
   "x.com": "x",
@@ -108,7 +108,7 @@ const isLabelled =
     fill={resolved.source === "simple" ? "currentColor" : "none"}
     class="size-[1em] text-base"
     aria-hidden={isLabelled ? undefined : "true"}
-    data-slot="icon"
+    data-slot={dataSlot}
     {...props}
   />
 )}
diff --git a/src/components/ui/item/item.astro b/src/components/ui/item/item.astro
index fc9844c2f..430d33353 100644
--- a/src/components/ui/item/item.astro
+++ b/src/components/ui/item/item.astro
@@ -38,7 +38,7 @@ const {
   ...props
 } = Astro.props
 
-const Comp = href ? "a" : "div"
+const Comp = "href" in Astro.props ? "a" : "div"
 ---
 
 <Comp
diff --git a/src/components/ui/logo/logo-text.astro b/src/components/ui/logo/logo-text.astro
index e52b60880..7e0e91459 100644
--- a/src/components/ui/logo/logo-text.astro
+++ b/src/components/ui/logo/logo-text.astro
@@ -5,9 +5,13 @@ import { cn } from "@/lib/utils"
 
 type Props = HTMLAttributes<"span">
 
-const { class: className, ...props } = Astro.props
+const {
+  class: className,
+  "data-slot": dataSlot = "logo-text",
+  ...props
+} = Astro.props
 ---
 
-<span class={cn("text-lg", className)} data-slot="logo-text" {...props}>
+<span class={cn("text-lg", className)} data-slot={dataSlot} {...props}>
   <slot />
 </span>
diff --git a/src/components/ui/logo/logo.astro b/src/components/ui/logo/logo.astro
index 4fbe0b682..d3bb43551 100644
--- a/src/components/ui/logo/logo.astro
+++ b/src/components/ui/logo/logo.astro
@@ -5,9 +5,14 @@ import { cn } from "@/lib/utils"
 
 type Props = HTMLAttributes<"div"> & HTMLAttributes<"a">
 
-const { class: className, href, ...props } = Astro.props
+const {
+  class: className,
+  href,
+  "data-slot": dataSlot = "logo",
+  ...props
+} = Astro.props
 
-const Comp = href ? "a" : "div"
+const Comp = "href" in Astro.props ? "a" : "div"
 ---
 
 <Comp
@@ -15,7 +20,7 @@ const Comp = href ? "a" : "div"
     "cn-logo flex h-10 items-center justify-start gap-2 whitespace-nowrap",
     className
   )}
-  data-slot="logo"
+  data-slot={dataSlot}
   href={href}
   {...props}
 >
diff --git a/src/components/ui/marquee/marquee.astro b/src/components/ui/marquee/marquee.astro
index d57ae23d7..174bd3bb2 100644
--- a/src/components/ui/marquee/marquee.astro
+++ b/src/components/ui/marquee/marquee.astro
@@ -39,6 +39,7 @@ const {
   gap = "1.5rem",
   infinite = true,
   style,
+  "data-slot": dataSlot = "marquee",
   ...props
 } = Astro.props
 
@@ -56,7 +57,7 @@ const resolvedStyle = [
     "group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]",
     className
   )}
-  data-slot="marquee"
+  data-slot={dataSlot}
   style={resolvedStyle}
   {...props}
 >
diff --git a/src/components/ui/navigation-menu/navigation-menu-link.astro b/src/components/ui/navigation-menu/navigation-menu-link.astro
index 13e1a0db7..16b1c7f8b 100644
--- a/src/components/ui/navigation-menu/navigation-menu-link.astro
+++ b/src/components/ui/navigation-menu/navigation-menu-link.astro
@@ -7,12 +7,18 @@ type Props = HTMLAttributes<"a"> & {
   active?: boolean
 }
 
-const { class: className, active, ...props } = Astro.props
+const {
+  class: className,
+  active,
+  "aria-current": ariaCurrent = active ? "page" : undefined,
+  ...props
+} = Astro.props
 ---
 
 <a
   data-slot="navigation-menu-link"
   data-active={active ? "true" : undefined}
+  aria-current={ariaCurrent}
   class={cn("cn-navigation-menu-link", className)}
   {...props}
 >
diff --git a/src/components/ui/price/price-unit.astro b/src/components/ui/price/price-unit.astro
index a342358e9..733984c90 100644
--- a/src/components/ui/price/price-unit.astro
+++ b/src/components/ui/price/price-unit.astro
@@ -5,12 +5,16 @@ import { cn } from "@/lib/utils"
 
 type Props = HTMLAttributes<"span">
 
-const { class: className, ...props } = Astro.props
+const {
+  class: className,
+  "data-slot": dataSlot = "price-unit",
+  ...props
+} = Astro.props
 ---
 
 <span
   class={cn("text-muted-foreground text-sm leading-tight", className)}
-  data-slot="price-unit"
+  data-slot={dataSlot}
   {...props}
 >
   / <slot />
diff --git a/src/components/ui/price/price-value.astro b/src/components/ui/price/price-value.astro
index f2487af6d..673edff66 100644
--- a/src/components/ui/price/price-value.astro
+++ b/src/components/ui/price/price-value.astro
@@ -40,6 +40,7 @@ const {
   variant = "default",
   discountFormat = "percentage",
   showDiscount = true,
+  "data-slot": dataSlot = "price-value",
   ...props
 } = Astro.props
 
@@ -59,7 +60,7 @@ const hasDiscount = Boolean(formattedCompareAt && formattedDiscount)
 {formattedPrice && (
   <span
     class={cn("inline-flex flex-wrap items-center gap-x-2 gap-y-1", className)}
-    data-slot="price-value"
+    data-slot={dataSlot}
     data-variant={variant}
     {...props}
   >
diff --git a/src/components/ui/price/price.astro b/src/components/ui/price/price.astro
index ff512885b..b8799a746 100644
--- a/src/components/ui/price/price.astro
+++ b/src/components/ui/price/price.astro
@@ -5,12 +5,16 @@ import { cn } from "@/lib/utils"
 
 type Props = HTMLAttributes<"div">
 
-const { class: className, ...props } = Astro.props
+const {
+  class: className,
+  "data-slot": dataSlot = "price",
+  ...props
+} = Astro.props
 ---
 
 <div
   class={cn("flex flex-wrap items-center gap-x-2", className)}
-  data-slot="price"
+  data-slot={dataSlot}
   {...props}
 >
   <slot />
diff --git a/src/components/ui/rating/rating.astro b/src/components/ui/rating/rating.astro
index 10e20902f..c21e8af58 100644
--- a/src/components/ui/rating/rating.astro
+++ b/src/components/ui/rating/rating.astro
@@ -12,6 +12,7 @@ const {
   value = 5,
   class: className,
   "aria-label": ariaLabel = `Rated ${value} out of 5`,
+  "data-slot": dataSlot = "rating",
   ...props
 } = Astro.props
 ---
@@ -20,7 +21,7 @@ const {
   role="img"
   aria-label={ariaLabel}
   class={cn("flex items-center gap-1 text-base", className)}
-  data-slot="rating"
+  data-slot={dataSlot}
   {...props}
 >
   {Array.from({ length: 5 }).map((_, index) => {
diff --git a/src/components/ui/theme-toggle/theme-toggle.astro b/src/components/ui/theme-toggle/theme-toggle.astro
index 51675c527..6c9032f86 100644
--- a/src/components/ui/theme-toggle/theme-toggle.astro
+++ b/src/components/ui/theme-toggle/theme-toggle.astro
@@ -6,7 +6,9 @@ import Sun from "@lucide/astro/icons/sun"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 
-type Props = ComponentProps<typeof Button>
+type Props = ComponentProps<typeof Button> & {
+  disabled?: boolean
+}
 
 const {
   class: className,
diff --git a/src/components/ui/toast/toast-action.astro b/src/components/ui/toast/toast-action.astro
index 689ccd1f7..5b8e40719 100644
--- a/src/components/ui/toast/toast-action.astro
+++ b/src/components/ui/toast/toast-action.astro
@@ -16,6 +16,8 @@ const {
 
 <button
   data-slot="toast-action"
+  data-variant="outline"
+  data-size="sm"
   type={type}
   class={cn(buttonVariants({ variant: "outline", size: "sm" }), className)}
   hidden={hidden}
diff --git a/src/components/ui/toc/toc-menu-link.astro b/src/components/ui/toc/toc-menu-link.astro
index b0edd8e4b..71c889984 100644
--- a/src/components/ui/toc/toc-menu-link.astro
+++ b/src/components/ui/toc/toc-menu-link.astro
@@ -27,8 +27,8 @@ const resolvedActive = isActive ?? active
   aria-current={resolvedActive ? "location" : undefined}
   class={cn(
     "cn-toc-menu-link text-muted-foreground hover:text-foreground data-[active=true]:text-foreground block transition-colors",
-    depth === 3 && "pl-4",
-    depth >= 4 && "pl-8",
+    depth === 3 && "ps-4",
+    depth >= 4 && "ps-8",
     className
   )}
   {...props}
diff --git a/src/components/ui/typography/typography-blockquote.astro b/src/components/ui/typography/typography-blockquote.astro
index d037b53d4..44a67ec6e 100644
--- a/src/components/ui/typography/typography-blockquote.astro
+++ b/src/components/ui/typography/typography-blockquote.astro
@@ -17,7 +17,7 @@ const sizeClass =
 <blockquote
   data-slot="typography-blockquote"
   data-size={size}
-  class={cn("mt-6 border-l-2 pl-6 italic", sizeClass, className)}
+  class={cn("mt-6 border-s-2 ps-6 italic", sizeClass, className)}
   {...props}
 >
   <slot />
diff --git a/src/components/ui/typography/typography-list.astro b/src/components/ui/typography/typography-list.astro
index e7d3ff5d5..13967975f 100644
--- a/src/components/ui/typography/typography-list.astro
+++ b/src/components/ui/typography/typography-list.astro
@@ -22,7 +22,7 @@ const sizeClass =
   data-size={size}
   data-ordered={Tag === "ol" ? "" : undefined}
   class={cn(
-    "my-6 ml-6",
+    "my-6 ms-6",
     Tag === "ol" ? "list-decimal" : "list-disc",
     sizeClass,
     className
diff --git a/src/components/ui/typography/typography-table-cell.astro b/src/components/ui/typography/typography-table-cell.astro
index 8d035e878..37db29c08 100644
--- a/src/components/ui/typography/typography-table-cell.astro
+++ b/src/components/ui/typography/typography-table-cell.astro
@@ -18,7 +18,7 @@ const sizeClass =
   data-slot="typography-table-cell"
   data-size={size}
   class={cn(
-    "border-border border-t px-4 py-3 text-left align-middle",
+    "border-border border-t px-4 py-3 text-start align-middle",
     "[&[align=center]]:text-center [&[align=right]]:text-right",
     sizeClass,
     className
diff --git a/src/components/ui/typography/typography-table-head.astro b/src/components/ui/typography/typography-table-head.astro
index dfdfcbdbd..bab6df2d2 100644
--- a/src/components/ui/typography/typography-table-head.astro
+++ b/src/components/ui/typography/typography-table-head.astro
@@ -18,7 +18,7 @@ const sizeClass =
   data-slot="typography-table-head"
   data-size={size}
   class={cn(
-    "border-border border-b px-4 py-3 text-left font-semibold",
+    "border-border border-b px-4 py-3 text-start font-semibold",
     "[&[align=center]]:text-center [&[align=right]]:text-right",
     sizeClass,
     className
diff --git a/src/components/ui/video/video.astro b/src/components/ui/video/video.astro
index 47d1b4ccf..04dc3bd89 100644
--- a/src/components/ui/video/video.astro
+++ b/src/components/ui/video/video.astro
@@ -7,7 +7,13 @@ type Props = Omit<HTMLAttributes<"iframe">, "src"> & {
   src?: string
 }
 
-const { class: className, src, ...props } = Astro.props
+const {
+  class: className,
+  src,
+  title = "Embedded video",
+  "data-slot": dataSlot = "video",
+  ...props
+} = Astro.props
 
 const getEmbedSrc = (value?: string) => {
   if (!value) return undefined
@@ -42,7 +48,7 @@ const isShort = src?.includes("/shorts/")
 {embedSrc && (
   <iframe
     src={embedSrc}
-    title="Embedded video"
+    title={title}
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
     allowfullscreen
     class={cn(
@@ -50,7 +56,7 @@ const isShort = src?.includes("/shorts/")
       isShort ? "aspect-9/16 max-w-xs" : "aspect-video",
       className
     )}
-    data-slot="video"
+    data-slot={dataSlot}
     {...props}
   />
 )}

From d92073b4c8f542583d72edc490c9b75c2404d11d Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 14:31:16 +0200
Subject: [PATCH 04/60] Regenerate registry output for UI component consistency
 changes

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 public/r/banner.json                           |  4 ++--
 public/r/carousel.json                         |  6 +++---
 public/r/dropdown-menu.json                    | 10 +++++-----
 public/r/header.json                           |  2 +-
 public/r/icon.json                             |  2 +-
 public/r/item.json                             |  2 +-
 public/r/layout.json                           |  2 +-
 public/r/logo.json                             |  4 ++--
 public/r/marquee.json                          |  2 +-
 public/r/navigation-menu.json                  |  2 +-
 public/r/price.json                            |  6 +++---
 public/r/rating.json                           |  2 +-
 public/r/section.json                          |  2 +-
 public/r/styles/base-luma/banner.json          |  4 ++--
 public/r/styles/base-luma/carousel.json        |  6 +++---
 public/r/styles/base-luma/dropdown-menu.json   | 10 +++++-----
 public/r/styles/base-luma/header.json          |  2 +-
 public/r/styles/base-luma/icon.json            |  2 +-
 public/r/styles/base-luma/item.json            |  2 +-
 public/r/styles/base-luma/layout.json          |  2 +-
 public/r/styles/base-luma/logo.json            |  4 ++--
 public/r/styles/base-luma/marquee.json         |  2 +-
 public/r/styles/base-luma/navigation-menu.json |  2 +-
 public/r/styles/base-luma/price.json           |  6 +++---
 public/r/styles/base-luma/rating.json          |  2 +-
 public/r/styles/base-luma/section.json         |  2 +-
 public/r/styles/base-luma/theme-toggle.json    |  2 +-
 public/r/styles/base-luma/toast.json           |  2 +-
 public/r/styles/base-luma/toc.json             |  2 +-
 public/r/styles/base-luma/typography.json      |  8 ++++----
 public/r/styles/base-luma/video.json           |  2 +-
 public/r/styles/base-lyra/banner.json          |  4 ++--
 public/r/styles/base-lyra/carousel.json        |  6 +++---
 public/r/styles/base-lyra/dropdown-menu.json   | 10 +++++-----
 public/r/styles/base-lyra/header.json          |  2 +-
 public/r/styles/base-lyra/icon.json            |  2 +-
 public/r/styles/base-lyra/item.json            |  2 +-
 public/r/styles/base-lyra/layout.json          |  2 +-
 public/r/styles/base-lyra/logo.json            |  4 ++--
 public/r/styles/base-lyra/marquee.json         |  2 +-
 public/r/styles/base-lyra/navigation-menu.json |  2 +-
 public/r/styles/base-lyra/price.json           |  6 +++---
 public/r/styles/base-lyra/rating.json          |  2 +-
 public/r/styles/base-lyra/section.json         |  2 +-
 public/r/styles/base-lyra/theme-toggle.json    |  2 +-
 public/r/styles/base-lyra/toast.json           |  2 +-
 public/r/styles/base-lyra/toc.json             |  2 +-
 public/r/styles/base-lyra/typography.json      |  8 ++++----
 public/r/styles/base-lyra/video.json           |  2 +-
 public/r/styles/base-maia/banner.json          |  4 ++--
 public/r/styles/base-maia/carousel.json        |  6 +++---
 public/r/styles/base-maia/dropdown-menu.json   | 10 +++++-----
 public/r/styles/base-maia/header.json          |  2 +-
 public/r/styles/base-maia/icon.json            |  2 +-
 public/r/styles/base-maia/item.json            |  2 +-
 public/r/styles/base-maia/layout.json          |  2 +-
 public/r/styles/base-maia/logo.json            |  4 ++--
 public/r/styles/base-maia/marquee.json         |  2 +-
 public/r/styles/base-maia/navigation-menu.json |  2 +-
 public/r/styles/base-maia/price.json           |  6 +++---
 public/r/styles/base-maia/rating.json          |  2 +-
 public/r/styles/base-maia/section.json         |  2 +-
 public/r/styles/base-maia/theme-toggle.json    |  2 +-
 public/r/styles/base-maia/toast.json           |  2 +-
 public/r/styles/base-maia/toc.json             |  2 +-
 public/r/styles/base-maia/typography.json      |  8 ++++----
 public/r/styles/base-maia/video.json           |  2 +-
 public/r/styles/base-mira/banner.json          |  4 ++--
 public/r/styles/base-mira/carousel.json        |  6 +++---
 public/r/styles/base-mira/dropdown-menu.json   | 10 +++++-----
 public/r/styles/base-mira/header.json          |  2 +-
 public/r/styles/base-mira/icon.json            |  2 +-
 public/r/styles/base-mira/item.json            |  2 +-
 public/r/styles/base-mira/layout.json          |  2 +-
 public/r/styles/base-mira/logo.json            |  4 ++--
 public/r/styles/base-mira/marquee.json         |  2 +-
 public/r/styles/base-mira/navigation-menu.json |  2 +-
 public/r/styles/base-mira/price.json           |  6 +++---
 public/r/styles/base-mira/rating.json          |  2 +-
 public/r/styles/base-mira/section.json         |  2 +-
 public/r/styles/base-mira/theme-toggle.json    |  2 +-
 public/r/styles/base-mira/toast.json           |  2 +-
 public/r/styles/base-mira/toc.json             |  2 +-
 public/r/styles/base-mira/typography.json      |  8 ++++----
 public/r/styles/base-mira/video.json           |  2 +-
 public/r/styles/base-nova/banner.json          |  4 ++--
 public/r/styles/base-nova/carousel.json        |  6 +++---
 public/r/styles/base-nova/dropdown-menu.json   | 10 +++++-----
 public/r/styles/base-nova/header.json          |  2 +-
 public/r/styles/base-nova/icon.json            |  2 +-
 public/r/styles/base-nova/item.json            |  2 +-
 public/r/styles/base-nova/layout.json          |  2 +-
 public/r/styles/base-nova/logo.json            |  4 ++--
 public/r/styles/base-nova/marquee.json         |  2 +-
 public/r/styles/base-nova/navigation-menu.json |  2 +-
 public/r/styles/base-nova/price.json           |  6 +++---
 public/r/styles/base-nova/rating.json          |  2 +-
 public/r/styles/base-nova/section.json         |  2 +-
 public/r/styles/base-nova/theme-toggle.json    |  2 +-
 public/r/styles/base-nova/toast.json           |  2 +-
 public/r/styles/base-nova/toc.json             |  2 +-
 public/r/styles/base-nova/typography.json      |  8 ++++----
 public/r/styles/base-nova/video.json           |  2 +-
 public/r/styles/base-rhea/banner.json          |  4 ++--
 public/r/styles/base-rhea/carousel.json        |  6 +++---
 public/r/styles/base-rhea/dropdown-menu.json   | 10 +++++-----
 public/r/styles/base-rhea/header.json          |  2 +-
 public/r/styles/base-rhea/icon.json            |  2 +-
 public/r/styles/base-rhea/item.json            |  2 +-
 public/r/styles/base-rhea/layout.json          |  2 +-
 public/r/styles/base-rhea/logo.json            |  4 ++--
 public/r/styles/base-rhea/marquee.json         |  2 +-
 public/r/styles/base-rhea/navigation-menu.json |  2 +-
 public/r/styles/base-rhea/price.json           |  6 +++---
 public/r/styles/base-rhea/rating.json          |  2 +-
 public/r/styles/base-rhea/section.json         |  2 +-
 public/r/styles/base-rhea/theme-toggle.json    |  2 +-
 public/r/styles/base-rhea/toast.json           |  2 +-
 public/r/styles/base-rhea/toc.json             |  2 +-
 public/r/styles/base-rhea/typography.json      |  8 ++++----
 public/r/styles/base-rhea/video.json           |  2 +-
 public/r/styles/base-sera/banner.json          |  4 ++--
 public/r/styles/base-sera/carousel.json        |  6 +++---
 public/r/styles/base-sera/dropdown-menu.json   | 10 +++++-----
 public/r/styles/base-sera/header.json          |  2 +-
 public/r/styles/base-sera/icon.json            |  2 +-
 public/r/styles/base-sera/item.json            |  2 +-
 public/r/styles/base-sera/layout.json          |  2 +-
 public/r/styles/base-sera/logo.json            |  4 ++--
 public/r/styles/base-sera/marquee.json         |  2 +-
 public/r/styles/base-sera/navigation-menu.json |  2 +-
 public/r/styles/base-sera/price.json           |  6 +++---
 public/r/styles/base-sera/rating.json          |  2 +-
 public/r/styles/base-sera/section.json         |  2 +-
 public/r/styles/base-sera/theme-toggle.json    |  2 +-
 public/r/styles/base-sera/toast.json           |  2 +-
 public/r/styles/base-sera/toc.json             |  2 +-
 public/r/styles/base-sera/typography.json      |  8 ++++----
 public/r/styles/base-sera/video.json           |  2 +-
 public/r/styles/base-vega/banner.json          |  4 ++--
 public/r/styles/base-vega/carousel.json        |  6 +++---
 public/r/styles/base-vega/dropdown-menu.json   | 10 +++++-----
 public/r/styles/base-vega/header.json          |  2 +-
 public/r/styles/base-vega/icon.json            |  2 +-
 public/r/styles/base-vega/item.json            |  2 +-
 public/r/styles/base-vega/layout.json          |  2 +-
 public/r/styles/base-vega/logo.json            |  4 ++--
 public/r/styles/base-vega/marquee.json         |  2 +-
 public/r/styles/base-vega/navigation-menu.json |  2 +-
 public/r/styles/base-vega/price.json           |  6 +++---
 public/r/styles/base-vega/rating.json          |  2 +-
 public/r/styles/base-vega/section.json         |  2 +-
 public/r/styles/base-vega/theme-toggle.json    |  2 +-
 public/r/styles/base-vega/toast.json           |  2 +-
 public/r/styles/base-vega/toc.json             |  2 +-
 public/r/styles/base-vega/typography.json      |  8 ++++----
 public/r/styles/base-vega/video.json           |  2 +-
 public/r/theme-toggle.json                     |  2 +-
 public/r/toast.json                            |  2 +-
 public/r/toc.json                              |  2 +-
 public/r/typography.json                       |  8 ++++----
 public/r/video.json                            |  2 +-
 162 files changed, 279 insertions(+), 279 deletions(-)

diff --git a/public/r/banner.json b/public/r/banner.json
index e34d9309c..ad6f6745e 100644
--- a/public/r/banner.json
+++ b/public/r/banner.json
@@ -9,12 +9,12 @@
   "files": [
     {
       "path": "src/components/ui/banner/banner.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"aside\"> &\n  VariantProps<typeof variants> & {\n    storageKey?: string\n  }\n\nconst variants = cva(\"py-2 relative flex items-center\", {\n  variants: {\n    variant: {\n      default: \"bg-foreground text-background w-full\",\n      floating:\n        \"my-2 rounded-lg border bg-background shadow-sm mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, storageKey, ...props } = Astro.props\n---\n\n<aside\n  class={cn(variants({ variant }), className)}\n  data-slot=\"banner\"\n  data-banner-storage-key={storageKey}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</aside>\n\n<script>\n  const getStorageToken = (key: string) => `banner:${key}`\n\n  const syncBanners = () => {\n    document.querySelectorAll(\"[data-slot='banner']\").forEach((banner) => {\n      if (!(banner instanceof HTMLElement)) return\n      const storageKey = banner.dataset.bannerStorageKey\n      if (\n        storageKey &&\n        sessionStorage.getItem(getStorageToken(storageKey)) === \"hidden\"\n      ) {\n        banner.hidden = true\n      }\n    })\n  }\n\n  syncBanners()\n  document.addEventListener(\"astro:page-load\", syncBanners)\n\n  document.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return\n    const closeButton = event.target.closest(\"[data-slot='banner-close']\")\n    const banner = closeButton?.closest(\"[data-slot='banner']\")\n    if (!(banner instanceof HTMLElement)) return\n    banner.hidden = true\n    const storageKey = banner.dataset.bannerStorageKey\n    if (storageKey)\n      sessionStorage.setItem(getStorageToken(storageKey), \"hidden\")\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"aside\"> &\n  VariantProps<typeof variants> & {\n    storageKey?: string\n  }\n\nconst variants = cva(\"py-2 relative flex items-center\", {\n  variants: {\n    variant: {\n      default: \"bg-foreground text-background w-full\",\n      floating:\n        \"my-2 rounded-lg border bg-background shadow-sm mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  storageKey,\n  ...props\n} = Astro.props\n---\n\n<aside\n  class={cn(variants({ variant }), className)}\n  data-slot=\"banner\"\n  data-banner-storage-key={storageKey}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</aside>\n\n<script>\n  const getStorageToken = (key: string) => `banner:${key}`\n\n  const syncBanners = () => {\n    document.querySelectorAll(\"[data-slot='banner']\").forEach((banner) => {\n      if (!(banner instanceof HTMLElement)) return\n      const storageKey = banner.dataset.bannerStorageKey\n      if (\n        storageKey &&\n        sessionStorage.getItem(getStorageToken(storageKey)) === \"hidden\"\n      ) {\n        banner.hidden = true\n      }\n    })\n  }\n\n  syncBanners()\n  document.addEventListener(\"astro:page-load\", syncBanners)\n\n  document.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return\n    const closeButton = event.target.closest(\"[data-slot='banner-close']\")\n    const banner = closeButton?.closest(\"[data-slot='banner']\")\n    if (!(banner instanceof HTMLElement)) return\n    banner.hidden = true\n    const storageKey = banner.dataset.bannerStorageKey\n    if (storageKey)\n      sessionStorage.setItem(getStorageToken(storageKey), \"hidden\")\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/banner/banner-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst { class: className, showClose = true, ...props } = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-sm text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst {\n  class: className,\n  showClose = true,\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-sm text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/carousel.json b/public/r/carousel.json
index 3e3052ad3..7971e22fc 100644
--- a/public/r/carousel.json
+++ b/public/r/carousel.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = root.querySelector<HTMLElement>(\n        '[data-slot=\"carousel-content\"]'\n      )\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = root.querySelectorAll<HTMLButtonElement>(\n        '[data-slot=\"carousel-previous\"]'\n      )\n      const next = root.querySelectorAll<HTMLButtonElement>(\n        '[data-slot=\"carousel-next\"]'\n      )\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -28,12 +28,12 @@
     },
     {
       "path": "src/components/ui/carousel/carousel-next.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-previous.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/dropdown-menu.json b/public/r/dropdown-menu.json
index b60acc57e..941375064 100644
--- a/public/r/dropdown-menu.json
+++ b/public/r/dropdown-menu.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { Align, Side } from \"@data-slot/dropdown-menu\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  defaultValue?: string | null\n  defaultValues?: string[]\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  closeOnSelect?: boolean\n  highlightItemOnHover?: boolean\n  side?: Side\n  align?: Align\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  defaultValue,\n  defaultValues,\n  closeOnClickOutside,\n  closeOnEscape,\n  closeOnSelect,\n  highlightItemOnHover,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionPadding,\n  lockScroll,\n  ...props\n} = Astro.props\n\nconst defaultValuesAttr =\n  defaultValues === undefined ? undefined : JSON.stringify(defaultValues)\n---\n\n<div\n  data-slot=\"dropdown-menu\"\n  data-default-open={defaultOpen}\n  data-default-value={defaultValue}\n  data-default-values={defaultValuesAttr}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-close-on-select={closeOnSelect}\n  data-highlight-item-on-hover={highlightItemOnHover}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-avoid-collisions={avoidCollisions}\n  data-collision-padding={collisionPadding}\n  data-lock-scroll={lockScroll}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dropdown-menu\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { Align, Side } from \"@data-slot/dropdown-menu\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  defaultValue?: string | null\n  defaultValues?: string[]\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  closeOnSelect?: boolean\n  highlightItemOnHover?: boolean\n  side?: Side\n  align?: Align\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  defaultValue,\n  defaultValues,\n  closeOnClickOutside,\n  closeOnEscape,\n  closeOnSelect,\n  highlightItemOnHover,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionPadding,\n  lockScroll,\n  ...props\n} = Astro.props\n\nconst defaultValuesAttr =\n  defaultValues === undefined ? undefined : JSON.stringify(defaultValues)\n---\n\n<div\n  data-slot=\"dropdown-menu\"\n  data-default-open={defaultOpen}\n  data-default-value={defaultValue === null ? \"\" : defaultValue}\n  data-default-values={defaultValuesAttr}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-close-on-select={closeOnSelect}\n  data-highlight-item-on-hover={highlightItemOnHover}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-avoid-collisions={avoidCollisions}\n  data-collision-padding={collisionPadding}\n  data-lock-scroll={lockScroll}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dropdown-menu\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -25,17 +25,17 @@
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> &\n  HTMLAttributes<\"a\"> & {\n    as?: \"button\" | \"a\"\n    disabled?: boolean\n    variant?: \"default\" | \"destructive\"\n    inset?: boolean\n  }\n\nconst {\n  as: Tag = \"href\" in Astro.props ? \"a\" : \"button\",\n  class: className,\n  type = \"button\",\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<Tag\n  data-slot=\"dropdown-menu-item\"\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={Tag === \"button\" && disabled ? true : undefined}\n  type={Tag === \"button\" ? type : undefined}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n\n<script>\n  // Data Slot owns selection; links also need native keyboard activation.\n  document.addEventListener(\n    \"keydown\",\n    (event) => {\n      if (\n        event.defaultPrevented ||\n        event.isComposing ||\n        ![\"Enter\", \" \"].includes(event.key)\n      )\n        return\n      const item =\n        event.target instanceof Element\n          ? event.target.closest('[data-slot=\"dropdown-menu-item\"][href]')\n          : null\n      if (\n        !(item instanceof HTMLAnchorElement) ||\n        item.getAttribute(\"aria-disabled\") === \"true\"\n      )\n        return\n      event.preventDefault()\n      event.stopPropagation()\n      item.click()\n    },\n    true\n  )\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> &\n  HTMLAttributes<\"a\"> & {\n    as?: \"button\" | \"a\"\n    disabled?: boolean\n    variant?: \"default\" | \"destructive\"\n    inset?: boolean\n  }\n\nconst {\n  as: Tag = \"href\" in Astro.props ? \"a\" : \"button\",\n  class: className,\n  type = \"button\",\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<Tag\n  data-slot=\"dropdown-menu-item\"\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={Tag === \"button\" && disabled ? true : undefined}\n  type={Tag === \"button\" ? type : undefined}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n\n<script>\n  // Data Slot owns selection; links also need native keyboard activation.\n  document.addEventListener(\n    \"keydown\",\n    (event) => {\n      if (\n        event.defaultPrevented ||\n        event.isComposing ||\n        ![\"Enter\", \" \"].includes(event.key)\n      )\n        return\n      const item =\n        event.target instanceof Element\n          ? event.target.closest('[data-slot=\"dropdown-menu-item\"][href]')\n          : null\n      if (\n        !(item instanceof HTMLAnchorElement) ||\n        item.getAttribute(\"aria-disabled\") === \"true\"\n      )\n        return\n      event.preventDefault()\n      event.stopPropagation()\n      item.click()\n    },\n    true\n  )\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-radio-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-radio-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-radio-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-radio-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-radio-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-radio-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-radio-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-radio-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-radio-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-checkbox-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-checkbox-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-checkbox-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-checkbox-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-checkbox-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-checkbox-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-checkbox-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-checkbox-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
@@ -45,7 +45,7 @@
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-label.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  inset?: boolean\n}\n\nconst { class: className, inset, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"dropdown-menu-label\"\n  data-inset={inset}\n  class={cn(\"text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8\", className)}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  inset?: boolean\n}\n\nconst { class: className, inset, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"dropdown-menu-label\"\n  data-inset={inset || undefined}\n  class={cn(\"text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8\", className)}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/header.json b/public/r/header.json
index 8183e429e..4108fed3e 100644
--- a/public/r/header.json
+++ b/public/r/header.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/header/header.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-lg border bg-background shadow-sm mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-lg border bg-background shadow-sm mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/icon.json b/public/r/icon.json
index 08bcfdfad..2dd8ce89c 100644
--- a/public/r/icon.json
+++ b/public/r/icon.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/ui/icon/icon.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = Omit<HTMLAttributes<\"svg\">, \"name\" | \"href\"> & {\n  href?: HTMLAttributes<\"a\">[\"href\"]\n  name?: string | number\n}\n\nconst { name, href, ...props } = Astro.props\n\nconst hrefMap = {\n  \"x.com\": \"x\",\n  twitter: \"twitter\",\n  facebook: \"facebook\",\n  instagram: \"instagram\",\n  pinterest: \"pinterest\",\n  youtube: \"youtube\",\n  tiktok: \"tiktok\",\n  snapchat: \"snapchat\",\n  reddit: \"reddit\",\n  tumblr: \"tumblr\",\n  \"wa.me\": \"whatsapp\",\n  telegram: \"telegram\",\n  discord: \"discord\",\n  vimeo: \"vimeo\",\n  flickr: \"flickr\",\n  yelp: \"yelp\",\n  spotify: \"spotify\",\n  behance: \"behance\",\n  dribbble: \"dribbble\",\n  soundcloud: \"soundcloud\",\n  github: \"github\",\n  twitch: \"twitch\",\n  \"tel:\": \"phone\",\n  \"mailto:\": \"mail\",\n  \"maps.app.goo.gl\": \"map-pin\",\n  linkedin: \"linkedin\",\n} as const\n\ntype Source = \"lucide\" | \"simple\"\n\nconst icons: Record<Source, Record<string, () => Promise<unknown>>> = {\n  lucide: import.meta.glob(\"/node_modules/lucide-static/icons/*.svg\"),\n  simple: import.meta.glob(\"/node_modules/simple-icons/icons/*.svg\"),\n}\n\nconst pathFor = (source: Source, icon: string) =>\n  source === \"lucide\"\n    ? `/node_modules/lucide-static/icons/${icon}.svg`\n    : `/node_modules/simple-icons/icons/${icon}.svg`\n\n// Resolve an icon by explicit name, or derive one from a link href.\n// Names may be prefixed with `lucide:` or `simple:` to pick a set when both\n// sets contain the same name (for example `github` or `figma`).\nconst hasName = name != null && name !== \"\"\n\nconst resolve = () => {\n  let key = hasName ? String(name) : undefined\n  let order: Source[] = [\"lucide\", \"simple\"]\n\n  if (!key && href) {\n    const hrefKey = Object.keys(hrefMap).find((candidate) =>\n      href.toString().includes(candidate)\n    )\n    if (hrefKey) {\n      key = hrefMap[hrefKey as keyof typeof hrefMap]\n      order = [\"simple\", \"lucide\"]\n    }\n  }\n\n  const linkIcon = {\n    source: \"lucide\" as const,\n    path: pathFor(\"lucide\", \"link\"),\n  }\n\n  if (!key) return href ? linkIcon : undefined\n  if (key === \"x.com\") key = \"simple:x\"\n\n  const [prefix, icon] = key.includes(\":\") ? key.split(\":\") : [undefined, key]\n  if (prefix === \"lucide\" || prefix === \"simple\") order = [prefix]\n\n  for (const source of order) {\n    const path = pathFor(source, icon)\n    if (path in icons[source]) return { source, path }\n  }\n\n  // A link always gets an icon, even when its brand has no logo in either set\n  // (Simple Icons removed LinkedIn, for example).\n  if (!hasName && href) return linkIcon\n\n  return undefined\n}\n\nconst resolved = resolve()\nconst module = resolved\n  ? ((await icons[resolved.source][resolved.path]()) as { default?: any })\n  : undefined\nconst Comp = module?.default\n\nconst isLabelled =\n  \"aria-label\" in props || \"aria-labelledby\" in props || \"role\" in props\n---\n\n{Comp && resolved && (\n  <Comp\n    height={24}\n    width={24}\n    fill={resolved.source === \"simple\" ? \"currentColor\" : \"none\"}\n    class=\"size-[1em] text-base\"\n    aria-hidden={isLabelled ? undefined : \"true\"}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = Omit<HTMLAttributes<\"svg\">, \"name\" | \"href\"> & {\n  href?: HTMLAttributes<\"a\">[\"href\"]\n  name?: string | number\n}\n\nconst { name, href, \"data-slot\": dataSlot = \"icon\", ...props } = Astro.props\n\nconst hrefMap = {\n  \"x.com\": \"x\",\n  twitter: \"twitter\",\n  facebook: \"facebook\",\n  instagram: \"instagram\",\n  pinterest: \"pinterest\",\n  youtube: \"youtube\",\n  tiktok: \"tiktok\",\n  snapchat: \"snapchat\",\n  reddit: \"reddit\",\n  tumblr: \"tumblr\",\n  \"wa.me\": \"whatsapp\",\n  telegram: \"telegram\",\n  discord: \"discord\",\n  vimeo: \"vimeo\",\n  flickr: \"flickr\",\n  yelp: \"yelp\",\n  spotify: \"spotify\",\n  behance: \"behance\",\n  dribbble: \"dribbble\",\n  soundcloud: \"soundcloud\",\n  github: \"github\",\n  twitch: \"twitch\",\n  \"tel:\": \"phone\",\n  \"mailto:\": \"mail\",\n  \"maps.app.goo.gl\": \"map-pin\",\n  linkedin: \"linkedin\",\n} as const\n\ntype Source = \"lucide\" | \"simple\"\n\nconst icons: Record<Source, Record<string, () => Promise<unknown>>> = {\n  lucide: import.meta.glob(\"/node_modules/lucide-static/icons/*.svg\"),\n  simple: import.meta.glob(\"/node_modules/simple-icons/icons/*.svg\"),\n}\n\nconst pathFor = (source: Source, icon: string) =>\n  source === \"lucide\"\n    ? `/node_modules/lucide-static/icons/${icon}.svg`\n    : `/node_modules/simple-icons/icons/${icon}.svg`\n\n// Resolve an icon by explicit name, or derive one from a link href.\n// Names may be prefixed with `lucide:` or `simple:` to pick a set when both\n// sets contain the same name (for example `github` or `figma`).\nconst hasName = name != null && name !== \"\"\n\nconst resolve = () => {\n  let key = hasName ? String(name) : undefined\n  let order: Source[] = [\"lucide\", \"simple\"]\n\n  if (!key && href) {\n    const hrefKey = Object.keys(hrefMap).find((candidate) =>\n      href.toString().includes(candidate)\n    )\n    if (hrefKey) {\n      key = hrefMap[hrefKey as keyof typeof hrefMap]\n      order = [\"simple\", \"lucide\"]\n    }\n  }\n\n  const linkIcon = {\n    source: \"lucide\" as const,\n    path: pathFor(\"lucide\", \"link\"),\n  }\n\n  if (!key) return href ? linkIcon : undefined\n  if (key === \"x.com\") key = \"simple:x\"\n\n  const [prefix, icon] = key.includes(\":\") ? key.split(\":\") : [undefined, key]\n  if (prefix === \"lucide\" || prefix === \"simple\") order = [prefix]\n\n  for (const source of order) {\n    const path = pathFor(source, icon)\n    if (path in icons[source]) return { source, path }\n  }\n\n  // A link always gets an icon, even when its brand has no logo in either set\n  // (Simple Icons removed LinkedIn, for example).\n  if (!hasName && href) return linkIcon\n\n  return undefined\n}\n\nconst resolved = resolve()\nconst module = resolved\n  ? ((await icons[resolved.source][resolved.path]()) as { default?: any })\n  : undefined\nconst Comp = module?.default\n\nconst isLabelled =\n  \"aria-label\" in props || \"aria-labelledby\" in props || \"role\" in props\n---\n\n{Comp && resolved && (\n  <Comp\n    height={24}\n    width={24}\n    fill={resolved.source === \"simple\" ? \"currentColor\" : \"none\"}\n    class=\"size-[1em] text-base\"\n    aria-hidden={isLabelled ? undefined : \"true\"}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/item.json b/public/r/item.json
index 0f2fe9532..64d67cdfb 100644
--- a/public/r/item.json
+++ b/public/r/item.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/item/item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-md border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = href ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-md border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/layout.json b/public/r/layout.json
index cf7219c6e..dc22c1d3f 100644
--- a/public/r/layout.json
+++ b/public/r/layout.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/layout/layout.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport \"@/styles/global.css\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"html\">\n\nconst { class: className, lang, ...props } = Astro.props\n---\n\n<html\n  class={cn(\n    \"bg-background text-foreground has-data-[variant=inset]:bg-sidebar overscroll-none scroll-smooth\",\n    className\n  )}\n  data-slot=\"layout\"\n  lang={Astro.currentLocale || \"en\"}\n  {...props}\n>\n  <slot />\n</html>\n\n<style is:global>\n  :root {\n    color-scheme: light;\n  }\n\n  .dark {\n    color-scheme: dark;\n  }\n\n  @view-transition {\n    navigation: auto;\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport \"@/styles/global.css\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"html\">\n\nconst { class: className, lang, ...props } = Astro.props\n---\n\n<html\n  class={cn(\n    \"bg-background text-foreground has-data-[variant=inset]:bg-sidebar overscroll-none scroll-smooth\",\n    className\n  )}\n  data-slot=\"layout\"\n  lang={lang || Astro.currentLocale || \"en\"}\n  {...props}\n>\n  <slot />\n</html>\n\n<style is:global>\n  :root {\n    color-scheme: light;\n  }\n\n  .dark {\n    color-scheme: dark;\n  }\n\n  @view-transition {\n    navigation: auto;\n  }\n</style>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/logo.json b/public/r/logo.json
index 5118dce00..fbaefd162 100644
--- a/public/r/logo.json
+++ b/public/r/logo.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/logo/logo.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst { class: className, href, ...props } = Astro.props\n\nconst Comp = href ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-base font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-base font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/logo/logo-text.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<span class={cn(\"text-lg\", className)} {...props}>\n  <slot />\n</span>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"logo-text\",\n  ...props\n} = Astro.props\n---\n\n<span class={cn(\"text-lg\", className)} data-slot={dataSlot} {...props}>\n  <slot />\n</span>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/marquee.json b/public/r/marquee.json
index 25fc597f2..c932b246a 100644
--- a/public/r/marquee.json
+++ b/public/r/marquee.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  data-slot={dataSlot}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/navigation-menu.json b/public/r/navigation-menu.json
index 297f589e6..5e76cdea7 100644
--- a/public/r/navigation-menu.json
+++ b/public/r/navigation-menu.json
@@ -25,7 +25,7 @@
     },
     {
       "path": "src/components/ui/navigation-menu/navigation-menu-link.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  active?: boolean\n}\n\nconst { class: className, active, ...props } = Astro.props\n---\n\n<a\n  data-slot=\"navigation-menu-link\"\n  data-active={active ? \"true\" : undefined}\n  class={cn(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-md p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 in-data-[slot=navigation-menu-content]:rounded-sm\", className)}\n  {...props}\n>\n  <slot />\n</a>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  active?: boolean\n}\n\nconst {\n  class: className,\n  active,\n  \"aria-current\": ariaCurrent = active ? \"page\" : undefined,\n  ...props\n} = Astro.props\n---\n\n<a\n  data-slot=\"navigation-menu-link\"\n  data-active={active ? \"true\" : undefined}\n  aria-current={ariaCurrent}\n  class={cn(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-md p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 in-data-[slot=navigation-menu-content]:rounded-sm\", className)}\n  {...props}\n>\n  <slot />\n</a>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/price.json b/public/r/price.json
index da3b26c9f..d815f6576 100644
--- a/public/r/price.json
+++ b/public/r/price.json
@@ -6,17 +6,17 @@
   "files": [
     {
       "path": "src/components/ui/price/price.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div class={cn(\"flex flex-wrap items-center gap-x-2\", className)} {...props}>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"price\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\"flex flex-wrap items-center gap-x-2\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/price/price-unit.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<span\n  class={cn(\"text-muted-foreground text-sm leading-tight\", className)}\n  {...props}\n>\n  / <slot />\n</span>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"price-unit\",\n  ...props\n} = Astro.props\n---\n\n<span\n  class={cn(\"text-muted-foreground text-sm leading-tight\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  / <slot />\n</span>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/price/price-value.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/rating.json b/public/r/rating.json
index 7490c6dbb..57afb7920 100644
--- a/public/r/rating.json
+++ b/public/r/rating.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/rating/rating.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport Star from \"@lucide/astro/icons/star\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  value?: number\n}\n\nconst {\n  value = 5,\n  class: className,\n  \"aria-label\": ariaLabel = `Rated ${value} out of 5`,\n  ...props\n} = Astro.props\n---\n\n<div\n  role=\"img\"\n  aria-label={ariaLabel}\n  class={cn(\"flex items-center gap-1 text-base\", className)}\n  {...props}\n>\n  {Array.from({ length: 5 }).map((_, index) => {\n    const fillPercentage =\n      index < Math.floor(value)\n        ? 100\n        : index === Math.floor(value)\n          ? (value % 1) * 100\n          : 0\n\n    return (\n      <span\n        aria-hidden=\"true\"\n        class=\"text-muted-foreground/25 relative inline-flex size-[1em]\"\n      >\n        <Star class=\"size-[1em] fill-current\" />\n        {fillPercentage > 0 && (\n          <span\n            class=\"text-primary absolute inset-0 overflow-hidden\"\n            style={{ width: `${fillPercentage}%` }}\n          >\n            <Star class=\"size-[1em] fill-current\" />\n          </span>\n        )}\n      </span>\n    )\n  })}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport Star from \"@lucide/astro/icons/star\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  value?: number\n}\n\nconst {\n  value = 5,\n  class: className,\n  \"aria-label\": ariaLabel = `Rated ${value} out of 5`,\n  \"data-slot\": dataSlot = \"rating\",\n  ...props\n} = Astro.props\n---\n\n<div\n  role=\"img\"\n  aria-label={ariaLabel}\n  class={cn(\"flex items-center gap-1 text-base\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  {Array.from({ length: 5 }).map((_, index) => {\n    const fillPercentage =\n      index < Math.floor(value)\n        ? 100\n        : index === Math.floor(value)\n          ? (value % 1) * 100\n          : 0\n\n    return (\n      <span\n        aria-hidden=\"true\"\n        class=\"text-muted-foreground/25 relative inline-flex size-[1em]\"\n      >\n        <Star class=\"size-[1em] fill-current\" />\n        {fillPercentage > 0 && (\n          <span\n            class=\"text-primary absolute inset-0 overflow-hidden\"\n            style={{ width: `${fillPercentage}%` }}\n          >\n            <Star class=\"size-[1em] fill-current\" />\n          </span>\n        )}\n      </span>\n    )\n  })}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/section.json b/public/r/section.json
index 1f4c5a200..bfdcd376b 100644
--- a/public/r/section.json
+++ b/public/r/section.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/section/section.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-16 py-[var(--section-padding,--spacing(16))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-16 rounded-xl border bg-background shadow-md mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-16 py-[var(--section-padding,--spacing(16))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-16 rounded-xl border bg-background shadow-md mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/banner.json b/public/r/styles/base-luma/banner.json
index bc3a987f3..9736e5864 100644
--- a/public/r/styles/base-luma/banner.json
+++ b/public/r/styles/base-luma/banner.json
@@ -9,12 +9,12 @@
   "files": [
     {
       "path": "src/components/ui/banner/banner.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"aside\"> &\n  VariantProps<typeof variants> & {\n    storageKey?: string\n  }\n\nconst variants = cva(\"py-2.5 relative flex items-center\", {\n  variants: {\n    variant: {\n      default: \"bg-foreground text-background w-full\",\n      floating:\n        \"my-2 rounded-4xl bg-background shadow-md ring-1 ring-foreground/5 dark:ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, storageKey, ...props } = Astro.props\n---\n\n<aside\n  class={cn(variants({ variant }), className)}\n  data-slot=\"banner\"\n  data-banner-storage-key={storageKey}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</aside>\n\n<script>\n  const getStorageToken = (key: string) => `banner:${key}`\n\n  const syncBanners = () => {\n    document.querySelectorAll(\"[data-slot='banner']\").forEach((banner) => {\n      if (!(banner instanceof HTMLElement)) return\n      const storageKey = banner.dataset.bannerStorageKey\n      if (\n        storageKey &&\n        sessionStorage.getItem(getStorageToken(storageKey)) === \"hidden\"\n      ) {\n        banner.hidden = true\n      }\n    })\n  }\n\n  syncBanners()\n  document.addEventListener(\"astro:page-load\", syncBanners)\n\n  document.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return\n    const closeButton = event.target.closest(\"[data-slot='banner-close']\")\n    const banner = closeButton?.closest(\"[data-slot='banner']\")\n    if (!(banner instanceof HTMLElement)) return\n    banner.hidden = true\n    const storageKey = banner.dataset.bannerStorageKey\n    if (storageKey)\n      sessionStorage.setItem(getStorageToken(storageKey), \"hidden\")\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"aside\"> &\n  VariantProps<typeof variants> & {\n    storageKey?: string\n  }\n\nconst variants = cva(\"py-2.5 relative flex items-center\", {\n  variants: {\n    variant: {\n      default: \"bg-foreground text-background w-full\",\n      floating:\n        \"my-2 rounded-4xl bg-background shadow-md ring-1 ring-foreground/5 dark:ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  storageKey,\n  ...props\n} = Astro.props\n---\n\n<aside\n  class={cn(variants({ variant }), className)}\n  data-slot=\"banner\"\n  data-banner-storage-key={storageKey}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</aside>\n\n<script>\n  const getStorageToken = (key: string) => `banner:${key}`\n\n  const syncBanners = () => {\n    document.querySelectorAll(\"[data-slot='banner']\").forEach((banner) => {\n      if (!(banner instanceof HTMLElement)) return\n      const storageKey = banner.dataset.bannerStorageKey\n      if (\n        storageKey &&\n        sessionStorage.getItem(getStorageToken(storageKey)) === \"hidden\"\n      ) {\n        banner.hidden = true\n      }\n    })\n  }\n\n  syncBanners()\n  document.addEventListener(\"astro:page-load\", syncBanners)\n\n  document.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return\n    const closeButton = event.target.closest(\"[data-slot='banner-close']\")\n    const banner = closeButton?.closest(\"[data-slot='banner']\")\n    if (!(banner instanceof HTMLElement)) return\n    banner.hidden = true\n    const storageKey = banner.dataset.bannerStorageKey\n    if (storageKey)\n      sessionStorage.setItem(getStorageToken(storageKey), \"hidden\")\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/banner/banner-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst { class: className, showClose = true, ...props } = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-full text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst {\n  class: className,\n  showClose = true,\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-full text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/carousel.json b/public/r/styles/base-luma/carousel.json
index 3e3052ad3..7971e22fc 100644
--- a/public/r/styles/base-luma/carousel.json
+++ b/public/r/styles/base-luma/carousel.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = root.querySelector<HTMLElement>(\n        '[data-slot=\"carousel-content\"]'\n      )\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = root.querySelectorAll<HTMLButtonElement>(\n        '[data-slot=\"carousel-previous\"]'\n      )\n      const next = root.querySelectorAll<HTMLButtonElement>(\n        '[data-slot=\"carousel-next\"]'\n      )\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -28,12 +28,12 @@
     },
     {
       "path": "src/components/ui/carousel/carousel-next.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-previous.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/dropdown-menu.json b/public/r/styles/base-luma/dropdown-menu.json
index 266d1bd30..f6029339f 100644
--- a/public/r/styles/base-luma/dropdown-menu.json
+++ b/public/r/styles/base-luma/dropdown-menu.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { Align, Side } from \"@data-slot/dropdown-menu\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  defaultValue?: string | null\n  defaultValues?: string[]\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  closeOnSelect?: boolean\n  highlightItemOnHover?: boolean\n  side?: Side\n  align?: Align\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  defaultValue,\n  defaultValues,\n  closeOnClickOutside,\n  closeOnEscape,\n  closeOnSelect,\n  highlightItemOnHover,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionPadding,\n  lockScroll,\n  ...props\n} = Astro.props\n\nconst defaultValuesAttr =\n  defaultValues === undefined ? undefined : JSON.stringify(defaultValues)\n---\n\n<div\n  data-slot=\"dropdown-menu\"\n  data-default-open={defaultOpen}\n  data-default-value={defaultValue}\n  data-default-values={defaultValuesAttr}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-close-on-select={closeOnSelect}\n  data-highlight-item-on-hover={highlightItemOnHover}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-avoid-collisions={avoidCollisions}\n  data-collision-padding={collisionPadding}\n  data-lock-scroll={lockScroll}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dropdown-menu\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { Align, Side } from \"@data-slot/dropdown-menu\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  defaultValue?: string | null\n  defaultValues?: string[]\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  closeOnSelect?: boolean\n  highlightItemOnHover?: boolean\n  side?: Side\n  align?: Align\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  defaultValue,\n  defaultValues,\n  closeOnClickOutside,\n  closeOnEscape,\n  closeOnSelect,\n  highlightItemOnHover,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionPadding,\n  lockScroll,\n  ...props\n} = Astro.props\n\nconst defaultValuesAttr =\n  defaultValues === undefined ? undefined : JSON.stringify(defaultValues)\n---\n\n<div\n  data-slot=\"dropdown-menu\"\n  data-default-open={defaultOpen}\n  data-default-value={defaultValue === null ? \"\" : defaultValue}\n  data-default-values={defaultValuesAttr}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-close-on-select={closeOnSelect}\n  data-highlight-item-on-hover={highlightItemOnHover}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-avoid-collisions={avoidCollisions}\n  data-collision-padding={collisionPadding}\n  data-lock-scroll={lockScroll}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dropdown-menu\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -25,17 +25,17 @@
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> &\n  HTMLAttributes<\"a\"> & {\n    as?: \"button\" | \"a\"\n    disabled?: boolean\n    variant?: \"default\" | \"destructive\"\n    inset?: boolean\n  }\n\nconst {\n  as: Tag = \"href\" in Astro.props ? \"a\" : \"button\",\n  class: className,\n  type = \"button\",\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<Tag\n  data-slot=\"dropdown-menu-item\"\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={Tag === \"button\" && disabled ? true : undefined}\n  type={Tag === \"button\" ? type : undefined}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2.5 rounded-2xl px-3 py-2 text-sm font-medium data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n\n<script>\n  // Data Slot owns selection; links also need native keyboard activation.\n  document.addEventListener(\n    \"keydown\",\n    (event) => {\n      if (\n        event.defaultPrevented ||\n        event.isComposing ||\n        ![\"Enter\", \" \"].includes(event.key)\n      )\n        return\n      const item =\n        event.target instanceof Element\n          ? event.target.closest('[data-slot=\"dropdown-menu-item\"][href]')\n          : null\n      if (\n        !(item instanceof HTMLAnchorElement) ||\n        item.getAttribute(\"aria-disabled\") === \"true\"\n      )\n        return\n      event.preventDefault()\n      event.stopPropagation()\n      item.click()\n    },\n    true\n  )\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> &\n  HTMLAttributes<\"a\"> & {\n    as?: \"button\" | \"a\"\n    disabled?: boolean\n    variant?: \"default\" | \"destructive\"\n    inset?: boolean\n  }\n\nconst {\n  as: Tag = \"href\" in Astro.props ? \"a\" : \"button\",\n  class: className,\n  type = \"button\",\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<Tag\n  data-slot=\"dropdown-menu-item\"\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={Tag === \"button\" && disabled ? true : undefined}\n  type={Tag === \"button\" ? type : undefined}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2.5 rounded-2xl px-3 py-2 text-sm font-medium data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n\n<script>\n  // Data Slot owns selection; links also need native keyboard activation.\n  document.addEventListener(\n    \"keydown\",\n    (event) => {\n      if (\n        event.defaultPrevented ||\n        event.isComposing ||\n        ![\"Enter\", \" \"].includes(event.key)\n      )\n        return\n      const item =\n        event.target instanceof Element\n          ? event.target.closest('[data-slot=\"dropdown-menu-item\"][href]')\n          : null\n      if (\n        !(item instanceof HTMLAnchorElement) ||\n        item.getAttribute(\"aria-disabled\") === \"true\"\n      )\n        return\n      event.preventDefault()\n      event.stopPropagation()\n      item.click()\n    },\n    true\n  )\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-radio-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-radio-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2.5 rounded-2xl py-2 pr-8 pl-3 text-sm font-medium data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-radio-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-radio-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-radio-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-radio-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2.5 rounded-2xl py-2 pr-8 pl-3 text-sm font-medium data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-radio-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-radio-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-radio-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-checkbox-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2.5 rounded-2xl py-2 pr-8 pl-3 text-sm font-medium data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-checkbox-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-checkbox-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-checkbox-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-checkbox-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2.5 rounded-2xl py-2 pr-8 pl-3 text-sm font-medium data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-checkbox-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-checkbox-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-checkbox-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
@@ -45,7 +45,7 @@
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-label.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  inset?: boolean\n}\n\nconst { class: className, inset, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"dropdown-menu-label\"\n  data-inset={inset}\n  class={cn(\"text-muted-foreground px-3 py-2.5 text-xs data-inset:pl-9.5\", className)}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  inset?: boolean\n}\n\nconst { class: className, inset, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"dropdown-menu-label\"\n  data-inset={inset || undefined}\n  class={cn(\"text-muted-foreground px-3 py-2.5 text-xs data-inset:pl-9.5\", className)}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/header.json b/public/r/styles/base-luma/header.json
index b5e0a97de..50f670633 100644
--- a/public/r/styles/base-luma/header.json
+++ b/public/r/styles/base-luma/header.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/header/header.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2.5 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-4xl bg-background shadow-md ring-1 ring-foreground/5 dark:ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2.5 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-4xl bg-background shadow-md ring-1 ring-foreground/5 dark:ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/icon.json b/public/r/styles/base-luma/icon.json
index 08bcfdfad..2dd8ce89c 100644
--- a/public/r/styles/base-luma/icon.json
+++ b/public/r/styles/base-luma/icon.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/ui/icon/icon.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = Omit<HTMLAttributes<\"svg\">, \"name\" | \"href\"> & {\n  href?: HTMLAttributes<\"a\">[\"href\"]\n  name?: string | number\n}\n\nconst { name, href, ...props } = Astro.props\n\nconst hrefMap = {\n  \"x.com\": \"x\",\n  twitter: \"twitter\",\n  facebook: \"facebook\",\n  instagram: \"instagram\",\n  pinterest: \"pinterest\",\n  youtube: \"youtube\",\n  tiktok: \"tiktok\",\n  snapchat: \"snapchat\",\n  reddit: \"reddit\",\n  tumblr: \"tumblr\",\n  \"wa.me\": \"whatsapp\",\n  telegram: \"telegram\",\n  discord: \"discord\",\n  vimeo: \"vimeo\",\n  flickr: \"flickr\",\n  yelp: \"yelp\",\n  spotify: \"spotify\",\n  behance: \"behance\",\n  dribbble: \"dribbble\",\n  soundcloud: \"soundcloud\",\n  github: \"github\",\n  twitch: \"twitch\",\n  \"tel:\": \"phone\",\n  \"mailto:\": \"mail\",\n  \"maps.app.goo.gl\": \"map-pin\",\n  linkedin: \"linkedin\",\n} as const\n\ntype Source = \"lucide\" | \"simple\"\n\nconst icons: Record<Source, Record<string, () => Promise<unknown>>> = {\n  lucide: import.meta.glob(\"/node_modules/lucide-static/icons/*.svg\"),\n  simple: import.meta.glob(\"/node_modules/simple-icons/icons/*.svg\"),\n}\n\nconst pathFor = (source: Source, icon: string) =>\n  source === \"lucide\"\n    ? `/node_modules/lucide-static/icons/${icon}.svg`\n    : `/node_modules/simple-icons/icons/${icon}.svg`\n\n// Resolve an icon by explicit name, or derive one from a link href.\n// Names may be prefixed with `lucide:` or `simple:` to pick a set when both\n// sets contain the same name (for example `github` or `figma`).\nconst hasName = name != null && name !== \"\"\n\nconst resolve = () => {\n  let key = hasName ? String(name) : undefined\n  let order: Source[] = [\"lucide\", \"simple\"]\n\n  if (!key && href) {\n    const hrefKey = Object.keys(hrefMap).find((candidate) =>\n      href.toString().includes(candidate)\n    )\n    if (hrefKey) {\n      key = hrefMap[hrefKey as keyof typeof hrefMap]\n      order = [\"simple\", \"lucide\"]\n    }\n  }\n\n  const linkIcon = {\n    source: \"lucide\" as const,\n    path: pathFor(\"lucide\", \"link\"),\n  }\n\n  if (!key) return href ? linkIcon : undefined\n  if (key === \"x.com\") key = \"simple:x\"\n\n  const [prefix, icon] = key.includes(\":\") ? key.split(\":\") : [undefined, key]\n  if (prefix === \"lucide\" || prefix === \"simple\") order = [prefix]\n\n  for (const source of order) {\n    const path = pathFor(source, icon)\n    if (path in icons[source]) return { source, path }\n  }\n\n  // A link always gets an icon, even when its brand has no logo in either set\n  // (Simple Icons removed LinkedIn, for example).\n  if (!hasName && href) return linkIcon\n\n  return undefined\n}\n\nconst resolved = resolve()\nconst module = resolved\n  ? ((await icons[resolved.source][resolved.path]()) as { default?: any })\n  : undefined\nconst Comp = module?.default\n\nconst isLabelled =\n  \"aria-label\" in props || \"aria-labelledby\" in props || \"role\" in props\n---\n\n{Comp && resolved && (\n  <Comp\n    height={24}\n    width={24}\n    fill={resolved.source === \"simple\" ? \"currentColor\" : \"none\"}\n    class=\"size-[1em] text-base\"\n    aria-hidden={isLabelled ? undefined : \"true\"}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = Omit<HTMLAttributes<\"svg\">, \"name\" | \"href\"> & {\n  href?: HTMLAttributes<\"a\">[\"href\"]\n  name?: string | number\n}\n\nconst { name, href, \"data-slot\": dataSlot = \"icon\", ...props } = Astro.props\n\nconst hrefMap = {\n  \"x.com\": \"x\",\n  twitter: \"twitter\",\n  facebook: \"facebook\",\n  instagram: \"instagram\",\n  pinterest: \"pinterest\",\n  youtube: \"youtube\",\n  tiktok: \"tiktok\",\n  snapchat: \"snapchat\",\n  reddit: \"reddit\",\n  tumblr: \"tumblr\",\n  \"wa.me\": \"whatsapp\",\n  telegram: \"telegram\",\n  discord: \"discord\",\n  vimeo: \"vimeo\",\n  flickr: \"flickr\",\n  yelp: \"yelp\",\n  spotify: \"spotify\",\n  behance: \"behance\",\n  dribbble: \"dribbble\",\n  soundcloud: \"soundcloud\",\n  github: \"github\",\n  twitch: \"twitch\",\n  \"tel:\": \"phone\",\n  \"mailto:\": \"mail\",\n  \"maps.app.goo.gl\": \"map-pin\",\n  linkedin: \"linkedin\",\n} as const\n\ntype Source = \"lucide\" | \"simple\"\n\nconst icons: Record<Source, Record<string, () => Promise<unknown>>> = {\n  lucide: import.meta.glob(\"/node_modules/lucide-static/icons/*.svg\"),\n  simple: import.meta.glob(\"/node_modules/simple-icons/icons/*.svg\"),\n}\n\nconst pathFor = (source: Source, icon: string) =>\n  source === \"lucide\"\n    ? `/node_modules/lucide-static/icons/${icon}.svg`\n    : `/node_modules/simple-icons/icons/${icon}.svg`\n\n// Resolve an icon by explicit name, or derive one from a link href.\n// Names may be prefixed with `lucide:` or `simple:` to pick a set when both\n// sets contain the same name (for example `github` or `figma`).\nconst hasName = name != null && name !== \"\"\n\nconst resolve = () => {\n  let key = hasName ? String(name) : undefined\n  let order: Source[] = [\"lucide\", \"simple\"]\n\n  if (!key && href) {\n    const hrefKey = Object.keys(hrefMap).find((candidate) =>\n      href.toString().includes(candidate)\n    )\n    if (hrefKey) {\n      key = hrefMap[hrefKey as keyof typeof hrefMap]\n      order = [\"simple\", \"lucide\"]\n    }\n  }\n\n  const linkIcon = {\n    source: \"lucide\" as const,\n    path: pathFor(\"lucide\", \"link\"),\n  }\n\n  if (!key) return href ? linkIcon : undefined\n  if (key === \"x.com\") key = \"simple:x\"\n\n  const [prefix, icon] = key.includes(\":\") ? key.split(\":\") : [undefined, key]\n  if (prefix === \"lucide\" || prefix === \"simple\") order = [prefix]\n\n  for (const source of order) {\n    const path = pathFor(source, icon)\n    if (path in icons[source]) return { source, path }\n  }\n\n  // A link always gets an icon, even when its brand has no logo in either set\n  // (Simple Icons removed LinkedIn, for example).\n  if (!hasName && href) return linkIcon\n\n  return undefined\n}\n\nconst resolved = resolve()\nconst module = resolved\n  ? ((await icons[resolved.source][resolved.path]()) as { default?: any })\n  : undefined\nconst Comp = module?.default\n\nconst isLabelled =\n  \"aria-label\" in props || \"aria-labelledby\" in props || \"role\" in props\n---\n\n{Comp && resolved && (\n  <Comp\n    height={24}\n    width={24}\n    fill={resolved.source === \"simple\" ? \"currentColor\" : \"none\"}\n    class=\"size-[1em] text-base\"\n    aria-hidden={isLabelled ? undefined : \"true\"}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/item.json b/public/r/styles/base-luma/item.json
index 2687e2e9e..308a28868 100644
--- a/public/r/styles/base-luma/item.json
+++ b/public/r/styles/base-luma/item.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/item/item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-2xl border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-3.5 px-3.5 py-3\",\n        xs: \"gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = href ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-2xl border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-3.5 px-3.5 py-3\",\n        xs: \"gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/layout.json b/public/r/styles/base-luma/layout.json
index cf7219c6e..dc22c1d3f 100644
--- a/public/r/styles/base-luma/layout.json
+++ b/public/r/styles/base-luma/layout.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/layout/layout.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport \"@/styles/global.css\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"html\">\n\nconst { class: className, lang, ...props } = Astro.props\n---\n\n<html\n  class={cn(\n    \"bg-background text-foreground has-data-[variant=inset]:bg-sidebar overscroll-none scroll-smooth\",\n    className\n  )}\n  data-slot=\"layout\"\n  lang={Astro.currentLocale || \"en\"}\n  {...props}\n>\n  <slot />\n</html>\n\n<style is:global>\n  :root {\n    color-scheme: light;\n  }\n\n  .dark {\n    color-scheme: dark;\n  }\n\n  @view-transition {\n    navigation: auto;\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport \"@/styles/global.css\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"html\">\n\nconst { class: className, lang, ...props } = Astro.props\n---\n\n<html\n  class={cn(\n    \"bg-background text-foreground has-data-[variant=inset]:bg-sidebar overscroll-none scroll-smooth\",\n    className\n  )}\n  data-slot=\"layout\"\n  lang={lang || Astro.currentLocale || \"en\"}\n  {...props}\n>\n  <slot />\n</html>\n\n<style is:global>\n  :root {\n    color-scheme: light;\n  }\n\n  .dark {\n    color-scheme: dark;\n  }\n\n  @view-transition {\n    navigation: auto;\n  }\n</style>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/logo.json b/public/r/styles/base-luma/logo.json
index 5118dce00..fbaefd162 100644
--- a/public/r/styles/base-luma/logo.json
+++ b/public/r/styles/base-luma/logo.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/logo/logo.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst { class: className, href, ...props } = Astro.props\n\nconst Comp = href ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-base font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-base font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/logo/logo-text.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<span class={cn(\"text-lg\", className)} {...props}>\n  <slot />\n</span>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"logo-text\",\n  ...props\n} = Astro.props\n---\n\n<span class={cn(\"text-lg\", className)} data-slot={dataSlot} {...props}>\n  <slot />\n</span>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/marquee.json b/public/r/styles/base-luma/marquee.json
index 25fc597f2..c932b246a 100644
--- a/public/r/styles/base-luma/marquee.json
+++ b/public/r/styles/base-luma/marquee.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  data-slot={dataSlot}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/navigation-menu.json b/public/r/styles/base-luma/navigation-menu.json
index 538304f19..0e74af235 100644
--- a/public/r/styles/base-luma/navigation-menu.json
+++ b/public/r/styles/base-luma/navigation-menu.json
@@ -25,7 +25,7 @@
     },
     {
       "path": "src/components/ui/navigation-menu/navigation-menu-link.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  active?: boolean\n}\n\nconst { class: className, active, ...props } = Astro.props\n---\n\n<a\n  data-slot=\"navigation-menu-link\"\n  data-active={active ? \"true\" : undefined}\n  class={cn(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/30 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-3xl p-3 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 in-data-[slot=navigation-menu-content]:rounded-2xl\", className)}\n  {...props}\n>\n  <slot />\n</a>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  active?: boolean\n}\n\nconst {\n  class: className,\n  active,\n  \"aria-current\": ariaCurrent = active ? \"page\" : undefined,\n  ...props\n} = Astro.props\n---\n\n<a\n  data-slot=\"navigation-menu-link\"\n  data-active={active ? \"true\" : undefined}\n  aria-current={ariaCurrent}\n  class={cn(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/30 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-3xl p-3 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 in-data-[slot=navigation-menu-content]:rounded-2xl\", className)}\n  {...props}\n>\n  <slot />\n</a>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/price.json b/public/r/styles/base-luma/price.json
index d04f45aae..f96ddbe13 100644
--- a/public/r/styles/base-luma/price.json
+++ b/public/r/styles/base-luma/price.json
@@ -6,17 +6,17 @@
   "files": [
     {
       "path": "src/components/ui/price/price.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div class={cn(\"flex flex-wrap items-center gap-x-2\", className)} {...props}>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"price\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\"flex flex-wrap items-center gap-x-2\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/price/price-unit.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<span\n  class={cn(\"text-muted-foreground text-sm leading-tight\", className)}\n  {...props}\n>\n  / <slot />\n</span>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"price-unit\",\n  ...props\n} = Astro.props\n---\n\n<span\n  class={cn(\"text-muted-foreground text-sm leading-tight\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  / <slot />\n</span>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/price/price-value.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-3xl bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-3xl bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/rating.json b/public/r/styles/base-luma/rating.json
index 7490c6dbb..57afb7920 100644
--- a/public/r/styles/base-luma/rating.json
+++ b/public/r/styles/base-luma/rating.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/rating/rating.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport Star from \"@lucide/astro/icons/star\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  value?: number\n}\n\nconst {\n  value = 5,\n  class: className,\n  \"aria-label\": ariaLabel = `Rated ${value} out of 5`,\n  ...props\n} = Astro.props\n---\n\n<div\n  role=\"img\"\n  aria-label={ariaLabel}\n  class={cn(\"flex items-center gap-1 text-base\", className)}\n  {...props}\n>\n  {Array.from({ length: 5 }).map((_, index) => {\n    const fillPercentage =\n      index < Math.floor(value)\n        ? 100\n        : index === Math.floor(value)\n          ? (value % 1) * 100\n          : 0\n\n    return (\n      <span\n        aria-hidden=\"true\"\n        class=\"text-muted-foreground/25 relative inline-flex size-[1em]\"\n      >\n        <Star class=\"size-[1em] fill-current\" />\n        {fillPercentage > 0 && (\n          <span\n            class=\"text-primary absolute inset-0 overflow-hidden\"\n            style={{ width: `${fillPercentage}%` }}\n          >\n            <Star class=\"size-[1em] fill-current\" />\n          </span>\n        )}\n      </span>\n    )\n  })}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport Star from \"@lucide/astro/icons/star\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  value?: number\n}\n\nconst {\n  value = 5,\n  class: className,\n  \"aria-label\": ariaLabel = `Rated ${value} out of 5`,\n  \"data-slot\": dataSlot = \"rating\",\n  ...props\n} = Astro.props\n---\n\n<div\n  role=\"img\"\n  aria-label={ariaLabel}\n  class={cn(\"flex items-center gap-1 text-base\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  {Array.from({ length: 5 }).map((_, index) => {\n    const fillPercentage =\n      index < Math.floor(value)\n        ? 100\n        : index === Math.floor(value)\n          ? (value % 1) * 100\n          : 0\n\n    return (\n      <span\n        aria-hidden=\"true\"\n        class=\"text-muted-foreground/25 relative inline-flex size-[1em]\"\n      >\n        <Star class=\"size-[1em] fill-current\" />\n        {fillPercentage > 0 && (\n          <span\n            class=\"text-primary absolute inset-0 overflow-hidden\"\n            style={{ width: `${fillPercentage}%` }}\n          >\n            <Star class=\"size-[1em] fill-current\" />\n          </span>\n        )}\n      </span>\n    )\n  })}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/section.json b/public/r/styles/base-luma/section.json
index 75cf9b3e3..b35647284 100644
--- a/public/r/styles/base-luma/section.json
+++ b/public/r/styles/base-luma/section.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/section/section.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-16 py-[var(--section-padding,--spacing(20))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-20 rounded-4xl bg-background shadow-md ring-1 ring-foreground/5 dark:ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-16 py-[var(--section-padding,--spacing(20))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-20 rounded-4xl bg-background shadow-md ring-1 ring-foreground/5 dark:ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/theme-toggle.json b/public/r/styles/base-luma/theme-toggle.json
index 60e1a6dcc..9fbadda9c 100644
--- a/public/r/styles/base-luma/theme-toggle.json
+++ b/public/r/styles/base-luma/theme-toggle.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/ui/theme-toggle/theme-toggle.astro",
-      "content": "---\nimport type { ComponentProps } from \"astro/types\"\nimport Moon from \"@lucide/astro/icons/moon\"\nimport Sun from \"@lucide/astro/icons/sun\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = ComponentProps<typeof Button>\n\nconst {\n  class: className,\n  variant = \"ghost\",\n  size = \"icon-sm\",\n  ...props\n} = Astro.props\n---\n\n<Button\n  data-theme-toggle\n  aria-label=\"Toggle theme\"\n  variant={variant}\n  size={size}\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <Sun class=\"dark:hidden\" />\n  <Moon class=\"hidden dark:block\" />\n  <span class=\"sr-only\">Toggle theme</span>\n</Button>\n\n<script is:inline>\n  if (!window.__themeToggleHandlersInitialized) {\n    window.__themeToggleHandlersInitialized = true\n\n    const syncThemeToggles = () => {\n      const isDark = document.documentElement.classList.contains(\"dark\")\n\n      document.querySelectorAll(\"[data-theme-toggle]\").forEach((toggle) => {\n        if (!(toggle instanceof HTMLButtonElement)) return\n\n        toggle.setAttribute(\"aria-pressed\", isDark ? \"true\" : \"false\")\n        toggle.setAttribute(\"data-state\", isDark ? \"on\" : \"off\")\n\n        if (isDark) {\n          toggle.setAttribute(\"data-pressed\", \"\")\n        } else {\n          toggle.removeAttribute(\"data-pressed\")\n        }\n      })\n    }\n\n    syncThemeToggles()\n\n    const observer = new MutationObserver(syncThemeToggles)\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n    })\n\n    document.addEventListener(\"click\", (event) => {\n      const target = event.target\n\n      if (!(target instanceof Element)) return\n\n      const toggle = target.closest(\"[data-theme-toggle]\")\n\n      if (!(toggle instanceof HTMLButtonElement)) return\n      if (toggle.disabled) return\n\n      const isDark = document.documentElement.classList.contains(\"dark\")\n      const nextTheme = isDark ? \"light\" : \"dark\"\n\n      if (typeof window.__setTheme === \"function\") {\n        window.__setTheme(nextTheme)\n        return\n      }\n\n      document.documentElement.classList[\n        nextTheme === \"dark\" ? \"add\" : \"remove\"\n      ](\"dark\")\n    })\n  }\n</script>\n",
+      "content": "---\nimport type { ComponentProps } from \"astro/types\"\nimport Moon from \"@lucide/astro/icons/moon\"\nimport Sun from \"@lucide/astro/icons/sun\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = ComponentProps<typeof Button> & {\n  disabled?: boolean\n}\n\nconst {\n  class: className,\n  variant = \"ghost\",\n  size = \"icon-sm\",\n  ...props\n} = Astro.props\n---\n\n<Button\n  data-theme-toggle\n  aria-label=\"Toggle theme\"\n  variant={variant}\n  size={size}\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <Sun class=\"dark:hidden\" />\n  <Moon class=\"hidden dark:block\" />\n  <span class=\"sr-only\">Toggle theme</span>\n</Button>\n\n<script is:inline>\n  if (!window.__themeToggleHandlersInitialized) {\n    window.__themeToggleHandlersInitialized = true\n\n    const syncThemeToggles = () => {\n      const isDark = document.documentElement.classList.contains(\"dark\")\n\n      document.querySelectorAll(\"[data-theme-toggle]\").forEach((toggle) => {\n        if (!(toggle instanceof HTMLButtonElement)) return\n\n        toggle.setAttribute(\"aria-pressed\", isDark ? \"true\" : \"false\")\n        toggle.setAttribute(\"data-state\", isDark ? \"on\" : \"off\")\n\n        if (isDark) {\n          toggle.setAttribute(\"data-pressed\", \"\")\n        } else {\n          toggle.removeAttribute(\"data-pressed\")\n        }\n      })\n    }\n\n    syncThemeToggles()\n    document.addEventListener(\"astro:page-load\", syncThemeToggles)\n\n    const observer = new MutationObserver(syncThemeToggles)\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n    })\n\n    document.addEventListener(\"click\", (event) => {\n      const target = event.target\n\n      if (!(target instanceof Element)) return\n\n      const toggle = target.closest(\"[data-theme-toggle]\")\n\n      if (!(toggle instanceof HTMLButtonElement)) return\n      if (toggle.disabled) return\n\n      const isDark = document.documentElement.classList.contains(\"dark\")\n      const nextTheme = isDark ? \"light\" : \"dark\"\n\n      if (typeof window.__setTheme === \"function\") {\n        window.__setTheme(nextTheme)\n        return\n      }\n\n      document.documentElement.classList[\n        nextTheme === \"dark\" ? \"add\" : \"remove\"\n      ](\"dark\")\n    })\n  }\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/toast.json b/public/r/styles/base-luma/toast.json
index efa1a9d7a..19f5528dc 100644
--- a/public/r/styles/base-luma/toast.json
+++ b/public/r/styles/base-luma/toast.json
@@ -18,7 +18,7 @@
     },
     {
       "path": "src/components/ui/toast/toast-action.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  hidden = true,\n  type = \"button\",\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"toast-action\"\n  type={type}\n  class={cn(buttonVariants({ variant: \"outline\", size: \"sm\" }), className)}\n  hidden={hidden}\n  {...props}\n>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  hidden = true,\n  type = \"button\",\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"toast-action\"\n  data-variant=\"outline\"\n  data-size=\"sm\"\n  type={type}\n  class={cn(buttonVariants({ variant: \"outline\", size: \"sm\" }), className)}\n  hidden={hidden}\n  {...props}\n>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/toc.json b/public/r/styles/base-luma/toc.json
index b83d9608f..f8ad7c489 100644
--- a/public/r/styles/base-luma/toc.json
+++ b/public/r/styles/base-luma/toc.json
@@ -26,7 +26,7 @@
     },
     {
       "path": "src/components/ui/toc/toc-menu-link.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  depth?: number\n  isActive?: boolean\n  active?: boolean\n}\n\nconst {\n  class: className,\n  depth = 2,\n  isActive,\n  active = false,\n  ...props\n} = Astro.props\n\nconst resolvedActive = isActive ?? active\n---\n\n<a\n  data-slot=\"toc-menu-link\"\n  data-depth={depth}\n  data-active={resolvedActive ? \"true\" : undefined}\n  aria-current={resolvedActive ? \"location\" : undefined}\n  class={cn(\n    \"text-sm leading-6 text-muted-foreground hover:text-foreground data-[active=true]:text-foreground block transition-colors\",\n    depth === 3 && \"pl-4\",\n    depth >= 4 && \"pl-8\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</a>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  depth?: number\n  isActive?: boolean\n  active?: boolean\n}\n\nconst {\n  class: className,\n  depth = 2,\n  isActive,\n  active = false,\n  ...props\n} = Astro.props\n\nconst resolvedActive = isActive ?? active\n---\n\n<a\n  data-slot=\"toc-menu-link\"\n  data-depth={depth}\n  data-active={resolvedActive ? \"true\" : undefined}\n  aria-current={resolvedActive ? \"location\" : undefined}\n  class={cn(\n    \"text-sm leading-6 text-muted-foreground hover:text-foreground data-[active=true]:text-foreground block transition-colors\",\n    depth === 3 && \"ps-4\",\n    depth >= 4 && \"ps-8\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</a>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/typography.json b/public/r/styles/base-luma/typography.json
index 0da7b3e5a..a06d0ec93 100644
--- a/public/r/styles/base-luma/typography.json
+++ b/public/r/styles/base-luma/typography.json
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/typography/typography-blockquote.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"blockquote\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<blockquote\n  data-slot=\"typography-blockquote\"\n  data-size={size}\n  class={cn(\"mt-6 border-l-2 pl-6 italic\", sizeClass, className)}\n  {...props}\n>\n  <slot />\n</blockquote>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"blockquote\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<blockquote\n  data-slot=\"typography-blockquote\"\n  data-size={size}\n  class={cn(\"mt-6 border-s-2 ps-6 italic\", sizeClass, className)}\n  {...props}\n>\n  <slot />\n</blockquote>\n",
       "type": "registry:ui"
     },
     {
@@ -51,7 +51,7 @@
     },
     {
       "path": "src/components/ui/typography/typography-list.astro",
-      "content": "---\nimport type { Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props<Tag extends \"ul\" | \"ol\"> = Polymorphic<{ as: Tag; size?: Size }>\n\nconst {\n  as: Tag = \"ul\",\n  class: className,\n  size = \"default\",\n  ...props\n} = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<Tag\n  data-slot=\"typography-list\"\n  data-size={size}\n  data-ordered={Tag === \"ol\" ? \"\" : undefined}\n  class={cn(\n    \"my-6 ml-6\",\n    Tag === \"ol\" ? \"list-decimal\" : \"list-disc\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n",
+      "content": "---\nimport type { Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props<Tag extends \"ul\" | \"ol\"> = Polymorphic<{ as: Tag; size?: Size }>\n\nconst {\n  as: Tag = \"ul\",\n  class: className,\n  size = \"default\",\n  ...props\n} = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<Tag\n  data-slot=\"typography-list\"\n  data-size={size}\n  data-ordered={Tag === \"ol\" ? \"\" : undefined}\n  class={cn(\n    \"my-6 ms-6\",\n    Tag === \"ol\" ? \"list-decimal\" : \"list-disc\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n",
       "type": "registry:ui"
     },
     {
@@ -76,12 +76,12 @@
     },
     {
       "path": "src/components/ui/typography/typography-table-head.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-left font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/typography/typography-table-cell.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-left align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/video.json b/public/r/styles/base-luma/video.json
index 680ef3b4b..f8bbcfeb4 100644
--- a/public/r/styles/base-luma/video.json
+++ b/public/r/styles/base-luma/video.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/video/video.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"src\"> & {\n  src?: string\n}\n\nconst { class: className, src, ...props } = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title=\"Embedded video\"\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-3xl border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-3xl border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/banner.json b/public/r/styles/base-lyra/banner.json
index bac410182..86ea95fd6 100644
--- a/public/r/styles/base-lyra/banner.json
+++ b/public/r/styles/base-lyra/banner.json
@@ -9,12 +9,12 @@
   "files": [
     {
       "path": "src/components/ui/banner/banner.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"aside\"> &\n  VariantProps<typeof variants> & {\n    storageKey?: string\n  }\n\nconst variants = cva(\"py-2 text-xs relative flex items-center\", {\n  variants: {\n    variant: {\n      default: \"bg-foreground text-background w-full\",\n      floating:\n        \"my-2 rounded-none border bg-background mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, storageKey, ...props } = Astro.props\n---\n\n<aside\n  class={cn(variants({ variant }), className)}\n  data-slot=\"banner\"\n  data-banner-storage-key={storageKey}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</aside>\n\n<script>\n  const getStorageToken = (key: string) => `banner:${key}`\n\n  const syncBanners = () => {\n    document.querySelectorAll(\"[data-slot='banner']\").forEach((banner) => {\n      if (!(banner instanceof HTMLElement)) return\n      const storageKey = banner.dataset.bannerStorageKey\n      if (\n        storageKey &&\n        sessionStorage.getItem(getStorageToken(storageKey)) === \"hidden\"\n      ) {\n        banner.hidden = true\n      }\n    })\n  }\n\n  syncBanners()\n  document.addEventListener(\"astro:page-load\", syncBanners)\n\n  document.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return\n    const closeButton = event.target.closest(\"[data-slot='banner-close']\")\n    const banner = closeButton?.closest(\"[data-slot='banner']\")\n    if (!(banner instanceof HTMLElement)) return\n    banner.hidden = true\n    const storageKey = banner.dataset.bannerStorageKey\n    if (storageKey)\n      sessionStorage.setItem(getStorageToken(storageKey), \"hidden\")\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"aside\"> &\n  VariantProps<typeof variants> & {\n    storageKey?: string\n  }\n\nconst variants = cva(\"py-2 text-xs relative flex items-center\", {\n  variants: {\n    variant: {\n      default: \"bg-foreground text-background w-full\",\n      floating:\n        \"my-2 rounded-none border bg-background mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  storageKey,\n  ...props\n} = Astro.props\n---\n\n<aside\n  class={cn(variants({ variant }), className)}\n  data-slot=\"banner\"\n  data-banner-storage-key={storageKey}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</aside>\n\n<script>\n  const getStorageToken = (key: string) => `banner:${key}`\n\n  const syncBanners = () => {\n    document.querySelectorAll(\"[data-slot='banner']\").forEach((banner) => {\n      if (!(banner instanceof HTMLElement)) return\n      const storageKey = banner.dataset.bannerStorageKey\n      if (\n        storageKey &&\n        sessionStorage.getItem(getStorageToken(storageKey)) === \"hidden\"\n      ) {\n        banner.hidden = true\n      }\n    })\n  }\n\n  syncBanners()\n  document.addEventListener(\"astro:page-load\", syncBanners)\n\n  document.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return\n    const closeButton = event.target.closest(\"[data-slot='banner-close']\")\n    const banner = closeButton?.closest(\"[data-slot='banner']\")\n    if (!(banner instanceof HTMLElement)) return\n    banner.hidden = true\n    const storageKey = banner.dataset.bannerStorageKey\n    if (storageKey)\n      sessionStorage.setItem(getStorageToken(storageKey), \"hidden\")\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/banner/banner-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst { class: className, showClose = true, ...props } = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-none text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst {\n  class: className,\n  showClose = true,\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-none text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/carousel.json b/public/r/styles/base-lyra/carousel.json
index 6dfc865f2..c7e279c5a 100644
--- a/public/r/styles/base-lyra/carousel.json
+++ b/public/r/styles/base-lyra/carousel.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = root.querySelector<HTMLElement>(\n        '[data-slot=\"carousel-content\"]'\n      )\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = root.querySelectorAll<HTMLButtonElement>(\n        '[data-slot=\"carousel-previous\"]'\n      )\n      const next = root.querySelectorAll<HTMLButtonElement>(\n        '[data-slot=\"carousel-next\"]'\n      )\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -28,12 +28,12 @@
     },
     {
       "path": "src/components/ui/carousel/carousel-next.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-previous.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/dropdown-menu.json b/public/r/styles/base-lyra/dropdown-menu.json
index 76658acf8..efc2910dc 100644
--- a/public/r/styles/base-lyra/dropdown-menu.json
+++ b/public/r/styles/base-lyra/dropdown-menu.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { Align, Side } from \"@data-slot/dropdown-menu\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  defaultValue?: string | null\n  defaultValues?: string[]\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  closeOnSelect?: boolean\n  highlightItemOnHover?: boolean\n  side?: Side\n  align?: Align\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  defaultValue,\n  defaultValues,\n  closeOnClickOutside,\n  closeOnEscape,\n  closeOnSelect,\n  highlightItemOnHover,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionPadding,\n  lockScroll,\n  ...props\n} = Astro.props\n\nconst defaultValuesAttr =\n  defaultValues === undefined ? undefined : JSON.stringify(defaultValues)\n---\n\n<div\n  data-slot=\"dropdown-menu\"\n  data-default-open={defaultOpen}\n  data-default-value={defaultValue}\n  data-default-values={defaultValuesAttr}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-close-on-select={closeOnSelect}\n  data-highlight-item-on-hover={highlightItemOnHover}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-avoid-collisions={avoidCollisions}\n  data-collision-padding={collisionPadding}\n  data-lock-scroll={lockScroll}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dropdown-menu\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { Align, Side } from \"@data-slot/dropdown-menu\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  defaultValue?: string | null\n  defaultValues?: string[]\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  closeOnSelect?: boolean\n  highlightItemOnHover?: boolean\n  side?: Side\n  align?: Align\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  defaultValue,\n  defaultValues,\n  closeOnClickOutside,\n  closeOnEscape,\n  closeOnSelect,\n  highlightItemOnHover,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionPadding,\n  lockScroll,\n  ...props\n} = Astro.props\n\nconst defaultValuesAttr =\n  defaultValues === undefined ? undefined : JSON.stringify(defaultValues)\n---\n\n<div\n  data-slot=\"dropdown-menu\"\n  data-default-open={defaultOpen}\n  data-default-value={defaultValue === null ? \"\" : defaultValue}\n  data-default-values={defaultValuesAttr}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-close-on-select={closeOnSelect}\n  data-highlight-item-on-hover={highlightItemOnHover}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-avoid-collisions={avoidCollisions}\n  data-collision-padding={collisionPadding}\n  data-lock-scroll={lockScroll}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dropdown-menu\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -25,17 +25,17 @@
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> &\n  HTMLAttributes<\"a\"> & {\n    as?: \"button\" | \"a\"\n    disabled?: boolean\n    variant?: \"default\" | \"destructive\"\n    inset?: boolean\n  }\n\nconst {\n  as: Tag = \"href\" in Astro.props ? \"a\" : \"button\",\n  class: className,\n  type = \"button\",\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<Tag\n  data-slot=\"dropdown-menu-item\"\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={Tag === \"button\" && disabled ? true : undefined}\n  type={Tag === \"button\" ? type : undefined}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n\n<script>\n  // Data Slot owns selection; links also need native keyboard activation.\n  document.addEventListener(\n    \"keydown\",\n    (event) => {\n      if (\n        event.defaultPrevented ||\n        event.isComposing ||\n        ![\"Enter\", \" \"].includes(event.key)\n      )\n        return\n      const item =\n        event.target instanceof Element\n          ? event.target.closest('[data-slot=\"dropdown-menu-item\"][href]')\n          : null\n      if (\n        !(item instanceof HTMLAnchorElement) ||\n        item.getAttribute(\"aria-disabled\") === \"true\"\n      )\n        return\n      event.preventDefault()\n      event.stopPropagation()\n      item.click()\n    },\n    true\n  )\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> &\n  HTMLAttributes<\"a\"> & {\n    as?: \"button\" | \"a\"\n    disabled?: boolean\n    variant?: \"default\" | \"destructive\"\n    inset?: boolean\n  }\n\nconst {\n  as: Tag = \"href\" in Astro.props ? \"a\" : \"button\",\n  class: className,\n  type = \"button\",\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<Tag\n  data-slot=\"dropdown-menu-item\"\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={Tag === \"button\" && disabled ? true : undefined}\n  type={Tag === \"button\" ? type : undefined}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n\n<script>\n  // Data Slot owns selection; links also need native keyboard activation.\n  document.addEventListener(\n    \"keydown\",\n    (event) => {\n      if (\n        event.defaultPrevented ||\n        event.isComposing ||\n        ![\"Enter\", \" \"].includes(event.key)\n      )\n        return\n      const item =\n        event.target instanceof Element\n          ? event.target.closest('[data-slot=\"dropdown-menu-item\"][href]')\n          : null\n      if (\n        !(item instanceof HTMLAnchorElement) ||\n        item.getAttribute(\"aria-disabled\") === \"true\"\n      )\n        return\n      event.preventDefault()\n      event.stopPropagation()\n      item.click()\n    },\n    true\n  )\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-radio-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-radio-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-radio-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-radio-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-radio-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-radio-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-radio-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-radio-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-radio-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-checkbox-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-checkbox-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-checkbox-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-checkbox-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-checkbox-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-checkbox-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-checkbox-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-checkbox-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
@@ -45,7 +45,7 @@
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-label.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  inset?: boolean\n}\n\nconst { class: className, inset, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"dropdown-menu-label\"\n  data-inset={inset}\n  class={cn(\"text-muted-foreground px-2 py-2 text-xs data-inset:pl-7\", className)}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  inset?: boolean\n}\n\nconst { class: className, inset, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"dropdown-menu-label\"\n  data-inset={inset || undefined}\n  class={cn(\"text-muted-foreground px-2 py-2 text-xs data-inset:pl-7\", className)}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/header.json b/public/r/styles/base-lyra/header.json
index 708ccc4a8..137c1b25f 100644
--- a/public/r/styles/base-lyra/header.json
+++ b/public/r/styles/base-lyra/header.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/header/header.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-none border bg-background mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-none border bg-background mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/icon.json b/public/r/styles/base-lyra/icon.json
index 08bcfdfad..2dd8ce89c 100644
--- a/public/r/styles/base-lyra/icon.json
+++ b/public/r/styles/base-lyra/icon.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/ui/icon/icon.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = Omit<HTMLAttributes<\"svg\">, \"name\" | \"href\"> & {\n  href?: HTMLAttributes<\"a\">[\"href\"]\n  name?: string | number\n}\n\nconst { name, href, ...props } = Astro.props\n\nconst hrefMap = {\n  \"x.com\": \"x\",\n  twitter: \"twitter\",\n  facebook: \"facebook\",\n  instagram: \"instagram\",\n  pinterest: \"pinterest\",\n  youtube: \"youtube\",\n  tiktok: \"tiktok\",\n  snapchat: \"snapchat\",\n  reddit: \"reddit\",\n  tumblr: \"tumblr\",\n  \"wa.me\": \"whatsapp\",\n  telegram: \"telegram\",\n  discord: \"discord\",\n  vimeo: \"vimeo\",\n  flickr: \"flickr\",\n  yelp: \"yelp\",\n  spotify: \"spotify\",\n  behance: \"behance\",\n  dribbble: \"dribbble\",\n  soundcloud: \"soundcloud\",\n  github: \"github\",\n  twitch: \"twitch\",\n  \"tel:\": \"phone\",\n  \"mailto:\": \"mail\",\n  \"maps.app.goo.gl\": \"map-pin\",\n  linkedin: \"linkedin\",\n} as const\n\ntype Source = \"lucide\" | \"simple\"\n\nconst icons: Record<Source, Record<string, () => Promise<unknown>>> = {\n  lucide: import.meta.glob(\"/node_modules/lucide-static/icons/*.svg\"),\n  simple: import.meta.glob(\"/node_modules/simple-icons/icons/*.svg\"),\n}\n\nconst pathFor = (source: Source, icon: string) =>\n  source === \"lucide\"\n    ? `/node_modules/lucide-static/icons/${icon}.svg`\n    : `/node_modules/simple-icons/icons/${icon}.svg`\n\n// Resolve an icon by explicit name, or derive one from a link href.\n// Names may be prefixed with `lucide:` or `simple:` to pick a set when both\n// sets contain the same name (for example `github` or `figma`).\nconst hasName = name != null && name !== \"\"\n\nconst resolve = () => {\n  let key = hasName ? String(name) : undefined\n  let order: Source[] = [\"lucide\", \"simple\"]\n\n  if (!key && href) {\n    const hrefKey = Object.keys(hrefMap).find((candidate) =>\n      href.toString().includes(candidate)\n    )\n    if (hrefKey) {\n      key = hrefMap[hrefKey as keyof typeof hrefMap]\n      order = [\"simple\", \"lucide\"]\n    }\n  }\n\n  const linkIcon = {\n    source: \"lucide\" as const,\n    path: pathFor(\"lucide\", \"link\"),\n  }\n\n  if (!key) return href ? linkIcon : undefined\n  if (key === \"x.com\") key = \"simple:x\"\n\n  const [prefix, icon] = key.includes(\":\") ? key.split(\":\") : [undefined, key]\n  if (prefix === \"lucide\" || prefix === \"simple\") order = [prefix]\n\n  for (const source of order) {\n    const path = pathFor(source, icon)\n    if (path in icons[source]) return { source, path }\n  }\n\n  // A link always gets an icon, even when its brand has no logo in either set\n  // (Simple Icons removed LinkedIn, for example).\n  if (!hasName && href) return linkIcon\n\n  return undefined\n}\n\nconst resolved = resolve()\nconst module = resolved\n  ? ((await icons[resolved.source][resolved.path]()) as { default?: any })\n  : undefined\nconst Comp = module?.default\n\nconst isLabelled =\n  \"aria-label\" in props || \"aria-labelledby\" in props || \"role\" in props\n---\n\n{Comp && resolved && (\n  <Comp\n    height={24}\n    width={24}\n    fill={resolved.source === \"simple\" ? \"currentColor\" : \"none\"}\n    class=\"size-[1em] text-base\"\n    aria-hidden={isLabelled ? undefined : \"true\"}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = Omit<HTMLAttributes<\"svg\">, \"name\" | \"href\"> & {\n  href?: HTMLAttributes<\"a\">[\"href\"]\n  name?: string | number\n}\n\nconst { name, href, \"data-slot\": dataSlot = \"icon\", ...props } = Astro.props\n\nconst hrefMap = {\n  \"x.com\": \"x\",\n  twitter: \"twitter\",\n  facebook: \"facebook\",\n  instagram: \"instagram\",\n  pinterest: \"pinterest\",\n  youtube: \"youtube\",\n  tiktok: \"tiktok\",\n  snapchat: \"snapchat\",\n  reddit: \"reddit\",\n  tumblr: \"tumblr\",\n  \"wa.me\": \"whatsapp\",\n  telegram: \"telegram\",\n  discord: \"discord\",\n  vimeo: \"vimeo\",\n  flickr: \"flickr\",\n  yelp: \"yelp\",\n  spotify: \"spotify\",\n  behance: \"behance\",\n  dribbble: \"dribbble\",\n  soundcloud: \"soundcloud\",\n  github: \"github\",\n  twitch: \"twitch\",\n  \"tel:\": \"phone\",\n  \"mailto:\": \"mail\",\n  \"maps.app.goo.gl\": \"map-pin\",\n  linkedin: \"linkedin\",\n} as const\n\ntype Source = \"lucide\" | \"simple\"\n\nconst icons: Record<Source, Record<string, () => Promise<unknown>>> = {\n  lucide: import.meta.glob(\"/node_modules/lucide-static/icons/*.svg\"),\n  simple: import.meta.glob(\"/node_modules/simple-icons/icons/*.svg\"),\n}\n\nconst pathFor = (source: Source, icon: string) =>\n  source === \"lucide\"\n    ? `/node_modules/lucide-static/icons/${icon}.svg`\n    : `/node_modules/simple-icons/icons/${icon}.svg`\n\n// Resolve an icon by explicit name, or derive one from a link href.\n// Names may be prefixed with `lucide:` or `simple:` to pick a set when both\n// sets contain the same name (for example `github` or `figma`).\nconst hasName = name != null && name !== \"\"\n\nconst resolve = () => {\n  let key = hasName ? String(name) : undefined\n  let order: Source[] = [\"lucide\", \"simple\"]\n\n  if (!key && href) {\n    const hrefKey = Object.keys(hrefMap).find((candidate) =>\n      href.toString().includes(candidate)\n    )\n    if (hrefKey) {\n      key = hrefMap[hrefKey as keyof typeof hrefMap]\n      order = [\"simple\", \"lucide\"]\n    }\n  }\n\n  const linkIcon = {\n    source: \"lucide\" as const,\n    path: pathFor(\"lucide\", \"link\"),\n  }\n\n  if (!key) return href ? linkIcon : undefined\n  if (key === \"x.com\") key = \"simple:x\"\n\n  const [prefix, icon] = key.includes(\":\") ? key.split(\":\") : [undefined, key]\n  if (prefix === \"lucide\" || prefix === \"simple\") order = [prefix]\n\n  for (const source of order) {\n    const path = pathFor(source, icon)\n    if (path in icons[source]) return { source, path }\n  }\n\n  // A link always gets an icon, even when its brand has no logo in either set\n  // (Simple Icons removed LinkedIn, for example).\n  if (!hasName && href) return linkIcon\n\n  return undefined\n}\n\nconst resolved = resolve()\nconst module = resolved\n  ? ((await icons[resolved.source][resolved.path]()) as { default?: any })\n  : undefined\nconst Comp = module?.default\n\nconst isLabelled =\n  \"aria-label\" in props || \"aria-labelledby\" in props || \"role\" in props\n---\n\n{Comp && resolved && (\n  <Comp\n    height={24}\n    width={24}\n    fill={resolved.source === \"simple\" ? \"currentColor\" : \"none\"}\n    class=\"size-[1em] text-base\"\n    aria-hidden={isLabelled ? undefined : \"true\"}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/item.json b/public/r/styles/base-lyra/item.json
index 62b0e0345..11c352de5 100644
--- a/public/r/styles/base-lyra/item.json
+++ b/public/r/styles/base-lyra/item.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/item/item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-none border text-xs group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = href ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-none border text-xs group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/layout.json b/public/r/styles/base-lyra/layout.json
index cf7219c6e..dc22c1d3f 100644
--- a/public/r/styles/base-lyra/layout.json
+++ b/public/r/styles/base-lyra/layout.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/layout/layout.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport \"@/styles/global.css\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"html\">\n\nconst { class: className, lang, ...props } = Astro.props\n---\n\n<html\n  class={cn(\n    \"bg-background text-foreground has-data-[variant=inset]:bg-sidebar overscroll-none scroll-smooth\",\n    className\n  )}\n  data-slot=\"layout\"\n  lang={Astro.currentLocale || \"en\"}\n  {...props}\n>\n  <slot />\n</html>\n\n<style is:global>\n  :root {\n    color-scheme: light;\n  }\n\n  .dark {\n    color-scheme: dark;\n  }\n\n  @view-transition {\n    navigation: auto;\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport \"@/styles/global.css\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"html\">\n\nconst { class: className, lang, ...props } = Astro.props\n---\n\n<html\n  class={cn(\n    \"bg-background text-foreground has-data-[variant=inset]:bg-sidebar overscroll-none scroll-smooth\",\n    className\n  )}\n  data-slot=\"layout\"\n  lang={lang || Astro.currentLocale || \"en\"}\n  {...props}\n>\n  <slot />\n</html>\n\n<style is:global>\n  :root {\n    color-scheme: light;\n  }\n\n  .dark {\n    color-scheme: dark;\n  }\n\n  @view-transition {\n    navigation: auto;\n  }\n</style>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/logo.json b/public/r/styles/base-lyra/logo.json
index 801c2231e..c9c868432 100644
--- a/public/r/styles/base-lyra/logo.json
+++ b/public/r/styles/base-lyra/logo.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/logo/logo.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst { class: className, href, ...props } = Astro.props\n\nconst Comp = href ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-sm font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-sm font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/logo/logo-text.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<span class={cn(\"text-lg\", className)} {...props}>\n  <slot />\n</span>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"logo-text\",\n  ...props\n} = Astro.props\n---\n\n<span class={cn(\"text-lg\", className)} data-slot={dataSlot} {...props}>\n  <slot />\n</span>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/marquee.json b/public/r/styles/base-lyra/marquee.json
index 25fc597f2..c932b246a 100644
--- a/public/r/styles/base-lyra/marquee.json
+++ b/public/r/styles/base-lyra/marquee.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  data-slot={dataSlot}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/navigation-menu.json b/public/r/styles/base-lyra/navigation-menu.json
index 46e5cd2e0..fa8f08854 100644
--- a/public/r/styles/base-lyra/navigation-menu.json
+++ b/public/r/styles/base-lyra/navigation-menu.json
@@ -25,7 +25,7 @@
     },
     {
       "path": "src/components/ui/navigation-menu/navigation-menu-link.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  active?: boolean\n}\n\nconst { class: className, active, ...props } = Astro.props\n---\n\n<a\n  data-slot=\"navigation-menu-link\"\n  data-active={active ? \"true\" : undefined}\n  class={cn(\"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-none p-2 text-xs transition-all outline-none focus-visible:ring-1 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-none [&_svg:not([class*='size-'])]:size-4\", className)}\n  {...props}\n>\n  <slot />\n</a>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  active?: boolean\n}\n\nconst {\n  class: className,\n  active,\n  \"aria-current\": ariaCurrent = active ? \"page\" : undefined,\n  ...props\n} = Astro.props\n---\n\n<a\n  data-slot=\"navigation-menu-link\"\n  data-active={active ? \"true\" : undefined}\n  aria-current={ariaCurrent}\n  class={cn(\"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-none p-2 text-xs transition-all outline-none focus-visible:ring-1 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-none [&_svg:not([class*='size-'])]:size-4\", className)}\n  {...props}\n>\n  <slot />\n</a>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/price.json b/public/r/styles/base-lyra/price.json
index 100a712e4..af349ca34 100644
--- a/public/r/styles/base-lyra/price.json
+++ b/public/r/styles/base-lyra/price.json
@@ -6,17 +6,17 @@
   "files": [
     {
       "path": "src/components/ui/price/price.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div class={cn(\"flex flex-wrap items-center gap-x-2\", className)} {...props}>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"price\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\"flex flex-wrap items-center gap-x-2\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/price/price-unit.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<span\n  class={cn(\"text-muted-foreground text-sm leading-tight\", className)}\n  {...props}\n>\n  / <slot />\n</span>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"price-unit\",\n  ...props\n} = Astro.props\n---\n\n<span\n  class={cn(\"text-muted-foreground text-sm leading-tight\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  / <slot />\n</span>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/price/price-value.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-none bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-none bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/rating.json b/public/r/styles/base-lyra/rating.json
index 7490c6dbb..57afb7920 100644
--- a/public/r/styles/base-lyra/rating.json
+++ b/public/r/styles/base-lyra/rating.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/rating/rating.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport Star from \"@lucide/astro/icons/star\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  value?: number\n}\n\nconst {\n  value = 5,\n  class: className,\n  \"aria-label\": ariaLabel = `Rated ${value} out of 5`,\n  ...props\n} = Astro.props\n---\n\n<div\n  role=\"img\"\n  aria-label={ariaLabel}\n  class={cn(\"flex items-center gap-1 text-base\", className)}\n  {...props}\n>\n  {Array.from({ length: 5 }).map((_, index) => {\n    const fillPercentage =\n      index < Math.floor(value)\n        ? 100\n        : index === Math.floor(value)\n          ? (value % 1) * 100\n          : 0\n\n    return (\n      <span\n        aria-hidden=\"true\"\n        class=\"text-muted-foreground/25 relative inline-flex size-[1em]\"\n      >\n        <Star class=\"size-[1em] fill-current\" />\n        {fillPercentage > 0 && (\n          <span\n            class=\"text-primary absolute inset-0 overflow-hidden\"\n            style={{ width: `${fillPercentage}%` }}\n          >\n            <Star class=\"size-[1em] fill-current\" />\n          </span>\n        )}\n      </span>\n    )\n  })}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport Star from \"@lucide/astro/icons/star\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  value?: number\n}\n\nconst {\n  value = 5,\n  class: className,\n  \"aria-label\": ariaLabel = `Rated ${value} out of 5`,\n  \"data-slot\": dataSlot = \"rating\",\n  ...props\n} = Astro.props\n---\n\n<div\n  role=\"img\"\n  aria-label={ariaLabel}\n  class={cn(\"flex items-center gap-1 text-base\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  {Array.from({ length: 5 }).map((_, index) => {\n    const fillPercentage =\n      index < Math.floor(value)\n        ? 100\n        : index === Math.floor(value)\n          ? (value % 1) * 100\n          : 0\n\n    return (\n      <span\n        aria-hidden=\"true\"\n        class=\"text-muted-foreground/25 relative inline-flex size-[1em]\"\n      >\n        <Star class=\"size-[1em] fill-current\" />\n        {fillPercentage > 0 && (\n          <span\n            class=\"text-primary absolute inset-0 overflow-hidden\"\n            style={{ width: `${fillPercentage}%` }}\n          >\n            <Star class=\"size-[1em] fill-current\" />\n          </span>\n        )}\n      </span>\n    )\n  })}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/section.json b/public/r/styles/base-lyra/section.json
index 77fba9f17..e977cb338 100644
--- a/public/r/styles/base-lyra/section.json
+++ b/public/r/styles/base-lyra/section.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/section/section.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-12 py-[var(--section-padding,--spacing(12))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-12 rounded-none bg-background ring-1 ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-12 py-[var(--section-padding,--spacing(12))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-12 rounded-none bg-background ring-1 ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/theme-toggle.json b/public/r/styles/base-lyra/theme-toggle.json
index 60e1a6dcc..9fbadda9c 100644
--- a/public/r/styles/base-lyra/theme-toggle.json
+++ b/public/r/styles/base-lyra/theme-toggle.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/ui/theme-toggle/theme-toggle.astro",
-      "content": "---\nimport type { ComponentProps } from \"astro/types\"\nimport Moon from \"@lucide/astro/icons/moon\"\nimport Sun from \"@lucide/astro/icons/sun\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = ComponentProps<typeof Button>\n\nconst {\n  class: className,\n  variant = \"ghost\",\n  size = \"icon-sm\",\n  ...props\n} = Astro.props\n---\n\n<Button\n  data-theme-toggle\n  aria-label=\"Toggle theme\"\n  variant={variant}\n  size={size}\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <Sun class=\"dark:hidden\" />\n  <Moon class=\"hidden dark:block\" />\n  <span class=\"sr-only\">Toggle theme</span>\n</Button>\n\n<script is:inline>\n  if (!window.__themeToggleHandlersInitialized) {\n    window.__themeToggleHandlersInitialized = true\n\n    const syncThemeToggles = () => {\n      const isDark = document.documentElement.classList.contains(\"dark\")\n\n      document.querySelectorAll(\"[data-theme-toggle]\").forEach((toggle) => {\n        if (!(toggle instanceof HTMLButtonElement)) return\n\n        toggle.setAttribute(\"aria-pressed\", isDark ? \"true\" : \"false\")\n        toggle.setAttribute(\"data-state\", isDark ? \"on\" : \"off\")\n\n        if (isDark) {\n          toggle.setAttribute(\"data-pressed\", \"\")\n        } else {\n          toggle.removeAttribute(\"data-pressed\")\n        }\n      })\n    }\n\n    syncThemeToggles()\n\n    const observer = new MutationObserver(syncThemeToggles)\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n    })\n\n    document.addEventListener(\"click\", (event) => {\n      const target = event.target\n\n      if (!(target instanceof Element)) return\n\n      const toggle = target.closest(\"[data-theme-toggle]\")\n\n      if (!(toggle instanceof HTMLButtonElement)) return\n      if (toggle.disabled) return\n\n      const isDark = document.documentElement.classList.contains(\"dark\")\n      const nextTheme = isDark ? \"light\" : \"dark\"\n\n      if (typeof window.__setTheme === \"function\") {\n        window.__setTheme(nextTheme)\n        return\n      }\n\n      document.documentElement.classList[\n        nextTheme === \"dark\" ? \"add\" : \"remove\"\n      ](\"dark\")\n    })\n  }\n</script>\n",
+      "content": "---\nimport type { ComponentProps } from \"astro/types\"\nimport Moon from \"@lucide/astro/icons/moon\"\nimport Sun from \"@lucide/astro/icons/sun\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = ComponentProps<typeof Button> & {\n  disabled?: boolean\n}\n\nconst {\n  class: className,\n  variant = \"ghost\",\n  size = \"icon-sm\",\n  ...props\n} = Astro.props\n---\n\n<Button\n  data-theme-toggle\n  aria-label=\"Toggle theme\"\n  variant={variant}\n  size={size}\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <Sun class=\"dark:hidden\" />\n  <Moon class=\"hidden dark:block\" />\n  <span class=\"sr-only\">Toggle theme</span>\n</Button>\n\n<script is:inline>\n  if (!window.__themeToggleHandlersInitialized) {\n    window.__themeToggleHandlersInitialized = true\n\n    const syncThemeToggles = () => {\n      const isDark = document.documentElement.classList.contains(\"dark\")\n\n      document.querySelectorAll(\"[data-theme-toggle]\").forEach((toggle) => {\n        if (!(toggle instanceof HTMLButtonElement)) return\n\n        toggle.setAttribute(\"aria-pressed\", isDark ? \"true\" : \"false\")\n        toggle.setAttribute(\"data-state\", isDark ? \"on\" : \"off\")\n\n        if (isDark) {\n          toggle.setAttribute(\"data-pressed\", \"\")\n        } else {\n          toggle.removeAttribute(\"data-pressed\")\n        }\n      })\n    }\n\n    syncThemeToggles()\n    document.addEventListener(\"astro:page-load\", syncThemeToggles)\n\n    const observer = new MutationObserver(syncThemeToggles)\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n    })\n\n    document.addEventListener(\"click\", (event) => {\n      const target = event.target\n\n      if (!(target instanceof Element)) return\n\n      const toggle = target.closest(\"[data-theme-toggle]\")\n\n      if (!(toggle instanceof HTMLButtonElement)) return\n      if (toggle.disabled) return\n\n      const isDark = document.documentElement.classList.contains(\"dark\")\n      const nextTheme = isDark ? \"light\" : \"dark\"\n\n      if (typeof window.__setTheme === \"function\") {\n        window.__setTheme(nextTheme)\n        return\n      }\n\n      document.documentElement.classList[\n        nextTheme === \"dark\" ? \"add\" : \"remove\"\n      ](\"dark\")\n    })\n  }\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/toast.json b/public/r/styles/base-lyra/toast.json
index 012e7392a..dcb04aada 100644
--- a/public/r/styles/base-lyra/toast.json
+++ b/public/r/styles/base-lyra/toast.json
@@ -18,7 +18,7 @@
     },
     {
       "path": "src/components/ui/toast/toast-action.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  hidden = true,\n  type = \"button\",\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"toast-action\"\n  type={type}\n  class={cn(buttonVariants({ variant: \"outline\", size: \"sm\" }), className)}\n  hidden={hidden}\n  {...props}\n>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  hidden = true,\n  type = \"button\",\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"toast-action\"\n  data-variant=\"outline\"\n  data-size=\"sm\"\n  type={type}\n  class={cn(buttonVariants({ variant: \"outline\", size: \"sm\" }), className)}\n  hidden={hidden}\n  {...props}\n>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/toc.json b/public/r/styles/base-lyra/toc.json
index 9dfe1fc1f..12c517d13 100644
--- a/public/r/styles/base-lyra/toc.json
+++ b/public/r/styles/base-lyra/toc.json
@@ -26,7 +26,7 @@
     },
     {
       "path": "src/components/ui/toc/toc-menu-link.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  depth?: number\n  isActive?: boolean\n  active?: boolean\n}\n\nconst {\n  class: className,\n  depth = 2,\n  isActive,\n  active = false,\n  ...props\n} = Astro.props\n\nconst resolvedActive = isActive ?? active\n---\n\n<a\n  data-slot=\"toc-menu-link\"\n  data-depth={depth}\n  data-active={resolvedActive ? \"true\" : undefined}\n  aria-current={resolvedActive ? \"location\" : undefined}\n  class={cn(\n    \"text-xs leading-6 text-muted-foreground hover:text-foreground data-[active=true]:text-foreground block transition-colors\",\n    depth === 3 && \"pl-4\",\n    depth >= 4 && \"pl-8\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</a>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  depth?: number\n  isActive?: boolean\n  active?: boolean\n}\n\nconst {\n  class: className,\n  depth = 2,\n  isActive,\n  active = false,\n  ...props\n} = Astro.props\n\nconst resolvedActive = isActive ?? active\n---\n\n<a\n  data-slot=\"toc-menu-link\"\n  data-depth={depth}\n  data-active={resolvedActive ? \"true\" : undefined}\n  aria-current={resolvedActive ? \"location\" : undefined}\n  class={cn(\n    \"text-xs leading-6 text-muted-foreground hover:text-foreground data-[active=true]:text-foreground block transition-colors\",\n    depth === 3 && \"ps-4\",\n    depth >= 4 && \"ps-8\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</a>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/typography.json b/public/r/styles/base-lyra/typography.json
index 4fecf28d6..f8f0aec5a 100644
--- a/public/r/styles/base-lyra/typography.json
+++ b/public/r/styles/base-lyra/typography.json
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/typography/typography-blockquote.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"blockquote\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<blockquote\n  data-slot=\"typography-blockquote\"\n  data-size={size}\n  class={cn(\"mt-6 border-l-2 pl-6 italic\", sizeClass, className)}\n  {...props}\n>\n  <slot />\n</blockquote>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"blockquote\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<blockquote\n  data-slot=\"typography-blockquote\"\n  data-size={size}\n  class={cn(\"mt-6 border-s-2 ps-6 italic\", sizeClass, className)}\n  {...props}\n>\n  <slot />\n</blockquote>\n",
       "type": "registry:ui"
     },
     {
@@ -51,7 +51,7 @@
     },
     {
       "path": "src/components/ui/typography/typography-list.astro",
-      "content": "---\nimport type { Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props<Tag extends \"ul\" | \"ol\"> = Polymorphic<{ as: Tag; size?: Size }>\n\nconst {\n  as: Tag = \"ul\",\n  class: className,\n  size = \"default\",\n  ...props\n} = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<Tag\n  data-slot=\"typography-list\"\n  data-size={size}\n  data-ordered={Tag === \"ol\" ? \"\" : undefined}\n  class={cn(\n    \"my-6 ml-6\",\n    Tag === \"ol\" ? \"list-decimal\" : \"list-disc\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n",
+      "content": "---\nimport type { Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props<Tag extends \"ul\" | \"ol\"> = Polymorphic<{ as: Tag; size?: Size }>\n\nconst {\n  as: Tag = \"ul\",\n  class: className,\n  size = \"default\",\n  ...props\n} = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<Tag\n  data-slot=\"typography-list\"\n  data-size={size}\n  data-ordered={Tag === \"ol\" ? \"\" : undefined}\n  class={cn(\n    \"my-6 ms-6\",\n    Tag === \"ol\" ? \"list-decimal\" : \"list-disc\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n",
       "type": "registry:ui"
     },
     {
@@ -76,12 +76,12 @@
     },
     {
       "path": "src/components/ui/typography/typography-table-head.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-left font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/typography/typography-table-cell.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-left align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/video.json b/public/r/styles/base-lyra/video.json
index ba5db8bac..7545d0467 100644
--- a/public/r/styles/base-lyra/video.json
+++ b/public/r/styles/base-lyra/video.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/video/video.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"src\"> & {\n  src?: string\n}\n\nconst { class: className, src, ...props } = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title=\"Embedded video\"\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-none border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-none border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/banner.json b/public/r/styles/base-maia/banner.json
index efb438940..e10d8edef 100644
--- a/public/r/styles/base-maia/banner.json
+++ b/public/r/styles/base-maia/banner.json
@@ -9,12 +9,12 @@
   "files": [
     {
       "path": "src/components/ui/banner/banner.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"aside\"> &\n  VariantProps<typeof variants> & {\n    storageKey?: string\n  }\n\nconst variants = cva(\"py-2.5 relative flex items-center\", {\n  variants: {\n    variant: {\n      default: \"bg-foreground text-background w-full\",\n      floating:\n        \"my-2 rounded-4xl border bg-background mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, storageKey, ...props } = Astro.props\n---\n\n<aside\n  class={cn(variants({ variant }), className)}\n  data-slot=\"banner\"\n  data-banner-storage-key={storageKey}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</aside>\n\n<script>\n  const getStorageToken = (key: string) => `banner:${key}`\n\n  const syncBanners = () => {\n    document.querySelectorAll(\"[data-slot='banner']\").forEach((banner) => {\n      if (!(banner instanceof HTMLElement)) return\n      const storageKey = banner.dataset.bannerStorageKey\n      if (\n        storageKey &&\n        sessionStorage.getItem(getStorageToken(storageKey)) === \"hidden\"\n      ) {\n        banner.hidden = true\n      }\n    })\n  }\n\n  syncBanners()\n  document.addEventListener(\"astro:page-load\", syncBanners)\n\n  document.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return\n    const closeButton = event.target.closest(\"[data-slot='banner-close']\")\n    const banner = closeButton?.closest(\"[data-slot='banner']\")\n    if (!(banner instanceof HTMLElement)) return\n    banner.hidden = true\n    const storageKey = banner.dataset.bannerStorageKey\n    if (storageKey)\n      sessionStorage.setItem(getStorageToken(storageKey), \"hidden\")\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"aside\"> &\n  VariantProps<typeof variants> & {\n    storageKey?: string\n  }\n\nconst variants = cva(\"py-2.5 relative flex items-center\", {\n  variants: {\n    variant: {\n      default: \"bg-foreground text-background w-full\",\n      floating:\n        \"my-2 rounded-4xl border bg-background mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  storageKey,\n  ...props\n} = Astro.props\n---\n\n<aside\n  class={cn(variants({ variant }), className)}\n  data-slot=\"banner\"\n  data-banner-storage-key={storageKey}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</aside>\n\n<script>\n  const getStorageToken = (key: string) => `banner:${key}`\n\n  const syncBanners = () => {\n    document.querySelectorAll(\"[data-slot='banner']\").forEach((banner) => {\n      if (!(banner instanceof HTMLElement)) return\n      const storageKey = banner.dataset.bannerStorageKey\n      if (\n        storageKey &&\n        sessionStorage.getItem(getStorageToken(storageKey)) === \"hidden\"\n      ) {\n        banner.hidden = true\n      }\n    })\n  }\n\n  syncBanners()\n  document.addEventListener(\"astro:page-load\", syncBanners)\n\n  document.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return\n    const closeButton = event.target.closest(\"[data-slot='banner-close']\")\n    const banner = closeButton?.closest(\"[data-slot='banner']\")\n    if (!(banner instanceof HTMLElement)) return\n    banner.hidden = true\n    const storageKey = banner.dataset.bannerStorageKey\n    if (storageKey)\n      sessionStorage.setItem(getStorageToken(storageKey), \"hidden\")\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/banner/banner-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst { class: className, showClose = true, ...props } = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-full text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst {\n  class: className,\n  showClose = true,\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-full text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/carousel.json b/public/r/styles/base-maia/carousel.json
index 3e3052ad3..7971e22fc 100644
--- a/public/r/styles/base-maia/carousel.json
+++ b/public/r/styles/base-maia/carousel.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = root.querySelector<HTMLElement>(\n        '[data-slot=\"carousel-content\"]'\n      )\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = root.querySelectorAll<HTMLButtonElement>(\n        '[data-slot=\"carousel-previous\"]'\n      )\n      const next = root.querySelectorAll<HTMLButtonElement>(\n        '[data-slot=\"carousel-next\"]'\n      )\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -28,12 +28,12 @@
     },
     {
       "path": "src/components/ui/carousel/carousel-next.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-previous.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/dropdown-menu.json b/public/r/styles/base-maia/dropdown-menu.json
index 7dcf85c0c..bf9ef40fd 100644
--- a/public/r/styles/base-maia/dropdown-menu.json
+++ b/public/r/styles/base-maia/dropdown-menu.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { Align, Side } from \"@data-slot/dropdown-menu\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  defaultValue?: string | null\n  defaultValues?: string[]\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  closeOnSelect?: boolean\n  highlightItemOnHover?: boolean\n  side?: Side\n  align?: Align\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  defaultValue,\n  defaultValues,\n  closeOnClickOutside,\n  closeOnEscape,\n  closeOnSelect,\n  highlightItemOnHover,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionPadding,\n  lockScroll,\n  ...props\n} = Astro.props\n\nconst defaultValuesAttr =\n  defaultValues === undefined ? undefined : JSON.stringify(defaultValues)\n---\n\n<div\n  data-slot=\"dropdown-menu\"\n  data-default-open={defaultOpen}\n  data-default-value={defaultValue}\n  data-default-values={defaultValuesAttr}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-close-on-select={closeOnSelect}\n  data-highlight-item-on-hover={highlightItemOnHover}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-avoid-collisions={avoidCollisions}\n  data-collision-padding={collisionPadding}\n  data-lock-scroll={lockScroll}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dropdown-menu\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { Align, Side } from \"@data-slot/dropdown-menu\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  defaultValue?: string | null\n  defaultValues?: string[]\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  closeOnSelect?: boolean\n  highlightItemOnHover?: boolean\n  side?: Side\n  align?: Align\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  defaultValue,\n  defaultValues,\n  closeOnClickOutside,\n  closeOnEscape,\n  closeOnSelect,\n  highlightItemOnHover,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionPadding,\n  lockScroll,\n  ...props\n} = Astro.props\n\nconst defaultValuesAttr =\n  defaultValues === undefined ? undefined : JSON.stringify(defaultValues)\n---\n\n<div\n  data-slot=\"dropdown-menu\"\n  data-default-open={defaultOpen}\n  data-default-value={defaultValue === null ? \"\" : defaultValue}\n  data-default-values={defaultValuesAttr}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-close-on-select={closeOnSelect}\n  data-highlight-item-on-hover={highlightItemOnHover}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-avoid-collisions={avoidCollisions}\n  data-collision-padding={collisionPadding}\n  data-lock-scroll={lockScroll}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dropdown-menu\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -25,17 +25,17 @@
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> &\n  HTMLAttributes<\"a\"> & {\n    as?: \"button\" | \"a\"\n    disabled?: boolean\n    variant?: \"default\" | \"destructive\"\n    inset?: boolean\n  }\n\nconst {\n  as: Tag = \"href\" in Astro.props ? \"a\" : \"button\",\n  class: className,\n  type = \"button\",\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<Tag\n  data-slot=\"dropdown-menu-item\"\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={Tag === \"button\" && disabled ? true : undefined}\n  type={Tag === \"button\" ? type : undefined}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n\n<script>\n  // Data Slot owns selection; links also need native keyboard activation.\n  document.addEventListener(\n    \"keydown\",\n    (event) => {\n      if (\n        event.defaultPrevented ||\n        event.isComposing ||\n        ![\"Enter\", \" \"].includes(event.key)\n      )\n        return\n      const item =\n        event.target instanceof Element\n          ? event.target.closest('[data-slot=\"dropdown-menu-item\"][href]')\n          : null\n      if (\n        !(item instanceof HTMLAnchorElement) ||\n        item.getAttribute(\"aria-disabled\") === \"true\"\n      )\n        return\n      event.preventDefault()\n      event.stopPropagation()\n      item.click()\n    },\n    true\n  )\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> &\n  HTMLAttributes<\"a\"> & {\n    as?: \"button\" | \"a\"\n    disabled?: boolean\n    variant?: \"default\" | \"destructive\"\n    inset?: boolean\n  }\n\nconst {\n  as: Tag = \"href\" in Astro.props ? \"a\" : \"button\",\n  class: className,\n  type = \"button\",\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<Tag\n  data-slot=\"dropdown-menu-item\"\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={Tag === \"button\" && disabled ? true : undefined}\n  type={Tag === \"button\" ? type : undefined}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n\n<script>\n  // Data Slot owns selection; links also need native keyboard activation.\n  document.addEventListener(\n    \"keydown\",\n    (event) => {\n      if (\n        event.defaultPrevented ||\n        event.isComposing ||\n        ![\"Enter\", \" \"].includes(event.key)\n      )\n        return\n      const item =\n        event.target instanceof Element\n          ? event.target.closest('[data-slot=\"dropdown-menu-item\"][href]')\n          : null\n      if (\n        !(item instanceof HTMLAnchorElement) ||\n        item.getAttribute(\"aria-disabled\") === \"true\"\n      )\n        return\n      event.preventDefault()\n      event.stopPropagation()\n      item.click()\n    },\n    true\n  )\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-radio-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-radio-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-radio-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-radio-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-radio-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-radio-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-radio-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-radio-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-radio-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-checkbox-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-checkbox-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-checkbox-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-checkbox-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-checkbox-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-checkbox-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-checkbox-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-checkbox-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
@@ -45,7 +45,7 @@
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-label.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  inset?: boolean\n}\n\nconst { class: className, inset, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"dropdown-menu-label\"\n  data-inset={inset}\n  class={cn(\"text-muted-foreground px-3 py-2.5 text-xs data-inset:pl-9.5\", className)}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  inset?: boolean\n}\n\nconst { class: className, inset, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"dropdown-menu-label\"\n  data-inset={inset || undefined}\n  class={cn(\"text-muted-foreground px-3 py-2.5 text-xs data-inset:pl-9.5\", className)}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/header.json b/public/r/styles/base-maia/header.json
index b9a815dc4..6a3a399d5 100644
--- a/public/r/styles/base-maia/header.json
+++ b/public/r/styles/base-maia/header.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/header/header.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2.5 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-4xl border bg-background mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2.5 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-4xl border bg-background mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/icon.json b/public/r/styles/base-maia/icon.json
index 08bcfdfad..2dd8ce89c 100644
--- a/public/r/styles/base-maia/icon.json
+++ b/public/r/styles/base-maia/icon.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/ui/icon/icon.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = Omit<HTMLAttributes<\"svg\">, \"name\" | \"href\"> & {\n  href?: HTMLAttributes<\"a\">[\"href\"]\n  name?: string | number\n}\n\nconst { name, href, ...props } = Astro.props\n\nconst hrefMap = {\n  \"x.com\": \"x\",\n  twitter: \"twitter\",\n  facebook: \"facebook\",\n  instagram: \"instagram\",\n  pinterest: \"pinterest\",\n  youtube: \"youtube\",\n  tiktok: \"tiktok\",\n  snapchat: \"snapchat\",\n  reddit: \"reddit\",\n  tumblr: \"tumblr\",\n  \"wa.me\": \"whatsapp\",\n  telegram: \"telegram\",\n  discord: \"discord\",\n  vimeo: \"vimeo\",\n  flickr: \"flickr\",\n  yelp: \"yelp\",\n  spotify: \"spotify\",\n  behance: \"behance\",\n  dribbble: \"dribbble\",\n  soundcloud: \"soundcloud\",\n  github: \"github\",\n  twitch: \"twitch\",\n  \"tel:\": \"phone\",\n  \"mailto:\": \"mail\",\n  \"maps.app.goo.gl\": \"map-pin\",\n  linkedin: \"linkedin\",\n} as const\n\ntype Source = \"lucide\" | \"simple\"\n\nconst icons: Record<Source, Record<string, () => Promise<unknown>>> = {\n  lucide: import.meta.glob(\"/node_modules/lucide-static/icons/*.svg\"),\n  simple: import.meta.glob(\"/node_modules/simple-icons/icons/*.svg\"),\n}\n\nconst pathFor = (source: Source, icon: string) =>\n  source === \"lucide\"\n    ? `/node_modules/lucide-static/icons/${icon}.svg`\n    : `/node_modules/simple-icons/icons/${icon}.svg`\n\n// Resolve an icon by explicit name, or derive one from a link href.\n// Names may be prefixed with `lucide:` or `simple:` to pick a set when both\n// sets contain the same name (for example `github` or `figma`).\nconst hasName = name != null && name !== \"\"\n\nconst resolve = () => {\n  let key = hasName ? String(name) : undefined\n  let order: Source[] = [\"lucide\", \"simple\"]\n\n  if (!key && href) {\n    const hrefKey = Object.keys(hrefMap).find((candidate) =>\n      href.toString().includes(candidate)\n    )\n    if (hrefKey) {\n      key = hrefMap[hrefKey as keyof typeof hrefMap]\n      order = [\"simple\", \"lucide\"]\n    }\n  }\n\n  const linkIcon = {\n    source: \"lucide\" as const,\n    path: pathFor(\"lucide\", \"link\"),\n  }\n\n  if (!key) return href ? linkIcon : undefined\n  if (key === \"x.com\") key = \"simple:x\"\n\n  const [prefix, icon] = key.includes(\":\") ? key.split(\":\") : [undefined, key]\n  if (prefix === \"lucide\" || prefix === \"simple\") order = [prefix]\n\n  for (const source of order) {\n    const path = pathFor(source, icon)\n    if (path in icons[source]) return { source, path }\n  }\n\n  // A link always gets an icon, even when its brand has no logo in either set\n  // (Simple Icons removed LinkedIn, for example).\n  if (!hasName && href) return linkIcon\n\n  return undefined\n}\n\nconst resolved = resolve()\nconst module = resolved\n  ? ((await icons[resolved.source][resolved.path]()) as { default?: any })\n  : undefined\nconst Comp = module?.default\n\nconst isLabelled =\n  \"aria-label\" in props || \"aria-labelledby\" in props || \"role\" in props\n---\n\n{Comp && resolved && (\n  <Comp\n    height={24}\n    width={24}\n    fill={resolved.source === \"simple\" ? \"currentColor\" : \"none\"}\n    class=\"size-[1em] text-base\"\n    aria-hidden={isLabelled ? undefined : \"true\"}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = Omit<HTMLAttributes<\"svg\">, \"name\" | \"href\"> & {\n  href?: HTMLAttributes<\"a\">[\"href\"]\n  name?: string | number\n}\n\nconst { name, href, \"data-slot\": dataSlot = \"icon\", ...props } = Astro.props\n\nconst hrefMap = {\n  \"x.com\": \"x\",\n  twitter: \"twitter\",\n  facebook: \"facebook\",\n  instagram: \"instagram\",\n  pinterest: \"pinterest\",\n  youtube: \"youtube\",\n  tiktok: \"tiktok\",\n  snapchat: \"snapchat\",\n  reddit: \"reddit\",\n  tumblr: \"tumblr\",\n  \"wa.me\": \"whatsapp\",\n  telegram: \"telegram\",\n  discord: \"discord\",\n  vimeo: \"vimeo\",\n  flickr: \"flickr\",\n  yelp: \"yelp\",\n  spotify: \"spotify\",\n  behance: \"behance\",\n  dribbble: \"dribbble\",\n  soundcloud: \"soundcloud\",\n  github: \"github\",\n  twitch: \"twitch\",\n  \"tel:\": \"phone\",\n  \"mailto:\": \"mail\",\n  \"maps.app.goo.gl\": \"map-pin\",\n  linkedin: \"linkedin\",\n} as const\n\ntype Source = \"lucide\" | \"simple\"\n\nconst icons: Record<Source, Record<string, () => Promise<unknown>>> = {\n  lucide: import.meta.glob(\"/node_modules/lucide-static/icons/*.svg\"),\n  simple: import.meta.glob(\"/node_modules/simple-icons/icons/*.svg\"),\n}\n\nconst pathFor = (source: Source, icon: string) =>\n  source === \"lucide\"\n    ? `/node_modules/lucide-static/icons/${icon}.svg`\n    : `/node_modules/simple-icons/icons/${icon}.svg`\n\n// Resolve an icon by explicit name, or derive one from a link href.\n// Names may be prefixed with `lucide:` or `simple:` to pick a set when both\n// sets contain the same name (for example `github` or `figma`).\nconst hasName = name != null && name !== \"\"\n\nconst resolve = () => {\n  let key = hasName ? String(name) : undefined\n  let order: Source[] = [\"lucide\", \"simple\"]\n\n  if (!key && href) {\n    const hrefKey = Object.keys(hrefMap).find((candidate) =>\n      href.toString().includes(candidate)\n    )\n    if (hrefKey) {\n      key = hrefMap[hrefKey as keyof typeof hrefMap]\n      order = [\"simple\", \"lucide\"]\n    }\n  }\n\n  const linkIcon = {\n    source: \"lucide\" as const,\n    path: pathFor(\"lucide\", \"link\"),\n  }\n\n  if (!key) return href ? linkIcon : undefined\n  if (key === \"x.com\") key = \"simple:x\"\n\n  const [prefix, icon] = key.includes(\":\") ? key.split(\":\") : [undefined, key]\n  if (prefix === \"lucide\" || prefix === \"simple\") order = [prefix]\n\n  for (const source of order) {\n    const path = pathFor(source, icon)\n    if (path in icons[source]) return { source, path }\n  }\n\n  // A link always gets an icon, even when its brand has no logo in either set\n  // (Simple Icons removed LinkedIn, for example).\n  if (!hasName && href) return linkIcon\n\n  return undefined\n}\n\nconst resolved = resolve()\nconst module = resolved\n  ? ((await icons[resolved.source][resolved.path]()) as { default?: any })\n  : undefined\nconst Comp = module?.default\n\nconst isLabelled =\n  \"aria-label\" in props || \"aria-labelledby\" in props || \"role\" in props\n---\n\n{Comp && resolved && (\n  <Comp\n    height={24}\n    width={24}\n    fill={resolved.source === \"simple\" ? \"currentColor\" : \"none\"}\n    class=\"size-[1em] text-base\"\n    aria-hidden={isLabelled ? undefined : \"true\"}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/item.json b/public/r/styles/base-maia/item.json
index fb47d32a4..661dcc50e 100644
--- a/public/r/styles/base-maia/item.json
+++ b/public/r/styles/base-maia/item.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/item/item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-2xl border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-3.5 px-3.5 py-3\",\n        xs: \"gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = href ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-2xl border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-3.5 px-3.5 py-3\",\n        xs: \"gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/layout.json b/public/r/styles/base-maia/layout.json
index cf7219c6e..dc22c1d3f 100644
--- a/public/r/styles/base-maia/layout.json
+++ b/public/r/styles/base-maia/layout.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/layout/layout.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport \"@/styles/global.css\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"html\">\n\nconst { class: className, lang, ...props } = Astro.props\n---\n\n<html\n  class={cn(\n    \"bg-background text-foreground has-data-[variant=inset]:bg-sidebar overscroll-none scroll-smooth\",\n    className\n  )}\n  data-slot=\"layout\"\n  lang={Astro.currentLocale || \"en\"}\n  {...props}\n>\n  <slot />\n</html>\n\n<style is:global>\n  :root {\n    color-scheme: light;\n  }\n\n  .dark {\n    color-scheme: dark;\n  }\n\n  @view-transition {\n    navigation: auto;\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport \"@/styles/global.css\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"html\">\n\nconst { class: className, lang, ...props } = Astro.props\n---\n\n<html\n  class={cn(\n    \"bg-background text-foreground has-data-[variant=inset]:bg-sidebar overscroll-none scroll-smooth\",\n    className\n  )}\n  data-slot=\"layout\"\n  lang={lang || Astro.currentLocale || \"en\"}\n  {...props}\n>\n  <slot />\n</html>\n\n<style is:global>\n  :root {\n    color-scheme: light;\n  }\n\n  .dark {\n    color-scheme: dark;\n  }\n\n  @view-transition {\n    navigation: auto;\n  }\n</style>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/logo.json b/public/r/styles/base-maia/logo.json
index 5118dce00..fbaefd162 100644
--- a/public/r/styles/base-maia/logo.json
+++ b/public/r/styles/base-maia/logo.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/logo/logo.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst { class: className, href, ...props } = Astro.props\n\nconst Comp = href ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-base font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-base font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/logo/logo-text.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<span class={cn(\"text-lg\", className)} {...props}>\n  <slot />\n</span>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"logo-text\",\n  ...props\n} = Astro.props\n---\n\n<span class={cn(\"text-lg\", className)} data-slot={dataSlot} {...props}>\n  <slot />\n</span>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/marquee.json b/public/r/styles/base-maia/marquee.json
index 25fc597f2..c932b246a 100644
--- a/public/r/styles/base-maia/marquee.json
+++ b/public/r/styles/base-maia/marquee.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  data-slot={dataSlot}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/navigation-menu.json b/public/r/styles/base-maia/navigation-menu.json
index cdb700a36..30f8951ed 100644
--- a/public/r/styles/base-maia/navigation-menu.json
+++ b/public/r/styles/base-maia/navigation-menu.json
@@ -25,7 +25,7 @@
     },
     {
       "path": "src/components/ui/navigation-menu/navigation-menu-link.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  active?: boolean\n}\n\nconst { class: className, active, ...props } = Astro.props\n---\n\n<a\n  data-slot=\"navigation-menu-link\"\n  data-active={active ? \"true\" : undefined}\n  class={cn(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-2xl p-3 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 in-data-[slot=navigation-menu-content]:rounded-xl\", className)}\n  {...props}\n>\n  <slot />\n</a>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  active?: boolean\n}\n\nconst {\n  class: className,\n  active,\n  \"aria-current\": ariaCurrent = active ? \"page\" : undefined,\n  ...props\n} = Astro.props\n---\n\n<a\n  data-slot=\"navigation-menu-link\"\n  data-active={active ? \"true\" : undefined}\n  aria-current={ariaCurrent}\n  class={cn(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-2xl p-3 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 in-data-[slot=navigation-menu-content]:rounded-xl\", className)}\n  {...props}\n>\n  <slot />\n</a>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/price.json b/public/r/styles/base-maia/price.json
index da3b26c9f..d815f6576 100644
--- a/public/r/styles/base-maia/price.json
+++ b/public/r/styles/base-maia/price.json
@@ -6,17 +6,17 @@
   "files": [
     {
       "path": "src/components/ui/price/price.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div class={cn(\"flex flex-wrap items-center gap-x-2\", className)} {...props}>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"price\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\"flex flex-wrap items-center gap-x-2\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/price/price-unit.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<span\n  class={cn(\"text-muted-foreground text-sm leading-tight\", className)}\n  {...props}\n>\n  / <slot />\n</span>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"price-unit\",\n  ...props\n} = Astro.props\n---\n\n<span\n  class={cn(\"text-muted-foreground text-sm leading-tight\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  / <slot />\n</span>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/price/price-value.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/rating.json b/public/r/styles/base-maia/rating.json
index 7490c6dbb..57afb7920 100644
--- a/public/r/styles/base-maia/rating.json
+++ b/public/r/styles/base-maia/rating.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/rating/rating.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport Star from \"@lucide/astro/icons/star\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  value?: number\n}\n\nconst {\n  value = 5,\n  class: className,\n  \"aria-label\": ariaLabel = `Rated ${value} out of 5`,\n  ...props\n} = Astro.props\n---\n\n<div\n  role=\"img\"\n  aria-label={ariaLabel}\n  class={cn(\"flex items-center gap-1 text-base\", className)}\n  {...props}\n>\n  {Array.from({ length: 5 }).map((_, index) => {\n    const fillPercentage =\n      index < Math.floor(value)\n        ? 100\n        : index === Math.floor(value)\n          ? (value % 1) * 100\n          : 0\n\n    return (\n      <span\n        aria-hidden=\"true\"\n        class=\"text-muted-foreground/25 relative inline-flex size-[1em]\"\n      >\n        <Star class=\"size-[1em] fill-current\" />\n        {fillPercentage > 0 && (\n          <span\n            class=\"text-primary absolute inset-0 overflow-hidden\"\n            style={{ width: `${fillPercentage}%` }}\n          >\n            <Star class=\"size-[1em] fill-current\" />\n          </span>\n        )}\n      </span>\n    )\n  })}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport Star from \"@lucide/astro/icons/star\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  value?: number\n}\n\nconst {\n  value = 5,\n  class: className,\n  \"aria-label\": ariaLabel = `Rated ${value} out of 5`,\n  \"data-slot\": dataSlot = \"rating\",\n  ...props\n} = Astro.props\n---\n\n<div\n  role=\"img\"\n  aria-label={ariaLabel}\n  class={cn(\"flex items-center gap-1 text-base\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  {Array.from({ length: 5 }).map((_, index) => {\n    const fillPercentage =\n      index < Math.floor(value)\n        ? 100\n        : index === Math.floor(value)\n          ? (value % 1) * 100\n          : 0\n\n    return (\n      <span\n        aria-hidden=\"true\"\n        class=\"text-muted-foreground/25 relative inline-flex size-[1em]\"\n      >\n        <Star class=\"size-[1em] fill-current\" />\n        {fillPercentage > 0 && (\n          <span\n            class=\"text-primary absolute inset-0 overflow-hidden\"\n            style={{ width: `${fillPercentage}%` }}\n          >\n            <Star class=\"size-[1em] fill-current\" />\n          </span>\n        )}\n      </span>\n    )\n  })}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/section.json b/public/r/styles/base-maia/section.json
index f4e9b9b7e..8c627dd17 100644
--- a/public/r/styles/base-maia/section.json
+++ b/public/r/styles/base-maia/section.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/section/section.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-16 py-[var(--section-padding,--spacing(16))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-16 rounded-2xl bg-background ring-1 ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-16 py-[var(--section-padding,--spacing(16))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-16 rounded-2xl bg-background ring-1 ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/theme-toggle.json b/public/r/styles/base-maia/theme-toggle.json
index 60e1a6dcc..9fbadda9c 100644
--- a/public/r/styles/base-maia/theme-toggle.json
+++ b/public/r/styles/base-maia/theme-toggle.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/ui/theme-toggle/theme-toggle.astro",
-      "content": "---\nimport type { ComponentProps } from \"astro/types\"\nimport Moon from \"@lucide/astro/icons/moon\"\nimport Sun from \"@lucide/astro/icons/sun\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = ComponentProps<typeof Button>\n\nconst {\n  class: className,\n  variant = \"ghost\",\n  size = \"icon-sm\",\n  ...props\n} = Astro.props\n---\n\n<Button\n  data-theme-toggle\n  aria-label=\"Toggle theme\"\n  variant={variant}\n  size={size}\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <Sun class=\"dark:hidden\" />\n  <Moon class=\"hidden dark:block\" />\n  <span class=\"sr-only\">Toggle theme</span>\n</Button>\n\n<script is:inline>\n  if (!window.__themeToggleHandlersInitialized) {\n    window.__themeToggleHandlersInitialized = true\n\n    const syncThemeToggles = () => {\n      const isDark = document.documentElement.classList.contains(\"dark\")\n\n      document.querySelectorAll(\"[data-theme-toggle]\").forEach((toggle) => {\n        if (!(toggle instanceof HTMLButtonElement)) return\n\n        toggle.setAttribute(\"aria-pressed\", isDark ? \"true\" : \"false\")\n        toggle.setAttribute(\"data-state\", isDark ? \"on\" : \"off\")\n\n        if (isDark) {\n          toggle.setAttribute(\"data-pressed\", \"\")\n        } else {\n          toggle.removeAttribute(\"data-pressed\")\n        }\n      })\n    }\n\n    syncThemeToggles()\n\n    const observer = new MutationObserver(syncThemeToggles)\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n    })\n\n    document.addEventListener(\"click\", (event) => {\n      const target = event.target\n\n      if (!(target instanceof Element)) return\n\n      const toggle = target.closest(\"[data-theme-toggle]\")\n\n      if (!(toggle instanceof HTMLButtonElement)) return\n      if (toggle.disabled) return\n\n      const isDark = document.documentElement.classList.contains(\"dark\")\n      const nextTheme = isDark ? \"light\" : \"dark\"\n\n      if (typeof window.__setTheme === \"function\") {\n        window.__setTheme(nextTheme)\n        return\n      }\n\n      document.documentElement.classList[\n        nextTheme === \"dark\" ? \"add\" : \"remove\"\n      ](\"dark\")\n    })\n  }\n</script>\n",
+      "content": "---\nimport type { ComponentProps } from \"astro/types\"\nimport Moon from \"@lucide/astro/icons/moon\"\nimport Sun from \"@lucide/astro/icons/sun\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = ComponentProps<typeof Button> & {\n  disabled?: boolean\n}\n\nconst {\n  class: className,\n  variant = \"ghost\",\n  size = \"icon-sm\",\n  ...props\n} = Astro.props\n---\n\n<Button\n  data-theme-toggle\n  aria-label=\"Toggle theme\"\n  variant={variant}\n  size={size}\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <Sun class=\"dark:hidden\" />\n  <Moon class=\"hidden dark:block\" />\n  <span class=\"sr-only\">Toggle theme</span>\n</Button>\n\n<script is:inline>\n  if (!window.__themeToggleHandlersInitialized) {\n    window.__themeToggleHandlersInitialized = true\n\n    const syncThemeToggles = () => {\n      const isDark = document.documentElement.classList.contains(\"dark\")\n\n      document.querySelectorAll(\"[data-theme-toggle]\").forEach((toggle) => {\n        if (!(toggle instanceof HTMLButtonElement)) return\n\n        toggle.setAttribute(\"aria-pressed\", isDark ? \"true\" : \"false\")\n        toggle.setAttribute(\"data-state\", isDark ? \"on\" : \"off\")\n\n        if (isDark) {\n          toggle.setAttribute(\"data-pressed\", \"\")\n        } else {\n          toggle.removeAttribute(\"data-pressed\")\n        }\n      })\n    }\n\n    syncThemeToggles()\n    document.addEventListener(\"astro:page-load\", syncThemeToggles)\n\n    const observer = new MutationObserver(syncThemeToggles)\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n    })\n\n    document.addEventListener(\"click\", (event) => {\n      const target = event.target\n\n      if (!(target instanceof Element)) return\n\n      const toggle = target.closest(\"[data-theme-toggle]\")\n\n      if (!(toggle instanceof HTMLButtonElement)) return\n      if (toggle.disabled) return\n\n      const isDark = document.documentElement.classList.contains(\"dark\")\n      const nextTheme = isDark ? \"light\" : \"dark\"\n\n      if (typeof window.__setTheme === \"function\") {\n        window.__setTheme(nextTheme)\n        return\n      }\n\n      document.documentElement.classList[\n        nextTheme === \"dark\" ? \"add\" : \"remove\"\n      ](\"dark\")\n    })\n  }\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/toast.json b/public/r/styles/base-maia/toast.json
index efa1a9d7a..19f5528dc 100644
--- a/public/r/styles/base-maia/toast.json
+++ b/public/r/styles/base-maia/toast.json
@@ -18,7 +18,7 @@
     },
     {
       "path": "src/components/ui/toast/toast-action.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  hidden = true,\n  type = \"button\",\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"toast-action\"\n  type={type}\n  class={cn(buttonVariants({ variant: \"outline\", size: \"sm\" }), className)}\n  hidden={hidden}\n  {...props}\n>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  hidden = true,\n  type = \"button\",\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"toast-action\"\n  data-variant=\"outline\"\n  data-size=\"sm\"\n  type={type}\n  class={cn(buttonVariants({ variant: \"outline\", size: \"sm\" }), className)}\n  hidden={hidden}\n  {...props}\n>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/toc.json b/public/r/styles/base-maia/toc.json
index b83d9608f..f8ad7c489 100644
--- a/public/r/styles/base-maia/toc.json
+++ b/public/r/styles/base-maia/toc.json
@@ -26,7 +26,7 @@
     },
     {
       "path": "src/components/ui/toc/toc-menu-link.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  depth?: number\n  isActive?: boolean\n  active?: boolean\n}\n\nconst {\n  class: className,\n  depth = 2,\n  isActive,\n  active = false,\n  ...props\n} = Astro.props\n\nconst resolvedActive = isActive ?? active\n---\n\n<a\n  data-slot=\"toc-menu-link\"\n  data-depth={depth}\n  data-active={resolvedActive ? \"true\" : undefined}\n  aria-current={resolvedActive ? \"location\" : undefined}\n  class={cn(\n    \"text-sm leading-6 text-muted-foreground hover:text-foreground data-[active=true]:text-foreground block transition-colors\",\n    depth === 3 && \"pl-4\",\n    depth >= 4 && \"pl-8\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</a>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  depth?: number\n  isActive?: boolean\n  active?: boolean\n}\n\nconst {\n  class: className,\n  depth = 2,\n  isActive,\n  active = false,\n  ...props\n} = Astro.props\n\nconst resolvedActive = isActive ?? active\n---\n\n<a\n  data-slot=\"toc-menu-link\"\n  data-depth={depth}\n  data-active={resolvedActive ? \"true\" : undefined}\n  aria-current={resolvedActive ? \"location\" : undefined}\n  class={cn(\n    \"text-sm leading-6 text-muted-foreground hover:text-foreground data-[active=true]:text-foreground block transition-colors\",\n    depth === 3 && \"ps-4\",\n    depth >= 4 && \"ps-8\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</a>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/typography.json b/public/r/styles/base-maia/typography.json
index 0da7b3e5a..a06d0ec93 100644
--- a/public/r/styles/base-maia/typography.json
+++ b/public/r/styles/base-maia/typography.json
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/typography/typography-blockquote.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"blockquote\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<blockquote\n  data-slot=\"typography-blockquote\"\n  data-size={size}\n  class={cn(\"mt-6 border-l-2 pl-6 italic\", sizeClass, className)}\n  {...props}\n>\n  <slot />\n</blockquote>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"blockquote\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<blockquote\n  data-slot=\"typography-blockquote\"\n  data-size={size}\n  class={cn(\"mt-6 border-s-2 ps-6 italic\", sizeClass, className)}\n  {...props}\n>\n  <slot />\n</blockquote>\n",
       "type": "registry:ui"
     },
     {
@@ -51,7 +51,7 @@
     },
     {
       "path": "src/components/ui/typography/typography-list.astro",
-      "content": "---\nimport type { Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props<Tag extends \"ul\" | \"ol\"> = Polymorphic<{ as: Tag; size?: Size }>\n\nconst {\n  as: Tag = \"ul\",\n  class: className,\n  size = \"default\",\n  ...props\n} = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<Tag\n  data-slot=\"typography-list\"\n  data-size={size}\n  data-ordered={Tag === \"ol\" ? \"\" : undefined}\n  class={cn(\n    \"my-6 ml-6\",\n    Tag === \"ol\" ? \"list-decimal\" : \"list-disc\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n",
+      "content": "---\nimport type { Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props<Tag extends \"ul\" | \"ol\"> = Polymorphic<{ as: Tag; size?: Size }>\n\nconst {\n  as: Tag = \"ul\",\n  class: className,\n  size = \"default\",\n  ...props\n} = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<Tag\n  data-slot=\"typography-list\"\n  data-size={size}\n  data-ordered={Tag === \"ol\" ? \"\" : undefined}\n  class={cn(\n    \"my-6 ms-6\",\n    Tag === \"ol\" ? \"list-decimal\" : \"list-disc\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n",
       "type": "registry:ui"
     },
     {
@@ -76,12 +76,12 @@
     },
     {
       "path": "src/components/ui/typography/typography-table-head.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-left font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/typography/typography-table-cell.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-left align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/video.json b/public/r/styles/base-maia/video.json
index fead3d781..4ac4944b8 100644
--- a/public/r/styles/base-maia/video.json
+++ b/public/r/styles/base-maia/video.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/video/video.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"src\"> & {\n  src?: string\n}\n\nconst { class: className, src, ...props } = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title=\"Embedded video\"\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-2xl border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-2xl border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/banner.json b/public/r/styles/base-mira/banner.json
index bc42484f0..a1a51b99e 100644
--- a/public/r/styles/base-mira/banner.json
+++ b/public/r/styles/base-mira/banner.json
@@ -9,12 +9,12 @@
   "files": [
     {
       "path": "src/components/ui/banner/banner.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"aside\"> &\n  VariantProps<typeof variants> & {\n    storageKey?: string\n  }\n\nconst variants = cva(\"py-1.5 text-xs/relaxed relative flex items-center\", {\n  variants: {\n    variant: {\n      default: \"bg-foreground text-background w-full\",\n      floating:\n        \"my-2 rounded-lg border bg-background mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, storageKey, ...props } = Astro.props\n---\n\n<aside\n  class={cn(variants({ variant }), className)}\n  data-slot=\"banner\"\n  data-banner-storage-key={storageKey}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</aside>\n\n<script>\n  const getStorageToken = (key: string) => `banner:${key}`\n\n  const syncBanners = () => {\n    document.querySelectorAll(\"[data-slot='banner']\").forEach((banner) => {\n      if (!(banner instanceof HTMLElement)) return\n      const storageKey = banner.dataset.bannerStorageKey\n      if (\n        storageKey &&\n        sessionStorage.getItem(getStorageToken(storageKey)) === \"hidden\"\n      ) {\n        banner.hidden = true\n      }\n    })\n  }\n\n  syncBanners()\n  document.addEventListener(\"astro:page-load\", syncBanners)\n\n  document.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return\n    const closeButton = event.target.closest(\"[data-slot='banner-close']\")\n    const banner = closeButton?.closest(\"[data-slot='banner']\")\n    if (!(banner instanceof HTMLElement)) return\n    banner.hidden = true\n    const storageKey = banner.dataset.bannerStorageKey\n    if (storageKey)\n      sessionStorage.setItem(getStorageToken(storageKey), \"hidden\")\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"aside\"> &\n  VariantProps<typeof variants> & {\n    storageKey?: string\n  }\n\nconst variants = cva(\"py-1.5 text-xs/relaxed relative flex items-center\", {\n  variants: {\n    variant: {\n      default: \"bg-foreground text-background w-full\",\n      floating:\n        \"my-2 rounded-lg border bg-background mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  storageKey,\n  ...props\n} = Astro.props\n---\n\n<aside\n  class={cn(variants({ variant }), className)}\n  data-slot=\"banner\"\n  data-banner-storage-key={storageKey}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</aside>\n\n<script>\n  const getStorageToken = (key: string) => `banner:${key}`\n\n  const syncBanners = () => {\n    document.querySelectorAll(\"[data-slot='banner']\").forEach((banner) => {\n      if (!(banner instanceof HTMLElement)) return\n      const storageKey = banner.dataset.bannerStorageKey\n      if (\n        storageKey &&\n        sessionStorage.getItem(getStorageToken(storageKey)) === \"hidden\"\n      ) {\n        banner.hidden = true\n      }\n    })\n  }\n\n  syncBanners()\n  document.addEventListener(\"astro:page-load\", syncBanners)\n\n  document.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return\n    const closeButton = event.target.closest(\"[data-slot='banner-close']\")\n    const banner = closeButton?.closest(\"[data-slot='banner']\")\n    if (!(banner instanceof HTMLElement)) return\n    banner.hidden = true\n    const storageKey = banner.dataset.bannerStorageKey\n    if (storageKey)\n      sessionStorage.setItem(getStorageToken(storageKey), \"hidden\")\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/banner/banner-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst { class: className, showClose = true, ...props } = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-sm text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst {\n  class: className,\n  showClose = true,\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-sm text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/carousel.json b/public/r/styles/base-mira/carousel.json
index 3e3052ad3..7971e22fc 100644
--- a/public/r/styles/base-mira/carousel.json
+++ b/public/r/styles/base-mira/carousel.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = root.querySelector<HTMLElement>(\n        '[data-slot=\"carousel-content\"]'\n      )\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = root.querySelectorAll<HTMLButtonElement>(\n        '[data-slot=\"carousel-previous\"]'\n      )\n      const next = root.querySelectorAll<HTMLButtonElement>(\n        '[data-slot=\"carousel-next\"]'\n      )\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -28,12 +28,12 @@
     },
     {
       "path": "src/components/ui/carousel/carousel-next.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-previous.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/dropdown-menu.json b/public/r/styles/base-mira/dropdown-menu.json
index 540902bce..e70d8f3a5 100644
--- a/public/r/styles/base-mira/dropdown-menu.json
+++ b/public/r/styles/base-mira/dropdown-menu.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { Align, Side } from \"@data-slot/dropdown-menu\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  defaultValue?: string | null\n  defaultValues?: string[]\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  closeOnSelect?: boolean\n  highlightItemOnHover?: boolean\n  side?: Side\n  align?: Align\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  defaultValue,\n  defaultValues,\n  closeOnClickOutside,\n  closeOnEscape,\n  closeOnSelect,\n  highlightItemOnHover,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionPadding,\n  lockScroll,\n  ...props\n} = Astro.props\n\nconst defaultValuesAttr =\n  defaultValues === undefined ? undefined : JSON.stringify(defaultValues)\n---\n\n<div\n  data-slot=\"dropdown-menu\"\n  data-default-open={defaultOpen}\n  data-default-value={defaultValue}\n  data-default-values={defaultValuesAttr}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-close-on-select={closeOnSelect}\n  data-highlight-item-on-hover={highlightItemOnHover}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-avoid-collisions={avoidCollisions}\n  data-collision-padding={collisionPadding}\n  data-lock-scroll={lockScroll}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dropdown-menu\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { Align, Side } from \"@data-slot/dropdown-menu\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  defaultValue?: string | null\n  defaultValues?: string[]\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  closeOnSelect?: boolean\n  highlightItemOnHover?: boolean\n  side?: Side\n  align?: Align\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  defaultValue,\n  defaultValues,\n  closeOnClickOutside,\n  closeOnEscape,\n  closeOnSelect,\n  highlightItemOnHover,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionPadding,\n  lockScroll,\n  ...props\n} = Astro.props\n\nconst defaultValuesAttr =\n  defaultValues === undefined ? undefined : JSON.stringify(defaultValues)\n---\n\n<div\n  data-slot=\"dropdown-menu\"\n  data-default-open={defaultOpen}\n  data-default-value={defaultValue === null ? \"\" : defaultValue}\n  data-default-values={defaultValuesAttr}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-close-on-select={closeOnSelect}\n  data-highlight-item-on-hover={highlightItemOnHover}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-avoid-collisions={avoidCollisions}\n  data-collision-padding={collisionPadding}\n  data-lock-scroll={lockScroll}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dropdown-menu\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -25,17 +25,17 @@
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> &\n  HTMLAttributes<\"a\"> & {\n    as?: \"button\" | \"a\"\n    disabled?: boolean\n    variant?: \"default\" | \"destructive\"\n    inset?: boolean\n  }\n\nconst {\n  as: Tag = \"href\" in Astro.props ? \"a\" : \"button\",\n  class: className,\n  type = \"button\",\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<Tag\n  data-slot=\"dropdown-menu-item\"\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={Tag === \"button\" && disabled ? true : undefined}\n  type={Tag === \"button\" ? type : undefined}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n\n<script>\n  // Data Slot owns selection; links also need native keyboard activation.\n  document.addEventListener(\n    \"keydown\",\n    (event) => {\n      if (\n        event.defaultPrevented ||\n        event.isComposing ||\n        ![\"Enter\", \" \"].includes(event.key)\n      )\n        return\n      const item =\n        event.target instanceof Element\n          ? event.target.closest('[data-slot=\"dropdown-menu-item\"][href]')\n          : null\n      if (\n        !(item instanceof HTMLAnchorElement) ||\n        item.getAttribute(\"aria-disabled\") === \"true\"\n      )\n        return\n      event.preventDefault()\n      event.stopPropagation()\n      item.click()\n    },\n    true\n  )\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> &\n  HTMLAttributes<\"a\"> & {\n    as?: \"button\" | \"a\"\n    disabled?: boolean\n    variant?: \"default\" | \"destructive\"\n    inset?: boolean\n  }\n\nconst {\n  as: Tag = \"href\" in Astro.props ? \"a\" : \"button\",\n  class: className,\n  type = \"button\",\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<Tag\n  data-slot=\"dropdown-menu-item\"\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={Tag === \"button\" && disabled ? true : undefined}\n  type={Tag === \"button\" ? type : undefined}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n\n<script>\n  // Data Slot owns selection; links also need native keyboard activation.\n  document.addEventListener(\n    \"keydown\",\n    (event) => {\n      if (\n        event.defaultPrevented ||\n        event.isComposing ||\n        ![\"Enter\", \" \"].includes(event.key)\n      )\n        return\n      const item =\n        event.target instanceof Element\n          ? event.target.closest('[data-slot=\"dropdown-menu-item\"][href]')\n          : null\n      if (\n        !(item instanceof HTMLAnchorElement) ||\n        item.getAttribute(\"aria-disabled\") === \"true\"\n      )\n        return\n      event.preventDefault()\n      event.stopPropagation()\n      item.click()\n    },\n    true\n  )\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-radio-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-radio-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-radio-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-radio-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-radio-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-radio-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-radio-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-radio-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-radio-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-checkbox-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-checkbox-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-checkbox-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-checkbox-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-checkbox-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-checkbox-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-checkbox-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-checkbox-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
@@ -45,7 +45,7 @@
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-label.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  inset?: boolean\n}\n\nconst { class: className, inset, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"dropdown-menu-label\"\n  data-inset={inset}\n  class={cn(\"text-muted-foreground px-2 py-1.5 text-xs data-inset:pl-7.5\", className)}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  inset?: boolean\n}\n\nconst { class: className, inset, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"dropdown-menu-label\"\n  data-inset={inset || undefined}\n  class={cn(\"text-muted-foreground px-2 py-1.5 text-xs data-inset:pl-7.5\", className)}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/header.json b/public/r/styles/base-mira/header.json
index fa7ff8b4c..d543c8cfb 100644
--- a/public/r/styles/base-mira/header.json
+++ b/public/r/styles/base-mira/header.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/header/header.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-1.5 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-lg border bg-background mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-1.5 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-lg border bg-background mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/icon.json b/public/r/styles/base-mira/icon.json
index 08bcfdfad..2dd8ce89c 100644
--- a/public/r/styles/base-mira/icon.json
+++ b/public/r/styles/base-mira/icon.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/ui/icon/icon.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = Omit<HTMLAttributes<\"svg\">, \"name\" | \"href\"> & {\n  href?: HTMLAttributes<\"a\">[\"href\"]\n  name?: string | number\n}\n\nconst { name, href, ...props } = Astro.props\n\nconst hrefMap = {\n  \"x.com\": \"x\",\n  twitter: \"twitter\",\n  facebook: \"facebook\",\n  instagram: \"instagram\",\n  pinterest: \"pinterest\",\n  youtube: \"youtube\",\n  tiktok: \"tiktok\",\n  snapchat: \"snapchat\",\n  reddit: \"reddit\",\n  tumblr: \"tumblr\",\n  \"wa.me\": \"whatsapp\",\n  telegram: \"telegram\",\n  discord: \"discord\",\n  vimeo: \"vimeo\",\n  flickr: \"flickr\",\n  yelp: \"yelp\",\n  spotify: \"spotify\",\n  behance: \"behance\",\n  dribbble: \"dribbble\",\n  soundcloud: \"soundcloud\",\n  github: \"github\",\n  twitch: \"twitch\",\n  \"tel:\": \"phone\",\n  \"mailto:\": \"mail\",\n  \"maps.app.goo.gl\": \"map-pin\",\n  linkedin: \"linkedin\",\n} as const\n\ntype Source = \"lucide\" | \"simple\"\n\nconst icons: Record<Source, Record<string, () => Promise<unknown>>> = {\n  lucide: import.meta.glob(\"/node_modules/lucide-static/icons/*.svg\"),\n  simple: import.meta.glob(\"/node_modules/simple-icons/icons/*.svg\"),\n}\n\nconst pathFor = (source: Source, icon: string) =>\n  source === \"lucide\"\n    ? `/node_modules/lucide-static/icons/${icon}.svg`\n    : `/node_modules/simple-icons/icons/${icon}.svg`\n\n// Resolve an icon by explicit name, or derive one from a link href.\n// Names may be prefixed with `lucide:` or `simple:` to pick a set when both\n// sets contain the same name (for example `github` or `figma`).\nconst hasName = name != null && name !== \"\"\n\nconst resolve = () => {\n  let key = hasName ? String(name) : undefined\n  let order: Source[] = [\"lucide\", \"simple\"]\n\n  if (!key && href) {\n    const hrefKey = Object.keys(hrefMap).find((candidate) =>\n      href.toString().includes(candidate)\n    )\n    if (hrefKey) {\n      key = hrefMap[hrefKey as keyof typeof hrefMap]\n      order = [\"simple\", \"lucide\"]\n    }\n  }\n\n  const linkIcon = {\n    source: \"lucide\" as const,\n    path: pathFor(\"lucide\", \"link\"),\n  }\n\n  if (!key) return href ? linkIcon : undefined\n  if (key === \"x.com\") key = \"simple:x\"\n\n  const [prefix, icon] = key.includes(\":\") ? key.split(\":\") : [undefined, key]\n  if (prefix === \"lucide\" || prefix === \"simple\") order = [prefix]\n\n  for (const source of order) {\n    const path = pathFor(source, icon)\n    if (path in icons[source]) return { source, path }\n  }\n\n  // A link always gets an icon, even when its brand has no logo in either set\n  // (Simple Icons removed LinkedIn, for example).\n  if (!hasName && href) return linkIcon\n\n  return undefined\n}\n\nconst resolved = resolve()\nconst module = resolved\n  ? ((await icons[resolved.source][resolved.path]()) as { default?: any })\n  : undefined\nconst Comp = module?.default\n\nconst isLabelled =\n  \"aria-label\" in props || \"aria-labelledby\" in props || \"role\" in props\n---\n\n{Comp && resolved && (\n  <Comp\n    height={24}\n    width={24}\n    fill={resolved.source === \"simple\" ? \"currentColor\" : \"none\"}\n    class=\"size-[1em] text-base\"\n    aria-hidden={isLabelled ? undefined : \"true\"}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = Omit<HTMLAttributes<\"svg\">, \"name\" | \"href\"> & {\n  href?: HTMLAttributes<\"a\">[\"href\"]\n  name?: string | number\n}\n\nconst { name, href, \"data-slot\": dataSlot = \"icon\", ...props } = Astro.props\n\nconst hrefMap = {\n  \"x.com\": \"x\",\n  twitter: \"twitter\",\n  facebook: \"facebook\",\n  instagram: \"instagram\",\n  pinterest: \"pinterest\",\n  youtube: \"youtube\",\n  tiktok: \"tiktok\",\n  snapchat: \"snapchat\",\n  reddit: \"reddit\",\n  tumblr: \"tumblr\",\n  \"wa.me\": \"whatsapp\",\n  telegram: \"telegram\",\n  discord: \"discord\",\n  vimeo: \"vimeo\",\n  flickr: \"flickr\",\n  yelp: \"yelp\",\n  spotify: \"spotify\",\n  behance: \"behance\",\n  dribbble: \"dribbble\",\n  soundcloud: \"soundcloud\",\n  github: \"github\",\n  twitch: \"twitch\",\n  \"tel:\": \"phone\",\n  \"mailto:\": \"mail\",\n  \"maps.app.goo.gl\": \"map-pin\",\n  linkedin: \"linkedin\",\n} as const\n\ntype Source = \"lucide\" | \"simple\"\n\nconst icons: Record<Source, Record<string, () => Promise<unknown>>> = {\n  lucide: import.meta.glob(\"/node_modules/lucide-static/icons/*.svg\"),\n  simple: import.meta.glob(\"/node_modules/simple-icons/icons/*.svg\"),\n}\n\nconst pathFor = (source: Source, icon: string) =>\n  source === \"lucide\"\n    ? `/node_modules/lucide-static/icons/${icon}.svg`\n    : `/node_modules/simple-icons/icons/${icon}.svg`\n\n// Resolve an icon by explicit name, or derive one from a link href.\n// Names may be prefixed with `lucide:` or `simple:` to pick a set when both\n// sets contain the same name (for example `github` or `figma`).\nconst hasName = name != null && name !== \"\"\n\nconst resolve = () => {\n  let key = hasName ? String(name) : undefined\n  let order: Source[] = [\"lucide\", \"simple\"]\n\n  if (!key && href) {\n    const hrefKey = Object.keys(hrefMap).find((candidate) =>\n      href.toString().includes(candidate)\n    )\n    if (hrefKey) {\n      key = hrefMap[hrefKey as keyof typeof hrefMap]\n      order = [\"simple\", \"lucide\"]\n    }\n  }\n\n  const linkIcon = {\n    source: \"lucide\" as const,\n    path: pathFor(\"lucide\", \"link\"),\n  }\n\n  if (!key) return href ? linkIcon : undefined\n  if (key === \"x.com\") key = \"simple:x\"\n\n  const [prefix, icon] = key.includes(\":\") ? key.split(\":\") : [undefined, key]\n  if (prefix === \"lucide\" || prefix === \"simple\") order = [prefix]\n\n  for (const source of order) {\n    const path = pathFor(source, icon)\n    if (path in icons[source]) return { source, path }\n  }\n\n  // A link always gets an icon, even when its brand has no logo in either set\n  // (Simple Icons removed LinkedIn, for example).\n  if (!hasName && href) return linkIcon\n\n  return undefined\n}\n\nconst resolved = resolve()\nconst module = resolved\n  ? ((await icons[resolved.source][resolved.path]()) as { default?: any })\n  : undefined\nconst Comp = module?.default\n\nconst isLabelled =\n  \"aria-label\" in props || \"aria-labelledby\" in props || \"role\" in props\n---\n\n{Comp && resolved && (\n  <Comp\n    height={24}\n    width={24}\n    fill={resolved.source === \"simple\" ? \"currentColor\" : \"none\"}\n    class=\"size-[1em] text-base\"\n    aria-hidden={isLabelled ? undefined : \"true\"}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/item.json b/public/r/styles/base-mira/item.json
index b51622a48..bf169e6bc 100644
--- a/public/r/styles/base-mira/item.json
+++ b/public/r/styles/base-mira/item.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/item/item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-md border text-xs/relaxed group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2.5 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = href ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-md border text-xs/relaxed group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2.5 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/layout.json b/public/r/styles/base-mira/layout.json
index cf7219c6e..dc22c1d3f 100644
--- a/public/r/styles/base-mira/layout.json
+++ b/public/r/styles/base-mira/layout.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/layout/layout.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport \"@/styles/global.css\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"html\">\n\nconst { class: className, lang, ...props } = Astro.props\n---\n\n<html\n  class={cn(\n    \"bg-background text-foreground has-data-[variant=inset]:bg-sidebar overscroll-none scroll-smooth\",\n    className\n  )}\n  data-slot=\"layout\"\n  lang={Astro.currentLocale || \"en\"}\n  {...props}\n>\n  <slot />\n</html>\n\n<style is:global>\n  :root {\n    color-scheme: light;\n  }\n\n  .dark {\n    color-scheme: dark;\n  }\n\n  @view-transition {\n    navigation: auto;\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport \"@/styles/global.css\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"html\">\n\nconst { class: className, lang, ...props } = Astro.props\n---\n\n<html\n  class={cn(\n    \"bg-background text-foreground has-data-[variant=inset]:bg-sidebar overscroll-none scroll-smooth\",\n    className\n  )}\n  data-slot=\"layout\"\n  lang={lang || Astro.currentLocale || \"en\"}\n  {...props}\n>\n  <slot />\n</html>\n\n<style is:global>\n  :root {\n    color-scheme: light;\n  }\n\n  .dark {\n    color-scheme: dark;\n  }\n\n  @view-transition {\n    navigation: auto;\n  }\n</style>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/logo.json b/public/r/styles/base-mira/logo.json
index 801c2231e..c9c868432 100644
--- a/public/r/styles/base-mira/logo.json
+++ b/public/r/styles/base-mira/logo.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/logo/logo.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst { class: className, href, ...props } = Astro.props\n\nconst Comp = href ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-sm font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-sm font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/logo/logo-text.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<span class={cn(\"text-lg\", className)} {...props}>\n  <slot />\n</span>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"logo-text\",\n  ...props\n} = Astro.props\n---\n\n<span class={cn(\"text-lg\", className)} data-slot={dataSlot} {...props}>\n  <slot />\n</span>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/marquee.json b/public/r/styles/base-mira/marquee.json
index 25fc597f2..c932b246a 100644
--- a/public/r/styles/base-mira/marquee.json
+++ b/public/r/styles/base-mira/marquee.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  data-slot={dataSlot}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/navigation-menu.json b/public/r/styles/base-mira/navigation-menu.json
index f8a15af6c..5367381e9 100644
--- a/public/r/styles/base-mira/navigation-menu.json
+++ b/public/r/styles/base-mira/navigation-menu.json
@@ -25,7 +25,7 @@
     },
     {
       "path": "src/components/ui/navigation-menu/navigation-menu-link.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  active?: boolean\n}\n\nconst { class: className, active, ...props } = Astro.props\n---\n\n<a\n  data-slot=\"navigation-menu-link\"\n  data-active={active ? \"true\" : undefined}\n  class={cn(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/30 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-lg p-2 text-xs/relaxed transition-all outline-none focus-visible:ring-2 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 in-data-[slot=navigation-menu-content]:rounded-md\", className)}\n  {...props}\n>\n  <slot />\n</a>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  active?: boolean\n}\n\nconst {\n  class: className,\n  active,\n  \"aria-current\": ariaCurrent = active ? \"page\" : undefined,\n  ...props\n} = Astro.props\n---\n\n<a\n  data-slot=\"navigation-menu-link\"\n  data-active={active ? \"true\" : undefined}\n  aria-current={ariaCurrent}\n  class={cn(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/30 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-lg p-2 text-xs/relaxed transition-all outline-none focus-visible:ring-2 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 in-data-[slot=navigation-menu-content]:rounded-md\", className)}\n  {...props}\n>\n  <slot />\n</a>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/price.json b/public/r/styles/base-mira/price.json
index b3dccef23..b19668ba9 100644
--- a/public/r/styles/base-mira/price.json
+++ b/public/r/styles/base-mira/price.json
@@ -6,17 +6,17 @@
   "files": [
     {
       "path": "src/components/ui/price/price.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div class={cn(\"flex flex-wrap items-center gap-x-2\", className)} {...props}>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"price\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\"flex flex-wrap items-center gap-x-2\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/price/price-unit.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<span\n  class={cn(\"text-muted-foreground text-sm leading-tight\", className)}\n  {...props}\n>\n  / <slot />\n</span>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"price-unit\",\n  ...props\n} = Astro.props\n---\n\n<span\n  class={cn(\"text-muted-foreground text-sm leading-tight\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  / <slot />\n</span>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/price/price-value.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-full bg-muted px-2 py-0.5 text-[0.625rem] font-medium text-muted-foreground\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-full bg-muted px-2 py-0.5 text-[0.625rem] font-medium text-muted-foreground\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/rating.json b/public/r/styles/base-mira/rating.json
index 7490c6dbb..57afb7920 100644
--- a/public/r/styles/base-mira/rating.json
+++ b/public/r/styles/base-mira/rating.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/rating/rating.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport Star from \"@lucide/astro/icons/star\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  value?: number\n}\n\nconst {\n  value = 5,\n  class: className,\n  \"aria-label\": ariaLabel = `Rated ${value} out of 5`,\n  ...props\n} = Astro.props\n---\n\n<div\n  role=\"img\"\n  aria-label={ariaLabel}\n  class={cn(\"flex items-center gap-1 text-base\", className)}\n  {...props}\n>\n  {Array.from({ length: 5 }).map((_, index) => {\n    const fillPercentage =\n      index < Math.floor(value)\n        ? 100\n        : index === Math.floor(value)\n          ? (value % 1) * 100\n          : 0\n\n    return (\n      <span\n        aria-hidden=\"true\"\n        class=\"text-muted-foreground/25 relative inline-flex size-[1em]\"\n      >\n        <Star class=\"size-[1em] fill-current\" />\n        {fillPercentage > 0 && (\n          <span\n            class=\"text-primary absolute inset-0 overflow-hidden\"\n            style={{ width: `${fillPercentage}%` }}\n          >\n            <Star class=\"size-[1em] fill-current\" />\n          </span>\n        )}\n      </span>\n    )\n  })}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport Star from \"@lucide/astro/icons/star\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  value?: number\n}\n\nconst {\n  value = 5,\n  class: className,\n  \"aria-label\": ariaLabel = `Rated ${value} out of 5`,\n  \"data-slot\": dataSlot = \"rating\",\n  ...props\n} = Astro.props\n---\n\n<div\n  role=\"img\"\n  aria-label={ariaLabel}\n  class={cn(\"flex items-center gap-1 text-base\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  {Array.from({ length: 5 }).map((_, index) => {\n    const fillPercentage =\n      index < Math.floor(value)\n        ? 100\n        : index === Math.floor(value)\n          ? (value % 1) * 100\n          : 0\n\n    return (\n      <span\n        aria-hidden=\"true\"\n        class=\"text-muted-foreground/25 relative inline-flex size-[1em]\"\n      >\n        <Star class=\"size-[1em] fill-current\" />\n        {fillPercentage > 0 && (\n          <span\n            class=\"text-primary absolute inset-0 overflow-hidden\"\n            style={{ width: `${fillPercentage}%` }}\n          >\n            <Star class=\"size-[1em] fill-current\" />\n          </span>\n        )}\n      </span>\n    )\n  })}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/section.json b/public/r/styles/base-mira/section.json
index 151aac933..2bc879462 100644
--- a/public/r/styles/base-mira/section.json
+++ b/public/r/styles/base-mira/section.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/section/section.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-10 py-[var(--section-padding,--spacing(12))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-12 rounded-lg bg-background ring-1 ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-10 py-[var(--section-padding,--spacing(12))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-12 rounded-lg bg-background ring-1 ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/theme-toggle.json b/public/r/styles/base-mira/theme-toggle.json
index 60e1a6dcc..9fbadda9c 100644
--- a/public/r/styles/base-mira/theme-toggle.json
+++ b/public/r/styles/base-mira/theme-toggle.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/ui/theme-toggle/theme-toggle.astro",
-      "content": "---\nimport type { ComponentProps } from \"astro/types\"\nimport Moon from \"@lucide/astro/icons/moon\"\nimport Sun from \"@lucide/astro/icons/sun\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = ComponentProps<typeof Button>\n\nconst {\n  class: className,\n  variant = \"ghost\",\n  size = \"icon-sm\",\n  ...props\n} = Astro.props\n---\n\n<Button\n  data-theme-toggle\n  aria-label=\"Toggle theme\"\n  variant={variant}\n  size={size}\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <Sun class=\"dark:hidden\" />\n  <Moon class=\"hidden dark:block\" />\n  <span class=\"sr-only\">Toggle theme</span>\n</Button>\n\n<script is:inline>\n  if (!window.__themeToggleHandlersInitialized) {\n    window.__themeToggleHandlersInitialized = true\n\n    const syncThemeToggles = () => {\n      const isDark = document.documentElement.classList.contains(\"dark\")\n\n      document.querySelectorAll(\"[data-theme-toggle]\").forEach((toggle) => {\n        if (!(toggle instanceof HTMLButtonElement)) return\n\n        toggle.setAttribute(\"aria-pressed\", isDark ? \"true\" : \"false\")\n        toggle.setAttribute(\"data-state\", isDark ? \"on\" : \"off\")\n\n        if (isDark) {\n          toggle.setAttribute(\"data-pressed\", \"\")\n        } else {\n          toggle.removeAttribute(\"data-pressed\")\n        }\n      })\n    }\n\n    syncThemeToggles()\n\n    const observer = new MutationObserver(syncThemeToggles)\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n    })\n\n    document.addEventListener(\"click\", (event) => {\n      const target = event.target\n\n      if (!(target instanceof Element)) return\n\n      const toggle = target.closest(\"[data-theme-toggle]\")\n\n      if (!(toggle instanceof HTMLButtonElement)) return\n      if (toggle.disabled) return\n\n      const isDark = document.documentElement.classList.contains(\"dark\")\n      const nextTheme = isDark ? \"light\" : \"dark\"\n\n      if (typeof window.__setTheme === \"function\") {\n        window.__setTheme(nextTheme)\n        return\n      }\n\n      document.documentElement.classList[\n        nextTheme === \"dark\" ? \"add\" : \"remove\"\n      ](\"dark\")\n    })\n  }\n</script>\n",
+      "content": "---\nimport type { ComponentProps } from \"astro/types\"\nimport Moon from \"@lucide/astro/icons/moon\"\nimport Sun from \"@lucide/astro/icons/sun\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = ComponentProps<typeof Button> & {\n  disabled?: boolean\n}\n\nconst {\n  class: className,\n  variant = \"ghost\",\n  size = \"icon-sm\",\n  ...props\n} = Astro.props\n---\n\n<Button\n  data-theme-toggle\n  aria-label=\"Toggle theme\"\n  variant={variant}\n  size={size}\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <Sun class=\"dark:hidden\" />\n  <Moon class=\"hidden dark:block\" />\n  <span class=\"sr-only\">Toggle theme</span>\n</Button>\n\n<script is:inline>\n  if (!window.__themeToggleHandlersInitialized) {\n    window.__themeToggleHandlersInitialized = true\n\n    const syncThemeToggles = () => {\n      const isDark = document.documentElement.classList.contains(\"dark\")\n\n      document.querySelectorAll(\"[data-theme-toggle]\").forEach((toggle) => {\n        if (!(toggle instanceof HTMLButtonElement)) return\n\n        toggle.setAttribute(\"aria-pressed\", isDark ? \"true\" : \"false\")\n        toggle.setAttribute(\"data-state\", isDark ? \"on\" : \"off\")\n\n        if (isDark) {\n          toggle.setAttribute(\"data-pressed\", \"\")\n        } else {\n          toggle.removeAttribute(\"data-pressed\")\n        }\n      })\n    }\n\n    syncThemeToggles()\n    document.addEventListener(\"astro:page-load\", syncThemeToggles)\n\n    const observer = new MutationObserver(syncThemeToggles)\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n    })\n\n    document.addEventListener(\"click\", (event) => {\n      const target = event.target\n\n      if (!(target instanceof Element)) return\n\n      const toggle = target.closest(\"[data-theme-toggle]\")\n\n      if (!(toggle instanceof HTMLButtonElement)) return\n      if (toggle.disabled) return\n\n      const isDark = document.documentElement.classList.contains(\"dark\")\n      const nextTheme = isDark ? \"light\" : \"dark\"\n\n      if (typeof window.__setTheme === \"function\") {\n        window.__setTheme(nextTheme)\n        return\n      }\n\n      document.documentElement.classList[\n        nextTheme === \"dark\" ? \"add\" : \"remove\"\n      ](\"dark\")\n    })\n  }\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/toast.json b/public/r/styles/base-mira/toast.json
index d10a522a2..5f4d60d66 100644
--- a/public/r/styles/base-mira/toast.json
+++ b/public/r/styles/base-mira/toast.json
@@ -18,7 +18,7 @@
     },
     {
       "path": "src/components/ui/toast/toast-action.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  hidden = true,\n  type = \"button\",\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"toast-action\"\n  type={type}\n  class={cn(buttonVariants({ variant: \"outline\", size: \"sm\" }), className)}\n  hidden={hidden}\n  {...props}\n>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  hidden = true,\n  type = \"button\",\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"toast-action\"\n  data-variant=\"outline\"\n  data-size=\"sm\"\n  type={type}\n  class={cn(buttonVariants({ variant: \"outline\", size: \"sm\" }), className)}\n  hidden={hidden}\n  {...props}\n>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/toc.json b/public/r/styles/base-mira/toc.json
index 9dfe1fc1f..12c517d13 100644
--- a/public/r/styles/base-mira/toc.json
+++ b/public/r/styles/base-mira/toc.json
@@ -26,7 +26,7 @@
     },
     {
       "path": "src/components/ui/toc/toc-menu-link.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  depth?: number\n  isActive?: boolean\n  active?: boolean\n}\n\nconst {\n  class: className,\n  depth = 2,\n  isActive,\n  active = false,\n  ...props\n} = Astro.props\n\nconst resolvedActive = isActive ?? active\n---\n\n<a\n  data-slot=\"toc-menu-link\"\n  data-depth={depth}\n  data-active={resolvedActive ? \"true\" : undefined}\n  aria-current={resolvedActive ? \"location\" : undefined}\n  class={cn(\n    \"text-xs leading-6 text-muted-foreground hover:text-foreground data-[active=true]:text-foreground block transition-colors\",\n    depth === 3 && \"pl-4\",\n    depth >= 4 && \"pl-8\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</a>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  depth?: number\n  isActive?: boolean\n  active?: boolean\n}\n\nconst {\n  class: className,\n  depth = 2,\n  isActive,\n  active = false,\n  ...props\n} = Astro.props\n\nconst resolvedActive = isActive ?? active\n---\n\n<a\n  data-slot=\"toc-menu-link\"\n  data-depth={depth}\n  data-active={resolvedActive ? \"true\" : undefined}\n  aria-current={resolvedActive ? \"location\" : undefined}\n  class={cn(\n    \"text-xs leading-6 text-muted-foreground hover:text-foreground data-[active=true]:text-foreground block transition-colors\",\n    depth === 3 && \"ps-4\",\n    depth >= 4 && \"ps-8\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</a>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/typography.json b/public/r/styles/base-mira/typography.json
index 9c7c61630..e0dc3b115 100644
--- a/public/r/styles/base-mira/typography.json
+++ b/public/r/styles/base-mira/typography.json
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/typography/typography-blockquote.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"blockquote\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<blockquote\n  data-slot=\"typography-blockquote\"\n  data-size={size}\n  class={cn(\"mt-6 border-l-2 pl-6 italic\", sizeClass, className)}\n  {...props}\n>\n  <slot />\n</blockquote>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"blockquote\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<blockquote\n  data-slot=\"typography-blockquote\"\n  data-size={size}\n  class={cn(\"mt-6 border-s-2 ps-6 italic\", sizeClass, className)}\n  {...props}\n>\n  <slot />\n</blockquote>\n",
       "type": "registry:ui"
     },
     {
@@ -51,7 +51,7 @@
     },
     {
       "path": "src/components/ui/typography/typography-list.astro",
-      "content": "---\nimport type { Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props<Tag extends \"ul\" | \"ol\"> = Polymorphic<{ as: Tag; size?: Size }>\n\nconst {\n  as: Tag = \"ul\",\n  class: className,\n  size = \"default\",\n  ...props\n} = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<Tag\n  data-slot=\"typography-list\"\n  data-size={size}\n  data-ordered={Tag === \"ol\" ? \"\" : undefined}\n  class={cn(\n    \"my-6 ml-6\",\n    Tag === \"ol\" ? \"list-decimal\" : \"list-disc\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n",
+      "content": "---\nimport type { Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props<Tag extends \"ul\" | \"ol\"> = Polymorphic<{ as: Tag; size?: Size }>\n\nconst {\n  as: Tag = \"ul\",\n  class: className,\n  size = \"default\",\n  ...props\n} = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<Tag\n  data-slot=\"typography-list\"\n  data-size={size}\n  data-ordered={Tag === \"ol\" ? \"\" : undefined}\n  class={cn(\n    \"my-6 ms-6\",\n    Tag === \"ol\" ? \"list-decimal\" : \"list-disc\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n",
       "type": "registry:ui"
     },
     {
@@ -76,12 +76,12 @@
     },
     {
       "path": "src/components/ui/typography/typography-table-head.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-left font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/typography/typography-table-cell.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-left align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/video.json b/public/r/styles/base-mira/video.json
index ef64d9371..3c90d9280 100644
--- a/public/r/styles/base-mira/video.json
+++ b/public/r/styles/base-mira/video.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/video/video.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"src\"> & {\n  src?: string\n}\n\nconst { class: className, src, ...props } = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title=\"Embedded video\"\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-md border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-md border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/banner.json b/public/r/styles/base-nova/banner.json
index 8fe84018e..c35bd66d0 100644
--- a/public/r/styles/base-nova/banner.json
+++ b/public/r/styles/base-nova/banner.json
@@ -9,12 +9,12 @@
   "files": [
     {
       "path": "src/components/ui/banner/banner.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"aside\"> &\n  VariantProps<typeof variants> & {\n    storageKey?: string\n  }\n\nconst variants = cva(\"py-2 relative flex items-center\", {\n  variants: {\n    variant: {\n      default: \"bg-foreground text-background w-full\",\n      floating:\n        \"my-2 rounded-lg border bg-background mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, storageKey, ...props } = Astro.props\n---\n\n<aside\n  class={cn(variants({ variant }), className)}\n  data-slot=\"banner\"\n  data-banner-storage-key={storageKey}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</aside>\n\n<script>\n  const getStorageToken = (key: string) => `banner:${key}`\n\n  const syncBanners = () => {\n    document.querySelectorAll(\"[data-slot='banner']\").forEach((banner) => {\n      if (!(banner instanceof HTMLElement)) return\n      const storageKey = banner.dataset.bannerStorageKey\n      if (\n        storageKey &&\n        sessionStorage.getItem(getStorageToken(storageKey)) === \"hidden\"\n      ) {\n        banner.hidden = true\n      }\n    })\n  }\n\n  syncBanners()\n  document.addEventListener(\"astro:page-load\", syncBanners)\n\n  document.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return\n    const closeButton = event.target.closest(\"[data-slot='banner-close']\")\n    const banner = closeButton?.closest(\"[data-slot='banner']\")\n    if (!(banner instanceof HTMLElement)) return\n    banner.hidden = true\n    const storageKey = banner.dataset.bannerStorageKey\n    if (storageKey)\n      sessionStorage.setItem(getStorageToken(storageKey), \"hidden\")\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"aside\"> &\n  VariantProps<typeof variants> & {\n    storageKey?: string\n  }\n\nconst variants = cva(\"py-2 relative flex items-center\", {\n  variants: {\n    variant: {\n      default: \"bg-foreground text-background w-full\",\n      floating:\n        \"my-2 rounded-lg border bg-background mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  storageKey,\n  ...props\n} = Astro.props\n---\n\n<aside\n  class={cn(variants({ variant }), className)}\n  data-slot=\"banner\"\n  data-banner-storage-key={storageKey}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</aside>\n\n<script>\n  const getStorageToken = (key: string) => `banner:${key}`\n\n  const syncBanners = () => {\n    document.querySelectorAll(\"[data-slot='banner']\").forEach((banner) => {\n      if (!(banner instanceof HTMLElement)) return\n      const storageKey = banner.dataset.bannerStorageKey\n      if (\n        storageKey &&\n        sessionStorage.getItem(getStorageToken(storageKey)) === \"hidden\"\n      ) {\n        banner.hidden = true\n      }\n    })\n  }\n\n  syncBanners()\n  document.addEventListener(\"astro:page-load\", syncBanners)\n\n  document.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return\n    const closeButton = event.target.closest(\"[data-slot='banner-close']\")\n    const banner = closeButton?.closest(\"[data-slot='banner']\")\n    if (!(banner instanceof HTMLElement)) return\n    banner.hidden = true\n    const storageKey = banner.dataset.bannerStorageKey\n    if (storageKey)\n      sessionStorage.setItem(getStorageToken(storageKey), \"hidden\")\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/banner/banner-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst { class: className, showClose = true, ...props } = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-sm text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst {\n  class: className,\n  showClose = true,\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-sm text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/carousel.json b/public/r/styles/base-nova/carousel.json
index 3e3052ad3..7971e22fc 100644
--- a/public/r/styles/base-nova/carousel.json
+++ b/public/r/styles/base-nova/carousel.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = root.querySelector<HTMLElement>(\n        '[data-slot=\"carousel-content\"]'\n      )\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = root.querySelectorAll<HTMLButtonElement>(\n        '[data-slot=\"carousel-previous\"]'\n      )\n      const next = root.querySelectorAll<HTMLButtonElement>(\n        '[data-slot=\"carousel-next\"]'\n      )\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -28,12 +28,12 @@
     },
     {
       "path": "src/components/ui/carousel/carousel-next.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-previous.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/dropdown-menu.json b/public/r/styles/base-nova/dropdown-menu.json
index 263ba761c..9e5ca1fb0 100644
--- a/public/r/styles/base-nova/dropdown-menu.json
+++ b/public/r/styles/base-nova/dropdown-menu.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { Align, Side } from \"@data-slot/dropdown-menu\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  defaultValue?: string | null\n  defaultValues?: string[]\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  closeOnSelect?: boolean\n  highlightItemOnHover?: boolean\n  side?: Side\n  align?: Align\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  defaultValue,\n  defaultValues,\n  closeOnClickOutside,\n  closeOnEscape,\n  closeOnSelect,\n  highlightItemOnHover,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionPadding,\n  lockScroll,\n  ...props\n} = Astro.props\n\nconst defaultValuesAttr =\n  defaultValues === undefined ? undefined : JSON.stringify(defaultValues)\n---\n\n<div\n  data-slot=\"dropdown-menu\"\n  data-default-open={defaultOpen}\n  data-default-value={defaultValue}\n  data-default-values={defaultValuesAttr}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-close-on-select={closeOnSelect}\n  data-highlight-item-on-hover={highlightItemOnHover}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-avoid-collisions={avoidCollisions}\n  data-collision-padding={collisionPadding}\n  data-lock-scroll={lockScroll}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dropdown-menu\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { Align, Side } from \"@data-slot/dropdown-menu\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  defaultValue?: string | null\n  defaultValues?: string[]\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  closeOnSelect?: boolean\n  highlightItemOnHover?: boolean\n  side?: Side\n  align?: Align\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  defaultValue,\n  defaultValues,\n  closeOnClickOutside,\n  closeOnEscape,\n  closeOnSelect,\n  highlightItemOnHover,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionPadding,\n  lockScroll,\n  ...props\n} = Astro.props\n\nconst defaultValuesAttr =\n  defaultValues === undefined ? undefined : JSON.stringify(defaultValues)\n---\n\n<div\n  data-slot=\"dropdown-menu\"\n  data-default-open={defaultOpen}\n  data-default-value={defaultValue === null ? \"\" : defaultValue}\n  data-default-values={defaultValuesAttr}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-close-on-select={closeOnSelect}\n  data-highlight-item-on-hover={highlightItemOnHover}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-avoid-collisions={avoidCollisions}\n  data-collision-padding={collisionPadding}\n  data-lock-scroll={lockScroll}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dropdown-menu\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -25,17 +25,17 @@
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> &\n  HTMLAttributes<\"a\"> & {\n    as?: \"button\" | \"a\"\n    disabled?: boolean\n    variant?: \"default\" | \"destructive\"\n    inset?: boolean\n  }\n\nconst {\n  as: Tag = \"href\" in Astro.props ? \"a\" : \"button\",\n  class: className,\n  type = \"button\",\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<Tag\n  data-slot=\"dropdown-menu-item\"\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={Tag === \"button\" && disabled ? true : undefined}\n  type={Tag === \"button\" ? type : undefined}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n\n<script>\n  // Data Slot owns selection; links also need native keyboard activation.\n  document.addEventListener(\n    \"keydown\",\n    (event) => {\n      if (\n        event.defaultPrevented ||\n        event.isComposing ||\n        ![\"Enter\", \" \"].includes(event.key)\n      )\n        return\n      const item =\n        event.target instanceof Element\n          ? event.target.closest('[data-slot=\"dropdown-menu-item\"][href]')\n          : null\n      if (\n        !(item instanceof HTMLAnchorElement) ||\n        item.getAttribute(\"aria-disabled\") === \"true\"\n      )\n        return\n      event.preventDefault()\n      event.stopPropagation()\n      item.click()\n    },\n    true\n  )\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> &\n  HTMLAttributes<\"a\"> & {\n    as?: \"button\" | \"a\"\n    disabled?: boolean\n    variant?: \"default\" | \"destructive\"\n    inset?: boolean\n  }\n\nconst {\n  as: Tag = \"href\" in Astro.props ? \"a\" : \"button\",\n  class: className,\n  type = \"button\",\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<Tag\n  data-slot=\"dropdown-menu-item\"\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={Tag === \"button\" && disabled ? true : undefined}\n  type={Tag === \"button\" ? type : undefined}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n\n<script>\n  // Data Slot owns selection; links also need native keyboard activation.\n  document.addEventListener(\n    \"keydown\",\n    (event) => {\n      if (\n        event.defaultPrevented ||\n        event.isComposing ||\n        ![\"Enter\", \" \"].includes(event.key)\n      )\n        return\n      const item =\n        event.target instanceof Element\n          ? event.target.closest('[data-slot=\"dropdown-menu-item\"][href]')\n          : null\n      if (\n        !(item instanceof HTMLAnchorElement) ||\n        item.getAttribute(\"aria-disabled\") === \"true\"\n      )\n        return\n      event.preventDefault()\n      event.stopPropagation()\n      item.click()\n    },\n    true\n  )\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-radio-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-radio-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-radio-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-radio-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-radio-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-radio-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-radio-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-radio-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-radio-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-checkbox-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-checkbox-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-checkbox-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-checkbox-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-checkbox-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-checkbox-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-checkbox-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-checkbox-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
@@ -45,7 +45,7 @@
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-label.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  inset?: boolean\n}\n\nconst { class: className, inset, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"dropdown-menu-label\"\n  data-inset={inset}\n  class={cn(\"text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7\", className)}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  inset?: boolean\n}\n\nconst { class: className, inset, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"dropdown-menu-label\"\n  data-inset={inset || undefined}\n  class={cn(\"text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7\", className)}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/header.json b/public/r/styles/base-nova/header.json
index d71621349..cd55b86d5 100644
--- a/public/r/styles/base-nova/header.json
+++ b/public/r/styles/base-nova/header.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/header/header.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-lg border bg-background mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-lg border bg-background mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/icon.json b/public/r/styles/base-nova/icon.json
index 08bcfdfad..2dd8ce89c 100644
--- a/public/r/styles/base-nova/icon.json
+++ b/public/r/styles/base-nova/icon.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/ui/icon/icon.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = Omit<HTMLAttributes<\"svg\">, \"name\" | \"href\"> & {\n  href?: HTMLAttributes<\"a\">[\"href\"]\n  name?: string | number\n}\n\nconst { name, href, ...props } = Astro.props\n\nconst hrefMap = {\n  \"x.com\": \"x\",\n  twitter: \"twitter\",\n  facebook: \"facebook\",\n  instagram: \"instagram\",\n  pinterest: \"pinterest\",\n  youtube: \"youtube\",\n  tiktok: \"tiktok\",\n  snapchat: \"snapchat\",\n  reddit: \"reddit\",\n  tumblr: \"tumblr\",\n  \"wa.me\": \"whatsapp\",\n  telegram: \"telegram\",\n  discord: \"discord\",\n  vimeo: \"vimeo\",\n  flickr: \"flickr\",\n  yelp: \"yelp\",\n  spotify: \"spotify\",\n  behance: \"behance\",\n  dribbble: \"dribbble\",\n  soundcloud: \"soundcloud\",\n  github: \"github\",\n  twitch: \"twitch\",\n  \"tel:\": \"phone\",\n  \"mailto:\": \"mail\",\n  \"maps.app.goo.gl\": \"map-pin\",\n  linkedin: \"linkedin\",\n} as const\n\ntype Source = \"lucide\" | \"simple\"\n\nconst icons: Record<Source, Record<string, () => Promise<unknown>>> = {\n  lucide: import.meta.glob(\"/node_modules/lucide-static/icons/*.svg\"),\n  simple: import.meta.glob(\"/node_modules/simple-icons/icons/*.svg\"),\n}\n\nconst pathFor = (source: Source, icon: string) =>\n  source === \"lucide\"\n    ? `/node_modules/lucide-static/icons/${icon}.svg`\n    : `/node_modules/simple-icons/icons/${icon}.svg`\n\n// Resolve an icon by explicit name, or derive one from a link href.\n// Names may be prefixed with `lucide:` or `simple:` to pick a set when both\n// sets contain the same name (for example `github` or `figma`).\nconst hasName = name != null && name !== \"\"\n\nconst resolve = () => {\n  let key = hasName ? String(name) : undefined\n  let order: Source[] = [\"lucide\", \"simple\"]\n\n  if (!key && href) {\n    const hrefKey = Object.keys(hrefMap).find((candidate) =>\n      href.toString().includes(candidate)\n    )\n    if (hrefKey) {\n      key = hrefMap[hrefKey as keyof typeof hrefMap]\n      order = [\"simple\", \"lucide\"]\n    }\n  }\n\n  const linkIcon = {\n    source: \"lucide\" as const,\n    path: pathFor(\"lucide\", \"link\"),\n  }\n\n  if (!key) return href ? linkIcon : undefined\n  if (key === \"x.com\") key = \"simple:x\"\n\n  const [prefix, icon] = key.includes(\":\") ? key.split(\":\") : [undefined, key]\n  if (prefix === \"lucide\" || prefix === \"simple\") order = [prefix]\n\n  for (const source of order) {\n    const path = pathFor(source, icon)\n    if (path in icons[source]) return { source, path }\n  }\n\n  // A link always gets an icon, even when its brand has no logo in either set\n  // (Simple Icons removed LinkedIn, for example).\n  if (!hasName && href) return linkIcon\n\n  return undefined\n}\n\nconst resolved = resolve()\nconst module = resolved\n  ? ((await icons[resolved.source][resolved.path]()) as { default?: any })\n  : undefined\nconst Comp = module?.default\n\nconst isLabelled =\n  \"aria-label\" in props || \"aria-labelledby\" in props || \"role\" in props\n---\n\n{Comp && resolved && (\n  <Comp\n    height={24}\n    width={24}\n    fill={resolved.source === \"simple\" ? \"currentColor\" : \"none\"}\n    class=\"size-[1em] text-base\"\n    aria-hidden={isLabelled ? undefined : \"true\"}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = Omit<HTMLAttributes<\"svg\">, \"name\" | \"href\"> & {\n  href?: HTMLAttributes<\"a\">[\"href\"]\n  name?: string | number\n}\n\nconst { name, href, \"data-slot\": dataSlot = \"icon\", ...props } = Astro.props\n\nconst hrefMap = {\n  \"x.com\": \"x\",\n  twitter: \"twitter\",\n  facebook: \"facebook\",\n  instagram: \"instagram\",\n  pinterest: \"pinterest\",\n  youtube: \"youtube\",\n  tiktok: \"tiktok\",\n  snapchat: \"snapchat\",\n  reddit: \"reddit\",\n  tumblr: \"tumblr\",\n  \"wa.me\": \"whatsapp\",\n  telegram: \"telegram\",\n  discord: \"discord\",\n  vimeo: \"vimeo\",\n  flickr: \"flickr\",\n  yelp: \"yelp\",\n  spotify: \"spotify\",\n  behance: \"behance\",\n  dribbble: \"dribbble\",\n  soundcloud: \"soundcloud\",\n  github: \"github\",\n  twitch: \"twitch\",\n  \"tel:\": \"phone\",\n  \"mailto:\": \"mail\",\n  \"maps.app.goo.gl\": \"map-pin\",\n  linkedin: \"linkedin\",\n} as const\n\ntype Source = \"lucide\" | \"simple\"\n\nconst icons: Record<Source, Record<string, () => Promise<unknown>>> = {\n  lucide: import.meta.glob(\"/node_modules/lucide-static/icons/*.svg\"),\n  simple: import.meta.glob(\"/node_modules/simple-icons/icons/*.svg\"),\n}\n\nconst pathFor = (source: Source, icon: string) =>\n  source === \"lucide\"\n    ? `/node_modules/lucide-static/icons/${icon}.svg`\n    : `/node_modules/simple-icons/icons/${icon}.svg`\n\n// Resolve an icon by explicit name, or derive one from a link href.\n// Names may be prefixed with `lucide:` or `simple:` to pick a set when both\n// sets contain the same name (for example `github` or `figma`).\nconst hasName = name != null && name !== \"\"\n\nconst resolve = () => {\n  let key = hasName ? String(name) : undefined\n  let order: Source[] = [\"lucide\", \"simple\"]\n\n  if (!key && href) {\n    const hrefKey = Object.keys(hrefMap).find((candidate) =>\n      href.toString().includes(candidate)\n    )\n    if (hrefKey) {\n      key = hrefMap[hrefKey as keyof typeof hrefMap]\n      order = [\"simple\", \"lucide\"]\n    }\n  }\n\n  const linkIcon = {\n    source: \"lucide\" as const,\n    path: pathFor(\"lucide\", \"link\"),\n  }\n\n  if (!key) return href ? linkIcon : undefined\n  if (key === \"x.com\") key = \"simple:x\"\n\n  const [prefix, icon] = key.includes(\":\") ? key.split(\":\") : [undefined, key]\n  if (prefix === \"lucide\" || prefix === \"simple\") order = [prefix]\n\n  for (const source of order) {\n    const path = pathFor(source, icon)\n    if (path in icons[source]) return { source, path }\n  }\n\n  // A link always gets an icon, even when its brand has no logo in either set\n  // (Simple Icons removed LinkedIn, for example).\n  if (!hasName && href) return linkIcon\n\n  return undefined\n}\n\nconst resolved = resolve()\nconst module = resolved\n  ? ((await icons[resolved.source][resolved.path]()) as { default?: any })\n  : undefined\nconst Comp = module?.default\n\nconst isLabelled =\n  \"aria-label\" in props || \"aria-labelledby\" in props || \"role\" in props\n---\n\n{Comp && resolved && (\n  <Comp\n    height={24}\n    width={24}\n    fill={resolved.source === \"simple\" ? \"currentColor\" : \"none\"}\n    class=\"size-[1em] text-base\"\n    aria-hidden={isLabelled ? undefined : \"true\"}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/item.json b/public/r/styles/base-nova/item.json
index 8635a4e84..8482ddc81 100644
--- a/public/r/styles/base-nova/item.json
+++ b/public/r/styles/base-nova/item.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/item/item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-lg border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = href ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-lg border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/layout.json b/public/r/styles/base-nova/layout.json
index cf7219c6e..dc22c1d3f 100644
--- a/public/r/styles/base-nova/layout.json
+++ b/public/r/styles/base-nova/layout.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/layout/layout.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport \"@/styles/global.css\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"html\">\n\nconst { class: className, lang, ...props } = Astro.props\n---\n\n<html\n  class={cn(\n    \"bg-background text-foreground has-data-[variant=inset]:bg-sidebar overscroll-none scroll-smooth\",\n    className\n  )}\n  data-slot=\"layout\"\n  lang={Astro.currentLocale || \"en\"}\n  {...props}\n>\n  <slot />\n</html>\n\n<style is:global>\n  :root {\n    color-scheme: light;\n  }\n\n  .dark {\n    color-scheme: dark;\n  }\n\n  @view-transition {\n    navigation: auto;\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport \"@/styles/global.css\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"html\">\n\nconst { class: className, lang, ...props } = Astro.props\n---\n\n<html\n  class={cn(\n    \"bg-background text-foreground has-data-[variant=inset]:bg-sidebar overscroll-none scroll-smooth\",\n    className\n  )}\n  data-slot=\"layout\"\n  lang={lang || Astro.currentLocale || \"en\"}\n  {...props}\n>\n  <slot />\n</html>\n\n<style is:global>\n  :root {\n    color-scheme: light;\n  }\n\n  .dark {\n    color-scheme: dark;\n  }\n\n  @view-transition {\n    navigation: auto;\n  }\n</style>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/logo.json b/public/r/styles/base-nova/logo.json
index 5118dce00..fbaefd162 100644
--- a/public/r/styles/base-nova/logo.json
+++ b/public/r/styles/base-nova/logo.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/logo/logo.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst { class: className, href, ...props } = Astro.props\n\nconst Comp = href ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-base font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-base font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/logo/logo-text.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<span class={cn(\"text-lg\", className)} {...props}>\n  <slot />\n</span>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"logo-text\",\n  ...props\n} = Astro.props\n---\n\n<span class={cn(\"text-lg\", className)} data-slot={dataSlot} {...props}>\n  <slot />\n</span>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/marquee.json b/public/r/styles/base-nova/marquee.json
index 25fc597f2..c932b246a 100644
--- a/public/r/styles/base-nova/marquee.json
+++ b/public/r/styles/base-nova/marquee.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  data-slot={dataSlot}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/navigation-menu.json b/public/r/styles/base-nova/navigation-menu.json
index 12258aba5..8e0409e0c 100644
--- a/public/r/styles/base-nova/navigation-menu.json
+++ b/public/r/styles/base-nova/navigation-menu.json
@@ -25,7 +25,7 @@
     },
     {
       "path": "src/components/ui/navigation-menu/navigation-menu-link.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  active?: boolean\n}\n\nconst { class: className, active, ...props } = Astro.props\n---\n\n<a\n  data-slot=\"navigation-menu-link\"\n  data-active={active ? \"true\" : undefined}\n  class={cn(\"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*='size-'])]:size-4\", className)}\n  {...props}\n>\n  <slot />\n</a>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  active?: boolean\n}\n\nconst {\n  class: className,\n  active,\n  \"aria-current\": ariaCurrent = active ? \"page\" : undefined,\n  ...props\n} = Astro.props\n---\n\n<a\n  data-slot=\"navigation-menu-link\"\n  data-active={active ? \"true\" : undefined}\n  aria-current={ariaCurrent}\n  class={cn(\"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*='size-'])]:size-4\", className)}\n  {...props}\n>\n  <slot />\n</a>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/price.json b/public/r/styles/base-nova/price.json
index da3b26c9f..d815f6576 100644
--- a/public/r/styles/base-nova/price.json
+++ b/public/r/styles/base-nova/price.json
@@ -6,17 +6,17 @@
   "files": [
     {
       "path": "src/components/ui/price/price.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div class={cn(\"flex flex-wrap items-center gap-x-2\", className)} {...props}>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"price\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\"flex flex-wrap items-center gap-x-2\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/price/price-unit.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<span\n  class={cn(\"text-muted-foreground text-sm leading-tight\", className)}\n  {...props}\n>\n  / <slot />\n</span>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"price-unit\",\n  ...props\n} = Astro.props\n---\n\n<span\n  class={cn(\"text-muted-foreground text-sm leading-tight\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  / <slot />\n</span>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/price/price-value.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/rating.json b/public/r/styles/base-nova/rating.json
index 7490c6dbb..57afb7920 100644
--- a/public/r/styles/base-nova/rating.json
+++ b/public/r/styles/base-nova/rating.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/rating/rating.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport Star from \"@lucide/astro/icons/star\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  value?: number\n}\n\nconst {\n  value = 5,\n  class: className,\n  \"aria-label\": ariaLabel = `Rated ${value} out of 5`,\n  ...props\n} = Astro.props\n---\n\n<div\n  role=\"img\"\n  aria-label={ariaLabel}\n  class={cn(\"flex items-center gap-1 text-base\", className)}\n  {...props}\n>\n  {Array.from({ length: 5 }).map((_, index) => {\n    const fillPercentage =\n      index < Math.floor(value)\n        ? 100\n        : index === Math.floor(value)\n          ? (value % 1) * 100\n          : 0\n\n    return (\n      <span\n        aria-hidden=\"true\"\n        class=\"text-muted-foreground/25 relative inline-flex size-[1em]\"\n      >\n        <Star class=\"size-[1em] fill-current\" />\n        {fillPercentage > 0 && (\n          <span\n            class=\"text-primary absolute inset-0 overflow-hidden\"\n            style={{ width: `${fillPercentage}%` }}\n          >\n            <Star class=\"size-[1em] fill-current\" />\n          </span>\n        )}\n      </span>\n    )\n  })}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport Star from \"@lucide/astro/icons/star\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  value?: number\n}\n\nconst {\n  value = 5,\n  class: className,\n  \"aria-label\": ariaLabel = `Rated ${value} out of 5`,\n  \"data-slot\": dataSlot = \"rating\",\n  ...props\n} = Astro.props\n---\n\n<div\n  role=\"img\"\n  aria-label={ariaLabel}\n  class={cn(\"flex items-center gap-1 text-base\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  {Array.from({ length: 5 }).map((_, index) => {\n    const fillPercentage =\n      index < Math.floor(value)\n        ? 100\n        : index === Math.floor(value)\n          ? (value % 1) * 100\n          : 0\n\n    return (\n      <span\n        aria-hidden=\"true\"\n        class=\"text-muted-foreground/25 relative inline-flex size-[1em]\"\n      >\n        <Star class=\"size-[1em] fill-current\" />\n        {fillPercentage > 0 && (\n          <span\n            class=\"text-primary absolute inset-0 overflow-hidden\"\n            style={{ width: `${fillPercentage}%` }}\n          >\n            <Star class=\"size-[1em] fill-current\" />\n          </span>\n        )}\n      </span>\n    )\n  })}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/section.json b/public/r/styles/base-nova/section.json
index 3e9eac108..5ae24bfbb 100644
--- a/public/r/styles/base-nova/section.json
+++ b/public/r/styles/base-nova/section.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/section/section.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-12 py-[var(--section-padding,--spacing(14))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-14 rounded-xl bg-background ring-1 ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-12 py-[var(--section-padding,--spacing(14))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-14 rounded-xl bg-background ring-1 ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/theme-toggle.json b/public/r/styles/base-nova/theme-toggle.json
index 60e1a6dcc..9fbadda9c 100644
--- a/public/r/styles/base-nova/theme-toggle.json
+++ b/public/r/styles/base-nova/theme-toggle.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/ui/theme-toggle/theme-toggle.astro",
-      "content": "---\nimport type { ComponentProps } from \"astro/types\"\nimport Moon from \"@lucide/astro/icons/moon\"\nimport Sun from \"@lucide/astro/icons/sun\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = ComponentProps<typeof Button>\n\nconst {\n  class: className,\n  variant = \"ghost\",\n  size = \"icon-sm\",\n  ...props\n} = Astro.props\n---\n\n<Button\n  data-theme-toggle\n  aria-label=\"Toggle theme\"\n  variant={variant}\n  size={size}\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <Sun class=\"dark:hidden\" />\n  <Moon class=\"hidden dark:block\" />\n  <span class=\"sr-only\">Toggle theme</span>\n</Button>\n\n<script is:inline>\n  if (!window.__themeToggleHandlersInitialized) {\n    window.__themeToggleHandlersInitialized = true\n\n    const syncThemeToggles = () => {\n      const isDark = document.documentElement.classList.contains(\"dark\")\n\n      document.querySelectorAll(\"[data-theme-toggle]\").forEach((toggle) => {\n        if (!(toggle instanceof HTMLButtonElement)) return\n\n        toggle.setAttribute(\"aria-pressed\", isDark ? \"true\" : \"false\")\n        toggle.setAttribute(\"data-state\", isDark ? \"on\" : \"off\")\n\n        if (isDark) {\n          toggle.setAttribute(\"data-pressed\", \"\")\n        } else {\n          toggle.removeAttribute(\"data-pressed\")\n        }\n      })\n    }\n\n    syncThemeToggles()\n\n    const observer = new MutationObserver(syncThemeToggles)\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n    })\n\n    document.addEventListener(\"click\", (event) => {\n      const target = event.target\n\n      if (!(target instanceof Element)) return\n\n      const toggle = target.closest(\"[data-theme-toggle]\")\n\n      if (!(toggle instanceof HTMLButtonElement)) return\n      if (toggle.disabled) return\n\n      const isDark = document.documentElement.classList.contains(\"dark\")\n      const nextTheme = isDark ? \"light\" : \"dark\"\n\n      if (typeof window.__setTheme === \"function\") {\n        window.__setTheme(nextTheme)\n        return\n      }\n\n      document.documentElement.classList[\n        nextTheme === \"dark\" ? \"add\" : \"remove\"\n      ](\"dark\")\n    })\n  }\n</script>\n",
+      "content": "---\nimport type { ComponentProps } from \"astro/types\"\nimport Moon from \"@lucide/astro/icons/moon\"\nimport Sun from \"@lucide/astro/icons/sun\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = ComponentProps<typeof Button> & {\n  disabled?: boolean\n}\n\nconst {\n  class: className,\n  variant = \"ghost\",\n  size = \"icon-sm\",\n  ...props\n} = Astro.props\n---\n\n<Button\n  data-theme-toggle\n  aria-label=\"Toggle theme\"\n  variant={variant}\n  size={size}\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <Sun class=\"dark:hidden\" />\n  <Moon class=\"hidden dark:block\" />\n  <span class=\"sr-only\">Toggle theme</span>\n</Button>\n\n<script is:inline>\n  if (!window.__themeToggleHandlersInitialized) {\n    window.__themeToggleHandlersInitialized = true\n\n    const syncThemeToggles = () => {\n      const isDark = document.documentElement.classList.contains(\"dark\")\n\n      document.querySelectorAll(\"[data-theme-toggle]\").forEach((toggle) => {\n        if (!(toggle instanceof HTMLButtonElement)) return\n\n        toggle.setAttribute(\"aria-pressed\", isDark ? \"true\" : \"false\")\n        toggle.setAttribute(\"data-state\", isDark ? \"on\" : \"off\")\n\n        if (isDark) {\n          toggle.setAttribute(\"data-pressed\", \"\")\n        } else {\n          toggle.removeAttribute(\"data-pressed\")\n        }\n      })\n    }\n\n    syncThemeToggles()\n    document.addEventListener(\"astro:page-load\", syncThemeToggles)\n\n    const observer = new MutationObserver(syncThemeToggles)\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n    })\n\n    document.addEventListener(\"click\", (event) => {\n      const target = event.target\n\n      if (!(target instanceof Element)) return\n\n      const toggle = target.closest(\"[data-theme-toggle]\")\n\n      if (!(toggle instanceof HTMLButtonElement)) return\n      if (toggle.disabled) return\n\n      const isDark = document.documentElement.classList.contains(\"dark\")\n      const nextTheme = isDark ? \"light\" : \"dark\"\n\n      if (typeof window.__setTheme === \"function\") {\n        window.__setTheme(nextTheme)\n        return\n      }\n\n      document.documentElement.classList[\n        nextTheme === \"dark\" ? \"add\" : \"remove\"\n      ](\"dark\")\n    })\n  }\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/toast.json b/public/r/styles/base-nova/toast.json
index efa1a9d7a..19f5528dc 100644
--- a/public/r/styles/base-nova/toast.json
+++ b/public/r/styles/base-nova/toast.json
@@ -18,7 +18,7 @@
     },
     {
       "path": "src/components/ui/toast/toast-action.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  hidden = true,\n  type = \"button\",\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"toast-action\"\n  type={type}\n  class={cn(buttonVariants({ variant: \"outline\", size: \"sm\" }), className)}\n  hidden={hidden}\n  {...props}\n>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  hidden = true,\n  type = \"button\",\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"toast-action\"\n  data-variant=\"outline\"\n  data-size=\"sm\"\n  type={type}\n  class={cn(buttonVariants({ variant: \"outline\", size: \"sm\" }), className)}\n  hidden={hidden}\n  {...props}\n>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/toc.json b/public/r/styles/base-nova/toc.json
index b83d9608f..f8ad7c489 100644
--- a/public/r/styles/base-nova/toc.json
+++ b/public/r/styles/base-nova/toc.json
@@ -26,7 +26,7 @@
     },
     {
       "path": "src/components/ui/toc/toc-menu-link.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  depth?: number\n  isActive?: boolean\n  active?: boolean\n}\n\nconst {\n  class: className,\n  depth = 2,\n  isActive,\n  active = false,\n  ...props\n} = Astro.props\n\nconst resolvedActive = isActive ?? active\n---\n\n<a\n  data-slot=\"toc-menu-link\"\n  data-depth={depth}\n  data-active={resolvedActive ? \"true\" : undefined}\n  aria-current={resolvedActive ? \"location\" : undefined}\n  class={cn(\n    \"text-sm leading-6 text-muted-foreground hover:text-foreground data-[active=true]:text-foreground block transition-colors\",\n    depth === 3 && \"pl-4\",\n    depth >= 4 && \"pl-8\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</a>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  depth?: number\n  isActive?: boolean\n  active?: boolean\n}\n\nconst {\n  class: className,\n  depth = 2,\n  isActive,\n  active = false,\n  ...props\n} = Astro.props\n\nconst resolvedActive = isActive ?? active\n---\n\n<a\n  data-slot=\"toc-menu-link\"\n  data-depth={depth}\n  data-active={resolvedActive ? \"true\" : undefined}\n  aria-current={resolvedActive ? \"location\" : undefined}\n  class={cn(\n    \"text-sm leading-6 text-muted-foreground hover:text-foreground data-[active=true]:text-foreground block transition-colors\",\n    depth === 3 && \"ps-4\",\n    depth >= 4 && \"ps-8\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</a>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/typography.json b/public/r/styles/base-nova/typography.json
index ab74fdb67..9e858ad36 100644
--- a/public/r/styles/base-nova/typography.json
+++ b/public/r/styles/base-nova/typography.json
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/typography/typography-blockquote.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"blockquote\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<blockquote\n  data-slot=\"typography-blockquote\"\n  data-size={size}\n  class={cn(\"mt-6 border-l-2 pl-6 italic\", sizeClass, className)}\n  {...props}\n>\n  <slot />\n</blockquote>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"blockquote\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<blockquote\n  data-slot=\"typography-blockquote\"\n  data-size={size}\n  class={cn(\"mt-6 border-s-2 ps-6 italic\", sizeClass, className)}\n  {...props}\n>\n  <slot />\n</blockquote>\n",
       "type": "registry:ui"
     },
     {
@@ -51,7 +51,7 @@
     },
     {
       "path": "src/components/ui/typography/typography-list.astro",
-      "content": "---\nimport type { Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props<Tag extends \"ul\" | \"ol\"> = Polymorphic<{ as: Tag; size?: Size }>\n\nconst {\n  as: Tag = \"ul\",\n  class: className,\n  size = \"default\",\n  ...props\n} = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<Tag\n  data-slot=\"typography-list\"\n  data-size={size}\n  data-ordered={Tag === \"ol\" ? \"\" : undefined}\n  class={cn(\n    \"my-6 ml-6\",\n    Tag === \"ol\" ? \"list-decimal\" : \"list-disc\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n",
+      "content": "---\nimport type { Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props<Tag extends \"ul\" | \"ol\"> = Polymorphic<{ as: Tag; size?: Size }>\n\nconst {\n  as: Tag = \"ul\",\n  class: className,\n  size = \"default\",\n  ...props\n} = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<Tag\n  data-slot=\"typography-list\"\n  data-size={size}\n  data-ordered={Tag === \"ol\" ? \"\" : undefined}\n  class={cn(\n    \"my-6 ms-6\",\n    Tag === \"ol\" ? \"list-decimal\" : \"list-disc\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n",
       "type": "registry:ui"
     },
     {
@@ -76,12 +76,12 @@
     },
     {
       "path": "src/components/ui/typography/typography-table-head.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-left font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/typography/typography-table-cell.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-left align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/video.json b/public/r/styles/base-nova/video.json
index 5c9d5d2a3..cab2ef605 100644
--- a/public/r/styles/base-nova/video.json
+++ b/public/r/styles/base-nova/video.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/video/video.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"src\"> & {\n  src?: string\n}\n\nconst { class: className, src, ...props } = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title=\"Embedded video\"\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-lg border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-lg border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/banner.json b/public/r/styles/base-rhea/banner.json
index 5f348a4d9..702d54488 100644
--- a/public/r/styles/base-rhea/banner.json
+++ b/public/r/styles/base-rhea/banner.json
@@ -9,12 +9,12 @@
   "files": [
     {
       "path": "src/components/ui/banner/banner.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"aside\"> &\n  VariantProps<typeof variants> & {\n    storageKey?: string\n  }\n\nconst variants = cva(\"py-2 relative flex items-center\", {\n  variants: {\n    variant: {\n      default: \"bg-foreground text-background w-full\",\n      floating:\n        \"my-2 rounded-2xl bg-background shadow-sm ring-1 ring-foreground/5 dark:ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, storageKey, ...props } = Astro.props\n---\n\n<aside\n  class={cn(variants({ variant }), className)}\n  data-slot=\"banner\"\n  data-banner-storage-key={storageKey}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</aside>\n\n<script>\n  const getStorageToken = (key: string) => `banner:${key}`\n\n  const syncBanners = () => {\n    document.querySelectorAll(\"[data-slot='banner']\").forEach((banner) => {\n      if (!(banner instanceof HTMLElement)) return\n      const storageKey = banner.dataset.bannerStorageKey\n      if (\n        storageKey &&\n        sessionStorage.getItem(getStorageToken(storageKey)) === \"hidden\"\n      ) {\n        banner.hidden = true\n      }\n    })\n  }\n\n  syncBanners()\n  document.addEventListener(\"astro:page-load\", syncBanners)\n\n  document.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return\n    const closeButton = event.target.closest(\"[data-slot='banner-close']\")\n    const banner = closeButton?.closest(\"[data-slot='banner']\")\n    if (!(banner instanceof HTMLElement)) return\n    banner.hidden = true\n    const storageKey = banner.dataset.bannerStorageKey\n    if (storageKey)\n      sessionStorage.setItem(getStorageToken(storageKey), \"hidden\")\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"aside\"> &\n  VariantProps<typeof variants> & {\n    storageKey?: string\n  }\n\nconst variants = cva(\"py-2 relative flex items-center\", {\n  variants: {\n    variant: {\n      default: \"bg-foreground text-background w-full\",\n      floating:\n        \"my-2 rounded-2xl bg-background shadow-sm ring-1 ring-foreground/5 dark:ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  storageKey,\n  ...props\n} = Astro.props\n---\n\n<aside\n  class={cn(variants({ variant }), className)}\n  data-slot=\"banner\"\n  data-banner-storage-key={storageKey}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</aside>\n\n<script>\n  const getStorageToken = (key: string) => `banner:${key}`\n\n  const syncBanners = () => {\n    document.querySelectorAll(\"[data-slot='banner']\").forEach((banner) => {\n      if (!(banner instanceof HTMLElement)) return\n      const storageKey = banner.dataset.bannerStorageKey\n      if (\n        storageKey &&\n        sessionStorage.getItem(getStorageToken(storageKey)) === \"hidden\"\n      ) {\n        banner.hidden = true\n      }\n    })\n  }\n\n  syncBanners()\n  document.addEventListener(\"astro:page-load\", syncBanners)\n\n  document.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return\n    const closeButton = event.target.closest(\"[data-slot='banner-close']\")\n    const banner = closeButton?.closest(\"[data-slot='banner']\")\n    if (!(banner instanceof HTMLElement)) return\n    banner.hidden = true\n    const storageKey = banner.dataset.bannerStorageKey\n    if (storageKey)\n      sessionStorage.setItem(getStorageToken(storageKey), \"hidden\")\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/banner/banner-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst { class: className, showClose = true, ...props } = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-lg text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst {\n  class: className,\n  showClose = true,\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-lg text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/carousel.json b/public/r/styles/base-rhea/carousel.json
index bb8792023..552e6c7bc 100644
--- a/public/r/styles/base-rhea/carousel.json
+++ b/public/r/styles/base-rhea/carousel.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = root.querySelector<HTMLElement>(\n        '[data-slot=\"carousel-content\"]'\n      )\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = root.querySelectorAll<HTMLButtonElement>(\n        '[data-slot=\"carousel-previous\"]'\n      )\n      const next = root.querySelectorAll<HTMLButtonElement>(\n        '[data-slot=\"carousel-next\"]'\n      )\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -28,12 +28,12 @@
     },
     {
       "path": "src/components/ui/carousel/carousel-next.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-2xl absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-2xl absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-previous.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-2xl absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-2xl absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/dropdown-menu.json b/public/r/styles/base-rhea/dropdown-menu.json
index bd94ee229..d10fe202a 100644
--- a/public/r/styles/base-rhea/dropdown-menu.json
+++ b/public/r/styles/base-rhea/dropdown-menu.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { Align, Side } from \"@data-slot/dropdown-menu\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  defaultValue?: string | null\n  defaultValues?: string[]\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  closeOnSelect?: boolean\n  highlightItemOnHover?: boolean\n  side?: Side\n  align?: Align\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  defaultValue,\n  defaultValues,\n  closeOnClickOutside,\n  closeOnEscape,\n  closeOnSelect,\n  highlightItemOnHover,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionPadding,\n  lockScroll,\n  ...props\n} = Astro.props\n\nconst defaultValuesAttr =\n  defaultValues === undefined ? undefined : JSON.stringify(defaultValues)\n---\n\n<div\n  data-slot=\"dropdown-menu\"\n  data-default-open={defaultOpen}\n  data-default-value={defaultValue}\n  data-default-values={defaultValuesAttr}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-close-on-select={closeOnSelect}\n  data-highlight-item-on-hover={highlightItemOnHover}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-avoid-collisions={avoidCollisions}\n  data-collision-padding={collisionPadding}\n  data-lock-scroll={lockScroll}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dropdown-menu\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { Align, Side } from \"@data-slot/dropdown-menu\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  defaultValue?: string | null\n  defaultValues?: string[]\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  closeOnSelect?: boolean\n  highlightItemOnHover?: boolean\n  side?: Side\n  align?: Align\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  defaultValue,\n  defaultValues,\n  closeOnClickOutside,\n  closeOnEscape,\n  closeOnSelect,\n  highlightItemOnHover,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionPadding,\n  lockScroll,\n  ...props\n} = Astro.props\n\nconst defaultValuesAttr =\n  defaultValues === undefined ? undefined : JSON.stringify(defaultValues)\n---\n\n<div\n  data-slot=\"dropdown-menu\"\n  data-default-open={defaultOpen}\n  data-default-value={defaultValue === null ? \"\" : defaultValue}\n  data-default-values={defaultValuesAttr}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-close-on-select={closeOnSelect}\n  data-highlight-item-on-hover={highlightItemOnHover}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-avoid-collisions={avoidCollisions}\n  data-collision-padding={collisionPadding}\n  data-lock-scroll={lockScroll}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dropdown-menu\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -25,17 +25,17 @@
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> &\n  HTMLAttributes<\"a\"> & {\n    as?: \"button\" | \"a\"\n    disabled?: boolean\n    variant?: \"default\" | \"destructive\"\n    inset?: boolean\n  }\n\nconst {\n  as: Tag = \"href\" in Astro.props ? \"a\" : \"button\",\n  class: className,\n  type = \"button\",\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<Tag\n  data-slot=\"dropdown-menu-item\"\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={Tag === \"button\" && disabled ? true : undefined}\n  type={Tag === \"button\" ? type : undefined}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 min-h-7 rounded-xl px-2 py-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n\n<script>\n  // Data Slot owns selection; links also need native keyboard activation.\n  document.addEventListener(\n    \"keydown\",\n    (event) => {\n      if (\n        event.defaultPrevented ||\n        event.isComposing ||\n        ![\"Enter\", \" \"].includes(event.key)\n      )\n        return\n      const item =\n        event.target instanceof Element\n          ? event.target.closest('[data-slot=\"dropdown-menu-item\"][href]')\n          : null\n      if (\n        !(item instanceof HTMLAnchorElement) ||\n        item.getAttribute(\"aria-disabled\") === \"true\"\n      )\n        return\n      event.preventDefault()\n      event.stopPropagation()\n      item.click()\n    },\n    true\n  )\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> &\n  HTMLAttributes<\"a\"> & {\n    as?: \"button\" | \"a\"\n    disabled?: boolean\n    variant?: \"default\" | \"destructive\"\n    inset?: boolean\n  }\n\nconst {\n  as: Tag = \"href\" in Astro.props ? \"a\" : \"button\",\n  class: className,\n  type = \"button\",\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<Tag\n  data-slot=\"dropdown-menu-item\"\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={Tag === \"button\" && disabled ? true : undefined}\n  type={Tag === \"button\" ? type : undefined}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 min-h-7 rounded-xl px-2 py-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n\n<script>\n  // Data Slot owns selection; links also need native keyboard activation.\n  document.addEventListener(\n    \"keydown\",\n    (event) => {\n      if (\n        event.defaultPrevented ||\n        event.isComposing ||\n        ![\"Enter\", \" \"].includes(event.key)\n      )\n        return\n      const item =\n        event.target instanceof Element\n          ? event.target.closest('[data-slot=\"dropdown-menu-item\"][href]')\n          : null\n      if (\n        !(item instanceof HTMLAnchorElement) ||\n        item.getAttribute(\"aria-disabled\") === \"true\"\n      )\n        return\n      event.preventDefault()\n      event.stopPropagation()\n      item.click()\n    },\n    true\n  )\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-radio-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-radio-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2 min-h-7 rounded-xl py-1.5 pr-8 pl-2 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-radio-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-radio-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-radio-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-radio-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2 min-h-7 rounded-xl py-1.5 pr-8 pl-2 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-radio-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-radio-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-radio-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-checkbox-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2 min-h-7 rounded-xl py-1.5 pr-8 pl-2 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-checkbox-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-checkbox-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-checkbox-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-checkbox-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2 min-h-7 rounded-xl py-1.5 pr-8 pl-2 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-checkbox-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-checkbox-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-checkbox-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
@@ -45,7 +45,7 @@
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-label.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  inset?: boolean\n}\n\nconst { class: className, inset, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"dropdown-menu-label\"\n  data-inset={inset}\n  class={cn(\"text-muted-foreground px-2 py-1 text-xs data-inset:pl-7\", className)}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  inset?: boolean\n}\n\nconst { class: className, inset, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"dropdown-menu-label\"\n  data-inset={inset || undefined}\n  class={cn(\"text-muted-foreground px-2 py-1 text-xs data-inset:pl-7\", className)}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/header.json b/public/r/styles/base-rhea/header.json
index add2d2bd0..f4be45d5d 100644
--- a/public/r/styles/base-rhea/header.json
+++ b/public/r/styles/base-rhea/header.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/header/header.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-2xl bg-background shadow-sm ring-1 ring-foreground/5 dark:ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-2xl bg-background shadow-sm ring-1 ring-foreground/5 dark:ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/icon.json b/public/r/styles/base-rhea/icon.json
index 08bcfdfad..2dd8ce89c 100644
--- a/public/r/styles/base-rhea/icon.json
+++ b/public/r/styles/base-rhea/icon.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/ui/icon/icon.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = Omit<HTMLAttributes<\"svg\">, \"name\" | \"href\"> & {\n  href?: HTMLAttributes<\"a\">[\"href\"]\n  name?: string | number\n}\n\nconst { name, href, ...props } = Astro.props\n\nconst hrefMap = {\n  \"x.com\": \"x\",\n  twitter: \"twitter\",\n  facebook: \"facebook\",\n  instagram: \"instagram\",\n  pinterest: \"pinterest\",\n  youtube: \"youtube\",\n  tiktok: \"tiktok\",\n  snapchat: \"snapchat\",\n  reddit: \"reddit\",\n  tumblr: \"tumblr\",\n  \"wa.me\": \"whatsapp\",\n  telegram: \"telegram\",\n  discord: \"discord\",\n  vimeo: \"vimeo\",\n  flickr: \"flickr\",\n  yelp: \"yelp\",\n  spotify: \"spotify\",\n  behance: \"behance\",\n  dribbble: \"dribbble\",\n  soundcloud: \"soundcloud\",\n  github: \"github\",\n  twitch: \"twitch\",\n  \"tel:\": \"phone\",\n  \"mailto:\": \"mail\",\n  \"maps.app.goo.gl\": \"map-pin\",\n  linkedin: \"linkedin\",\n} as const\n\ntype Source = \"lucide\" | \"simple\"\n\nconst icons: Record<Source, Record<string, () => Promise<unknown>>> = {\n  lucide: import.meta.glob(\"/node_modules/lucide-static/icons/*.svg\"),\n  simple: import.meta.glob(\"/node_modules/simple-icons/icons/*.svg\"),\n}\n\nconst pathFor = (source: Source, icon: string) =>\n  source === \"lucide\"\n    ? `/node_modules/lucide-static/icons/${icon}.svg`\n    : `/node_modules/simple-icons/icons/${icon}.svg`\n\n// Resolve an icon by explicit name, or derive one from a link href.\n// Names may be prefixed with `lucide:` or `simple:` to pick a set when both\n// sets contain the same name (for example `github` or `figma`).\nconst hasName = name != null && name !== \"\"\n\nconst resolve = () => {\n  let key = hasName ? String(name) : undefined\n  let order: Source[] = [\"lucide\", \"simple\"]\n\n  if (!key && href) {\n    const hrefKey = Object.keys(hrefMap).find((candidate) =>\n      href.toString().includes(candidate)\n    )\n    if (hrefKey) {\n      key = hrefMap[hrefKey as keyof typeof hrefMap]\n      order = [\"simple\", \"lucide\"]\n    }\n  }\n\n  const linkIcon = {\n    source: \"lucide\" as const,\n    path: pathFor(\"lucide\", \"link\"),\n  }\n\n  if (!key) return href ? linkIcon : undefined\n  if (key === \"x.com\") key = \"simple:x\"\n\n  const [prefix, icon] = key.includes(\":\") ? key.split(\":\") : [undefined, key]\n  if (prefix === \"lucide\" || prefix === \"simple\") order = [prefix]\n\n  for (const source of order) {\n    const path = pathFor(source, icon)\n    if (path in icons[source]) return { source, path }\n  }\n\n  // A link always gets an icon, even when its brand has no logo in either set\n  // (Simple Icons removed LinkedIn, for example).\n  if (!hasName && href) return linkIcon\n\n  return undefined\n}\n\nconst resolved = resolve()\nconst module = resolved\n  ? ((await icons[resolved.source][resolved.path]()) as { default?: any })\n  : undefined\nconst Comp = module?.default\n\nconst isLabelled =\n  \"aria-label\" in props || \"aria-labelledby\" in props || \"role\" in props\n---\n\n{Comp && resolved && (\n  <Comp\n    height={24}\n    width={24}\n    fill={resolved.source === \"simple\" ? \"currentColor\" : \"none\"}\n    class=\"size-[1em] text-base\"\n    aria-hidden={isLabelled ? undefined : \"true\"}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = Omit<HTMLAttributes<\"svg\">, \"name\" | \"href\"> & {\n  href?: HTMLAttributes<\"a\">[\"href\"]\n  name?: string | number\n}\n\nconst { name, href, \"data-slot\": dataSlot = \"icon\", ...props } = Astro.props\n\nconst hrefMap = {\n  \"x.com\": \"x\",\n  twitter: \"twitter\",\n  facebook: \"facebook\",\n  instagram: \"instagram\",\n  pinterest: \"pinterest\",\n  youtube: \"youtube\",\n  tiktok: \"tiktok\",\n  snapchat: \"snapchat\",\n  reddit: \"reddit\",\n  tumblr: \"tumblr\",\n  \"wa.me\": \"whatsapp\",\n  telegram: \"telegram\",\n  discord: \"discord\",\n  vimeo: \"vimeo\",\n  flickr: \"flickr\",\n  yelp: \"yelp\",\n  spotify: \"spotify\",\n  behance: \"behance\",\n  dribbble: \"dribbble\",\n  soundcloud: \"soundcloud\",\n  github: \"github\",\n  twitch: \"twitch\",\n  \"tel:\": \"phone\",\n  \"mailto:\": \"mail\",\n  \"maps.app.goo.gl\": \"map-pin\",\n  linkedin: \"linkedin\",\n} as const\n\ntype Source = \"lucide\" | \"simple\"\n\nconst icons: Record<Source, Record<string, () => Promise<unknown>>> = {\n  lucide: import.meta.glob(\"/node_modules/lucide-static/icons/*.svg\"),\n  simple: import.meta.glob(\"/node_modules/simple-icons/icons/*.svg\"),\n}\n\nconst pathFor = (source: Source, icon: string) =>\n  source === \"lucide\"\n    ? `/node_modules/lucide-static/icons/${icon}.svg`\n    : `/node_modules/simple-icons/icons/${icon}.svg`\n\n// Resolve an icon by explicit name, or derive one from a link href.\n// Names may be prefixed with `lucide:` or `simple:` to pick a set when both\n// sets contain the same name (for example `github` or `figma`).\nconst hasName = name != null && name !== \"\"\n\nconst resolve = () => {\n  let key = hasName ? String(name) : undefined\n  let order: Source[] = [\"lucide\", \"simple\"]\n\n  if (!key && href) {\n    const hrefKey = Object.keys(hrefMap).find((candidate) =>\n      href.toString().includes(candidate)\n    )\n    if (hrefKey) {\n      key = hrefMap[hrefKey as keyof typeof hrefMap]\n      order = [\"simple\", \"lucide\"]\n    }\n  }\n\n  const linkIcon = {\n    source: \"lucide\" as const,\n    path: pathFor(\"lucide\", \"link\"),\n  }\n\n  if (!key) return href ? linkIcon : undefined\n  if (key === \"x.com\") key = \"simple:x\"\n\n  const [prefix, icon] = key.includes(\":\") ? key.split(\":\") : [undefined, key]\n  if (prefix === \"lucide\" || prefix === \"simple\") order = [prefix]\n\n  for (const source of order) {\n    const path = pathFor(source, icon)\n    if (path in icons[source]) return { source, path }\n  }\n\n  // A link always gets an icon, even when its brand has no logo in either set\n  // (Simple Icons removed LinkedIn, for example).\n  if (!hasName && href) return linkIcon\n\n  return undefined\n}\n\nconst resolved = resolve()\nconst module = resolved\n  ? ((await icons[resolved.source][resolved.path]()) as { default?: any })\n  : undefined\nconst Comp = module?.default\n\nconst isLabelled =\n  \"aria-label\" in props || \"aria-labelledby\" in props || \"role\" in props\n---\n\n{Comp && resolved && (\n  <Comp\n    height={24}\n    width={24}\n    fill={resolved.source === \"simple\" ? \"currentColor\" : \"none\"}\n    class=\"size-[1em] text-base\"\n    aria-hidden={isLabelled ? undefined : \"true\"}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/item.json b/public/r/styles/base-rhea/item.json
index 741b56e21..3b518f8e8 100644
--- a/public/r/styles/base-rhea/item.json
+++ b/public/r/styles/base-rhea/item.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/item/item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-2xl border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-3.5 px-3.5 py-3\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = href ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-2xl border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-3.5 px-3.5 py-3\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/layout.json b/public/r/styles/base-rhea/layout.json
index cf7219c6e..dc22c1d3f 100644
--- a/public/r/styles/base-rhea/layout.json
+++ b/public/r/styles/base-rhea/layout.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/layout/layout.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport \"@/styles/global.css\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"html\">\n\nconst { class: className, lang, ...props } = Astro.props\n---\n\n<html\n  class={cn(\n    \"bg-background text-foreground has-data-[variant=inset]:bg-sidebar overscroll-none scroll-smooth\",\n    className\n  )}\n  data-slot=\"layout\"\n  lang={Astro.currentLocale || \"en\"}\n  {...props}\n>\n  <slot />\n</html>\n\n<style is:global>\n  :root {\n    color-scheme: light;\n  }\n\n  .dark {\n    color-scheme: dark;\n  }\n\n  @view-transition {\n    navigation: auto;\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport \"@/styles/global.css\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"html\">\n\nconst { class: className, lang, ...props } = Astro.props\n---\n\n<html\n  class={cn(\n    \"bg-background text-foreground has-data-[variant=inset]:bg-sidebar overscroll-none scroll-smooth\",\n    className\n  )}\n  data-slot=\"layout\"\n  lang={lang || Astro.currentLocale || \"en\"}\n  {...props}\n>\n  <slot />\n</html>\n\n<style is:global>\n  :root {\n    color-scheme: light;\n  }\n\n  .dark {\n    color-scheme: dark;\n  }\n\n  @view-transition {\n    navigation: auto;\n  }\n</style>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/logo.json b/public/r/styles/base-rhea/logo.json
index 5118dce00..fbaefd162 100644
--- a/public/r/styles/base-rhea/logo.json
+++ b/public/r/styles/base-rhea/logo.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/logo/logo.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst { class: className, href, ...props } = Astro.props\n\nconst Comp = href ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-base font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-base font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/logo/logo-text.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<span class={cn(\"text-lg\", className)} {...props}>\n  <slot />\n</span>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"logo-text\",\n  ...props\n} = Astro.props\n---\n\n<span class={cn(\"text-lg\", className)} data-slot={dataSlot} {...props}>\n  <slot />\n</span>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/marquee.json b/public/r/styles/base-rhea/marquee.json
index 25fc597f2..c932b246a 100644
--- a/public/r/styles/base-rhea/marquee.json
+++ b/public/r/styles/base-rhea/marquee.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  data-slot={dataSlot}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/navigation-menu.json b/public/r/styles/base-rhea/navigation-menu.json
index b0bbea7bc..0110133a9 100644
--- a/public/r/styles/base-rhea/navigation-menu.json
+++ b/public/r/styles/base-rhea/navigation-menu.json
@@ -25,7 +25,7 @@
     },
     {
       "path": "src/components/ui/navigation-menu/navigation-menu-link.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  active?: boolean\n}\n\nconst { class: className, active, ...props } = Astro.props\n---\n\n<a\n  data-slot=\"navigation-menu-link\"\n  data-active={active ? \"true\" : undefined}\n  class={cn(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/30 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-2xl px-2.5 py-1.5 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 in-data-[slot=navigation-menu-content]:rounded-xl font-medium in-data-[slot=navigation-menu-content]:font-normal in-data-[slot=navigation-menu-content]:p-2 in-data-[slot=navigation-menu-content]:w-full\", className)}\n  {...props}\n>\n  <slot />\n</a>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  active?: boolean\n}\n\nconst {\n  class: className,\n  active,\n  \"aria-current\": ariaCurrent = active ? \"page\" : undefined,\n  ...props\n} = Astro.props\n---\n\n<a\n  data-slot=\"navigation-menu-link\"\n  data-active={active ? \"true\" : undefined}\n  aria-current={ariaCurrent}\n  class={cn(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/30 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-2xl px-2.5 py-1.5 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 in-data-[slot=navigation-menu-content]:rounded-xl font-medium in-data-[slot=navigation-menu-content]:font-normal in-data-[slot=navigation-menu-content]:p-2 in-data-[slot=navigation-menu-content]:w-full\", className)}\n  {...props}\n>\n  <slot />\n</a>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/price.json b/public/r/styles/base-rhea/price.json
index bed955174..be82659d2 100644
--- a/public/r/styles/base-rhea/price.json
+++ b/public/r/styles/base-rhea/price.json
@@ -6,17 +6,17 @@
   "files": [
     {
       "path": "src/components/ui/price/price.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div class={cn(\"flex flex-wrap items-center gap-x-2\", className)} {...props}>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"price\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\"flex flex-wrap items-center gap-x-2\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/price/price-unit.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<span\n  class={cn(\"text-muted-foreground text-sm leading-tight\", className)}\n  {...props}\n>\n  / <slot />\n</span>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"price-unit\",\n  ...props\n} = Astro.props\n---\n\n<span\n  class={cn(\"text-muted-foreground text-sm leading-tight\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  / <slot />\n</span>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/price/price-value.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-2xl bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-2xl bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/rating.json b/public/r/styles/base-rhea/rating.json
index 7490c6dbb..57afb7920 100644
--- a/public/r/styles/base-rhea/rating.json
+++ b/public/r/styles/base-rhea/rating.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/rating/rating.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport Star from \"@lucide/astro/icons/star\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  value?: number\n}\n\nconst {\n  value = 5,\n  class: className,\n  \"aria-label\": ariaLabel = `Rated ${value} out of 5`,\n  ...props\n} = Astro.props\n---\n\n<div\n  role=\"img\"\n  aria-label={ariaLabel}\n  class={cn(\"flex items-center gap-1 text-base\", className)}\n  {...props}\n>\n  {Array.from({ length: 5 }).map((_, index) => {\n    const fillPercentage =\n      index < Math.floor(value)\n        ? 100\n        : index === Math.floor(value)\n          ? (value % 1) * 100\n          : 0\n\n    return (\n      <span\n        aria-hidden=\"true\"\n        class=\"text-muted-foreground/25 relative inline-flex size-[1em]\"\n      >\n        <Star class=\"size-[1em] fill-current\" />\n        {fillPercentage > 0 && (\n          <span\n            class=\"text-primary absolute inset-0 overflow-hidden\"\n            style={{ width: `${fillPercentage}%` }}\n          >\n            <Star class=\"size-[1em] fill-current\" />\n          </span>\n        )}\n      </span>\n    )\n  })}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport Star from \"@lucide/astro/icons/star\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  value?: number\n}\n\nconst {\n  value = 5,\n  class: className,\n  \"aria-label\": ariaLabel = `Rated ${value} out of 5`,\n  \"data-slot\": dataSlot = \"rating\",\n  ...props\n} = Astro.props\n---\n\n<div\n  role=\"img\"\n  aria-label={ariaLabel}\n  class={cn(\"flex items-center gap-1 text-base\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  {Array.from({ length: 5 }).map((_, index) => {\n    const fillPercentage =\n      index < Math.floor(value)\n        ? 100\n        : index === Math.floor(value)\n          ? (value % 1) * 100\n          : 0\n\n    return (\n      <span\n        aria-hidden=\"true\"\n        class=\"text-muted-foreground/25 relative inline-flex size-[1em]\"\n      >\n        <Star class=\"size-[1em] fill-current\" />\n        {fillPercentage > 0 && (\n          <span\n            class=\"text-primary absolute inset-0 overflow-hidden\"\n            style={{ width: `${fillPercentage}%` }}\n          >\n            <Star class=\"size-[1em] fill-current\" />\n          </span>\n        )}\n      </span>\n    )\n  })}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/section.json b/public/r/styles/base-rhea/section.json
index 9376fdb2b..d9c157958 100644
--- a/public/r/styles/base-rhea/section.json
+++ b/public/r/styles/base-rhea/section.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/section/section.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-14 py-[var(--section-padding,--spacing(16))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-16 rounded-[min(var(--radius-4xl),24px)] bg-background shadow-sm ring-1 ring-foreground/5 dark:ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-14 py-[var(--section-padding,--spacing(16))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-16 rounded-[min(var(--radius-4xl),24px)] bg-background shadow-sm ring-1 ring-foreground/5 dark:ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/theme-toggle.json b/public/r/styles/base-rhea/theme-toggle.json
index 60e1a6dcc..9fbadda9c 100644
--- a/public/r/styles/base-rhea/theme-toggle.json
+++ b/public/r/styles/base-rhea/theme-toggle.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/ui/theme-toggle/theme-toggle.astro",
-      "content": "---\nimport type { ComponentProps } from \"astro/types\"\nimport Moon from \"@lucide/astro/icons/moon\"\nimport Sun from \"@lucide/astro/icons/sun\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = ComponentProps<typeof Button>\n\nconst {\n  class: className,\n  variant = \"ghost\",\n  size = \"icon-sm\",\n  ...props\n} = Astro.props\n---\n\n<Button\n  data-theme-toggle\n  aria-label=\"Toggle theme\"\n  variant={variant}\n  size={size}\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <Sun class=\"dark:hidden\" />\n  <Moon class=\"hidden dark:block\" />\n  <span class=\"sr-only\">Toggle theme</span>\n</Button>\n\n<script is:inline>\n  if (!window.__themeToggleHandlersInitialized) {\n    window.__themeToggleHandlersInitialized = true\n\n    const syncThemeToggles = () => {\n      const isDark = document.documentElement.classList.contains(\"dark\")\n\n      document.querySelectorAll(\"[data-theme-toggle]\").forEach((toggle) => {\n        if (!(toggle instanceof HTMLButtonElement)) return\n\n        toggle.setAttribute(\"aria-pressed\", isDark ? \"true\" : \"false\")\n        toggle.setAttribute(\"data-state\", isDark ? \"on\" : \"off\")\n\n        if (isDark) {\n          toggle.setAttribute(\"data-pressed\", \"\")\n        } else {\n          toggle.removeAttribute(\"data-pressed\")\n        }\n      })\n    }\n\n    syncThemeToggles()\n\n    const observer = new MutationObserver(syncThemeToggles)\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n    })\n\n    document.addEventListener(\"click\", (event) => {\n      const target = event.target\n\n      if (!(target instanceof Element)) return\n\n      const toggle = target.closest(\"[data-theme-toggle]\")\n\n      if (!(toggle instanceof HTMLButtonElement)) return\n      if (toggle.disabled) return\n\n      const isDark = document.documentElement.classList.contains(\"dark\")\n      const nextTheme = isDark ? \"light\" : \"dark\"\n\n      if (typeof window.__setTheme === \"function\") {\n        window.__setTheme(nextTheme)\n        return\n      }\n\n      document.documentElement.classList[\n        nextTheme === \"dark\" ? \"add\" : \"remove\"\n      ](\"dark\")\n    })\n  }\n</script>\n",
+      "content": "---\nimport type { ComponentProps } from \"astro/types\"\nimport Moon from \"@lucide/astro/icons/moon\"\nimport Sun from \"@lucide/astro/icons/sun\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = ComponentProps<typeof Button> & {\n  disabled?: boolean\n}\n\nconst {\n  class: className,\n  variant = \"ghost\",\n  size = \"icon-sm\",\n  ...props\n} = Astro.props\n---\n\n<Button\n  data-theme-toggle\n  aria-label=\"Toggle theme\"\n  variant={variant}\n  size={size}\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <Sun class=\"dark:hidden\" />\n  <Moon class=\"hidden dark:block\" />\n  <span class=\"sr-only\">Toggle theme</span>\n</Button>\n\n<script is:inline>\n  if (!window.__themeToggleHandlersInitialized) {\n    window.__themeToggleHandlersInitialized = true\n\n    const syncThemeToggles = () => {\n      const isDark = document.documentElement.classList.contains(\"dark\")\n\n      document.querySelectorAll(\"[data-theme-toggle]\").forEach((toggle) => {\n        if (!(toggle instanceof HTMLButtonElement)) return\n\n        toggle.setAttribute(\"aria-pressed\", isDark ? \"true\" : \"false\")\n        toggle.setAttribute(\"data-state\", isDark ? \"on\" : \"off\")\n\n        if (isDark) {\n          toggle.setAttribute(\"data-pressed\", \"\")\n        } else {\n          toggle.removeAttribute(\"data-pressed\")\n        }\n      })\n    }\n\n    syncThemeToggles()\n    document.addEventListener(\"astro:page-load\", syncThemeToggles)\n\n    const observer = new MutationObserver(syncThemeToggles)\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n    })\n\n    document.addEventListener(\"click\", (event) => {\n      const target = event.target\n\n      if (!(target instanceof Element)) return\n\n      const toggle = target.closest(\"[data-theme-toggle]\")\n\n      if (!(toggle instanceof HTMLButtonElement)) return\n      if (toggle.disabled) return\n\n      const isDark = document.documentElement.classList.contains(\"dark\")\n      const nextTheme = isDark ? \"light\" : \"dark\"\n\n      if (typeof window.__setTheme === \"function\") {\n        window.__setTheme(nextTheme)\n        return\n      }\n\n      document.documentElement.classList[\n        nextTheme === \"dark\" ? \"add\" : \"remove\"\n      ](\"dark\")\n    })\n  }\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/toast.json b/public/r/styles/base-rhea/toast.json
index 60a61bf71..3ab2d9c4b 100644
--- a/public/r/styles/base-rhea/toast.json
+++ b/public/r/styles/base-rhea/toast.json
@@ -18,7 +18,7 @@
     },
     {
       "path": "src/components/ui/toast/toast-action.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  hidden = true,\n  type = \"button\",\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"toast-action\"\n  type={type}\n  class={cn(buttonVariants({ variant: \"outline\", size: \"sm\" }), className)}\n  hidden={hidden}\n  {...props}\n>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  hidden = true,\n  type = \"button\",\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"toast-action\"\n  data-variant=\"outline\"\n  data-size=\"sm\"\n  type={type}\n  class={cn(buttonVariants({ variant: \"outline\", size: \"sm\" }), className)}\n  hidden={hidden}\n  {...props}\n>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/toc.json b/public/r/styles/base-rhea/toc.json
index b83d9608f..f8ad7c489 100644
--- a/public/r/styles/base-rhea/toc.json
+++ b/public/r/styles/base-rhea/toc.json
@@ -26,7 +26,7 @@
     },
     {
       "path": "src/components/ui/toc/toc-menu-link.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  depth?: number\n  isActive?: boolean\n  active?: boolean\n}\n\nconst {\n  class: className,\n  depth = 2,\n  isActive,\n  active = false,\n  ...props\n} = Astro.props\n\nconst resolvedActive = isActive ?? active\n---\n\n<a\n  data-slot=\"toc-menu-link\"\n  data-depth={depth}\n  data-active={resolvedActive ? \"true\" : undefined}\n  aria-current={resolvedActive ? \"location\" : undefined}\n  class={cn(\n    \"text-sm leading-6 text-muted-foreground hover:text-foreground data-[active=true]:text-foreground block transition-colors\",\n    depth === 3 && \"pl-4\",\n    depth >= 4 && \"pl-8\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</a>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  depth?: number\n  isActive?: boolean\n  active?: boolean\n}\n\nconst {\n  class: className,\n  depth = 2,\n  isActive,\n  active = false,\n  ...props\n} = Astro.props\n\nconst resolvedActive = isActive ?? active\n---\n\n<a\n  data-slot=\"toc-menu-link\"\n  data-depth={depth}\n  data-active={resolvedActive ? \"true\" : undefined}\n  aria-current={resolvedActive ? \"location\" : undefined}\n  class={cn(\n    \"text-sm leading-6 text-muted-foreground hover:text-foreground data-[active=true]:text-foreground block transition-colors\",\n    depth === 3 && \"ps-4\",\n    depth >= 4 && \"ps-8\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</a>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/typography.json b/public/r/styles/base-rhea/typography.json
index 0da7b3e5a..a06d0ec93 100644
--- a/public/r/styles/base-rhea/typography.json
+++ b/public/r/styles/base-rhea/typography.json
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/typography/typography-blockquote.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"blockquote\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<blockquote\n  data-slot=\"typography-blockquote\"\n  data-size={size}\n  class={cn(\"mt-6 border-l-2 pl-6 italic\", sizeClass, className)}\n  {...props}\n>\n  <slot />\n</blockquote>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"blockquote\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<blockquote\n  data-slot=\"typography-blockquote\"\n  data-size={size}\n  class={cn(\"mt-6 border-s-2 ps-6 italic\", sizeClass, className)}\n  {...props}\n>\n  <slot />\n</blockquote>\n",
       "type": "registry:ui"
     },
     {
@@ -51,7 +51,7 @@
     },
     {
       "path": "src/components/ui/typography/typography-list.astro",
-      "content": "---\nimport type { Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props<Tag extends \"ul\" | \"ol\"> = Polymorphic<{ as: Tag; size?: Size }>\n\nconst {\n  as: Tag = \"ul\",\n  class: className,\n  size = \"default\",\n  ...props\n} = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<Tag\n  data-slot=\"typography-list\"\n  data-size={size}\n  data-ordered={Tag === \"ol\" ? \"\" : undefined}\n  class={cn(\n    \"my-6 ml-6\",\n    Tag === \"ol\" ? \"list-decimal\" : \"list-disc\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n",
+      "content": "---\nimport type { Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props<Tag extends \"ul\" | \"ol\"> = Polymorphic<{ as: Tag; size?: Size }>\n\nconst {\n  as: Tag = \"ul\",\n  class: className,\n  size = \"default\",\n  ...props\n} = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<Tag\n  data-slot=\"typography-list\"\n  data-size={size}\n  data-ordered={Tag === \"ol\" ? \"\" : undefined}\n  class={cn(\n    \"my-6 ms-6\",\n    Tag === \"ol\" ? \"list-decimal\" : \"list-disc\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n",
       "type": "registry:ui"
     },
     {
@@ -76,12 +76,12 @@
     },
     {
       "path": "src/components/ui/typography/typography-table-head.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-left font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/typography/typography-table-cell.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-left align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/video.json b/public/r/styles/base-rhea/video.json
index fead3d781..4ac4944b8 100644
--- a/public/r/styles/base-rhea/video.json
+++ b/public/r/styles/base-rhea/video.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/video/video.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"src\"> & {\n  src?: string\n}\n\nconst { class: className, src, ...props } = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title=\"Embedded video\"\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-2xl border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-2xl border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/banner.json b/public/r/styles/base-sera/banner.json
index 2624c1e3b..f6e90f253 100644
--- a/public/r/styles/base-sera/banner.json
+++ b/public/r/styles/base-sera/banner.json
@@ -9,12 +9,12 @@
   "files": [
     {
       "path": "src/components/ui/banner/banner.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"aside\"> &\n  VariantProps<typeof variants> & {\n    storageKey?: string\n  }\n\nconst variants = cva(\"py-3 relative flex items-center\", {\n  variants: {\n    variant: {\n      default: \"bg-foreground text-background w-full\",\n      floating:\n        \"my-2 rounded-none border bg-background shadow-sm mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, storageKey, ...props } = Astro.props\n---\n\n<aside\n  class={cn(variants({ variant }), className)}\n  data-slot=\"banner\"\n  data-banner-storage-key={storageKey}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</aside>\n\n<script>\n  const getStorageToken = (key: string) => `banner:${key}`\n\n  const syncBanners = () => {\n    document.querySelectorAll(\"[data-slot='banner']\").forEach((banner) => {\n      if (!(banner instanceof HTMLElement)) return\n      const storageKey = banner.dataset.bannerStorageKey\n      if (\n        storageKey &&\n        sessionStorage.getItem(getStorageToken(storageKey)) === \"hidden\"\n      ) {\n        banner.hidden = true\n      }\n    })\n  }\n\n  syncBanners()\n  document.addEventListener(\"astro:page-load\", syncBanners)\n\n  document.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return\n    const closeButton = event.target.closest(\"[data-slot='banner-close']\")\n    const banner = closeButton?.closest(\"[data-slot='banner']\")\n    if (!(banner instanceof HTMLElement)) return\n    banner.hidden = true\n    const storageKey = banner.dataset.bannerStorageKey\n    if (storageKey)\n      sessionStorage.setItem(getStorageToken(storageKey), \"hidden\")\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"aside\"> &\n  VariantProps<typeof variants> & {\n    storageKey?: string\n  }\n\nconst variants = cva(\"py-3 relative flex items-center\", {\n  variants: {\n    variant: {\n      default: \"bg-foreground text-background w-full\",\n      floating:\n        \"my-2 rounded-none border bg-background shadow-sm mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  storageKey,\n  ...props\n} = Astro.props\n---\n\n<aside\n  class={cn(variants({ variant }), className)}\n  data-slot=\"banner\"\n  data-banner-storage-key={storageKey}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</aside>\n\n<script>\n  const getStorageToken = (key: string) => `banner:${key}`\n\n  const syncBanners = () => {\n    document.querySelectorAll(\"[data-slot='banner']\").forEach((banner) => {\n      if (!(banner instanceof HTMLElement)) return\n      const storageKey = banner.dataset.bannerStorageKey\n      if (\n        storageKey &&\n        sessionStorage.getItem(getStorageToken(storageKey)) === \"hidden\"\n      ) {\n        banner.hidden = true\n      }\n    })\n  }\n\n  syncBanners()\n  document.addEventListener(\"astro:page-load\", syncBanners)\n\n  document.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return\n    const closeButton = event.target.closest(\"[data-slot='banner-close']\")\n    const banner = closeButton?.closest(\"[data-slot='banner']\")\n    if (!(banner instanceof HTMLElement)) return\n    banner.hidden = true\n    const storageKey = banner.dataset.bannerStorageKey\n    if (storageKey)\n      sessionStorage.setItem(getStorageToken(storageKey), \"hidden\")\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/banner/banner-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst { class: className, showClose = true, ...props } = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-none text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst {\n  class: className,\n  showClose = true,\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-none text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/carousel.json b/public/r/styles/base-sera/carousel.json
index 6dfc865f2..c7e279c5a 100644
--- a/public/r/styles/base-sera/carousel.json
+++ b/public/r/styles/base-sera/carousel.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = root.querySelector<HTMLElement>(\n        '[data-slot=\"carousel-content\"]'\n      )\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = root.querySelectorAll<HTMLButtonElement>(\n        '[data-slot=\"carousel-previous\"]'\n      )\n      const next = root.querySelectorAll<HTMLButtonElement>(\n        '[data-slot=\"carousel-next\"]'\n      )\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -28,12 +28,12 @@
     },
     {
       "path": "src/components/ui/carousel/carousel-next.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-previous.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/dropdown-menu.json b/public/r/styles/base-sera/dropdown-menu.json
index a80ae2eee..6facfa3c9 100644
--- a/public/r/styles/base-sera/dropdown-menu.json
+++ b/public/r/styles/base-sera/dropdown-menu.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { Align, Side } from \"@data-slot/dropdown-menu\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  defaultValue?: string | null\n  defaultValues?: string[]\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  closeOnSelect?: boolean\n  highlightItemOnHover?: boolean\n  side?: Side\n  align?: Align\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  defaultValue,\n  defaultValues,\n  closeOnClickOutside,\n  closeOnEscape,\n  closeOnSelect,\n  highlightItemOnHover,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionPadding,\n  lockScroll,\n  ...props\n} = Astro.props\n\nconst defaultValuesAttr =\n  defaultValues === undefined ? undefined : JSON.stringify(defaultValues)\n---\n\n<div\n  data-slot=\"dropdown-menu\"\n  data-default-open={defaultOpen}\n  data-default-value={defaultValue}\n  data-default-values={defaultValuesAttr}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-close-on-select={closeOnSelect}\n  data-highlight-item-on-hover={highlightItemOnHover}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-avoid-collisions={avoidCollisions}\n  data-collision-padding={collisionPadding}\n  data-lock-scroll={lockScroll}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dropdown-menu\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { Align, Side } from \"@data-slot/dropdown-menu\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  defaultValue?: string | null\n  defaultValues?: string[]\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  closeOnSelect?: boolean\n  highlightItemOnHover?: boolean\n  side?: Side\n  align?: Align\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  defaultValue,\n  defaultValues,\n  closeOnClickOutside,\n  closeOnEscape,\n  closeOnSelect,\n  highlightItemOnHover,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionPadding,\n  lockScroll,\n  ...props\n} = Astro.props\n\nconst defaultValuesAttr =\n  defaultValues === undefined ? undefined : JSON.stringify(defaultValues)\n---\n\n<div\n  data-slot=\"dropdown-menu\"\n  data-default-open={defaultOpen}\n  data-default-value={defaultValue === null ? \"\" : defaultValue}\n  data-default-values={defaultValuesAttr}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-close-on-select={closeOnSelect}\n  data-highlight-item-on-hover={highlightItemOnHover}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-avoid-collisions={avoidCollisions}\n  data-collision-padding={collisionPadding}\n  data-lock-scroll={lockScroll}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dropdown-menu\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -25,17 +25,17 @@
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> &\n  HTMLAttributes<\"a\"> & {\n    as?: \"button\" | \"a\"\n    disabled?: boolean\n    variant?: \"default\" | \"destructive\"\n    inset?: boolean\n  }\n\nconst {\n  as: Tag = \"href\" in Astro.props ? \"a\" : \"button\",\n  class: className,\n  type = \"button\",\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<Tag\n  data-slot=\"dropdown-menu-item\"\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={Tag === \"button\" && disabled ? true : undefined}\n  type={Tag === \"button\" ? type : undefined}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2.5 rounded-none px-3 py-2 text-xs font-medium uppercase tracking-wider data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n\n<script>\n  // Data Slot owns selection; links also need native keyboard activation.\n  document.addEventListener(\n    \"keydown\",\n    (event) => {\n      if (\n        event.defaultPrevented ||\n        event.isComposing ||\n        ![\"Enter\", \" \"].includes(event.key)\n      )\n        return\n      const item =\n        event.target instanceof Element\n          ? event.target.closest('[data-slot=\"dropdown-menu-item\"][href]')\n          : null\n      if (\n        !(item instanceof HTMLAnchorElement) ||\n        item.getAttribute(\"aria-disabled\") === \"true\"\n      )\n        return\n      event.preventDefault()\n      event.stopPropagation()\n      item.click()\n    },\n    true\n  )\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> &\n  HTMLAttributes<\"a\"> & {\n    as?: \"button\" | \"a\"\n    disabled?: boolean\n    variant?: \"default\" | \"destructive\"\n    inset?: boolean\n  }\n\nconst {\n  as: Tag = \"href\" in Astro.props ? \"a\" : \"button\",\n  class: className,\n  type = \"button\",\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<Tag\n  data-slot=\"dropdown-menu-item\"\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={Tag === \"button\" && disabled ? true : undefined}\n  type={Tag === \"button\" ? type : undefined}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2.5 rounded-none px-3 py-2 text-xs font-medium uppercase tracking-wider data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n\n<script>\n  // Data Slot owns selection; links also need native keyboard activation.\n  document.addEventListener(\n    \"keydown\",\n    (event) => {\n      if (\n        event.defaultPrevented ||\n        event.isComposing ||\n        ![\"Enter\", \" \"].includes(event.key)\n      )\n        return\n      const item =\n        event.target instanceof Element\n          ? event.target.closest('[data-slot=\"dropdown-menu-item\"][href]')\n          : null\n      if (\n        !(item instanceof HTMLAnchorElement) ||\n        item.getAttribute(\"aria-disabled\") === \"true\"\n      )\n        return\n      event.preventDefault()\n      event.stopPropagation()\n      item.click()\n    },\n    true\n  )\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-radio-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-radio-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium uppercase tracking-wider data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-radio-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-radio-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-radio-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-radio-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium uppercase tracking-wider data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-radio-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-radio-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-radio-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-checkbox-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium uppercase tracking-wider data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-checkbox-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-checkbox-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-checkbox-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-checkbox-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium uppercase tracking-wider data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-checkbox-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-checkbox-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-checkbox-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
@@ -45,7 +45,7 @@
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-label.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  inset?: boolean\n}\n\nconst { class: className, inset, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"dropdown-menu-label\"\n  data-inset={inset}\n  class={cn(\"px-3 py-2 text-xs uppercase tracking-wider data-inset:pl-9.5 font-semibold text-muted-foreground\", className)}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  inset?: boolean\n}\n\nconst { class: className, inset, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"dropdown-menu-label\"\n  data-inset={inset || undefined}\n  class={cn(\"px-3 py-2 text-xs uppercase tracking-wider data-inset:pl-9.5 font-semibold text-muted-foreground\", className)}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/header.json b/public/r/styles/base-sera/header.json
index 75dda53c7..0e967ba8a 100644
--- a/public/r/styles/base-sera/header.json
+++ b/public/r/styles/base-sera/header.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/header/header.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-3 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-none border bg-background shadow-sm mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-3 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-none border bg-background shadow-sm mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/icon.json b/public/r/styles/base-sera/icon.json
index 08bcfdfad..2dd8ce89c 100644
--- a/public/r/styles/base-sera/icon.json
+++ b/public/r/styles/base-sera/icon.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/ui/icon/icon.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = Omit<HTMLAttributes<\"svg\">, \"name\" | \"href\"> & {\n  href?: HTMLAttributes<\"a\">[\"href\"]\n  name?: string | number\n}\n\nconst { name, href, ...props } = Astro.props\n\nconst hrefMap = {\n  \"x.com\": \"x\",\n  twitter: \"twitter\",\n  facebook: \"facebook\",\n  instagram: \"instagram\",\n  pinterest: \"pinterest\",\n  youtube: \"youtube\",\n  tiktok: \"tiktok\",\n  snapchat: \"snapchat\",\n  reddit: \"reddit\",\n  tumblr: \"tumblr\",\n  \"wa.me\": \"whatsapp\",\n  telegram: \"telegram\",\n  discord: \"discord\",\n  vimeo: \"vimeo\",\n  flickr: \"flickr\",\n  yelp: \"yelp\",\n  spotify: \"spotify\",\n  behance: \"behance\",\n  dribbble: \"dribbble\",\n  soundcloud: \"soundcloud\",\n  github: \"github\",\n  twitch: \"twitch\",\n  \"tel:\": \"phone\",\n  \"mailto:\": \"mail\",\n  \"maps.app.goo.gl\": \"map-pin\",\n  linkedin: \"linkedin\",\n} as const\n\ntype Source = \"lucide\" | \"simple\"\n\nconst icons: Record<Source, Record<string, () => Promise<unknown>>> = {\n  lucide: import.meta.glob(\"/node_modules/lucide-static/icons/*.svg\"),\n  simple: import.meta.glob(\"/node_modules/simple-icons/icons/*.svg\"),\n}\n\nconst pathFor = (source: Source, icon: string) =>\n  source === \"lucide\"\n    ? `/node_modules/lucide-static/icons/${icon}.svg`\n    : `/node_modules/simple-icons/icons/${icon}.svg`\n\n// Resolve an icon by explicit name, or derive one from a link href.\n// Names may be prefixed with `lucide:` or `simple:` to pick a set when both\n// sets contain the same name (for example `github` or `figma`).\nconst hasName = name != null && name !== \"\"\n\nconst resolve = () => {\n  let key = hasName ? String(name) : undefined\n  let order: Source[] = [\"lucide\", \"simple\"]\n\n  if (!key && href) {\n    const hrefKey = Object.keys(hrefMap).find((candidate) =>\n      href.toString().includes(candidate)\n    )\n    if (hrefKey) {\n      key = hrefMap[hrefKey as keyof typeof hrefMap]\n      order = [\"simple\", \"lucide\"]\n    }\n  }\n\n  const linkIcon = {\n    source: \"lucide\" as const,\n    path: pathFor(\"lucide\", \"link\"),\n  }\n\n  if (!key) return href ? linkIcon : undefined\n  if (key === \"x.com\") key = \"simple:x\"\n\n  const [prefix, icon] = key.includes(\":\") ? key.split(\":\") : [undefined, key]\n  if (prefix === \"lucide\" || prefix === \"simple\") order = [prefix]\n\n  for (const source of order) {\n    const path = pathFor(source, icon)\n    if (path in icons[source]) return { source, path }\n  }\n\n  // A link always gets an icon, even when its brand has no logo in either set\n  // (Simple Icons removed LinkedIn, for example).\n  if (!hasName && href) return linkIcon\n\n  return undefined\n}\n\nconst resolved = resolve()\nconst module = resolved\n  ? ((await icons[resolved.source][resolved.path]()) as { default?: any })\n  : undefined\nconst Comp = module?.default\n\nconst isLabelled =\n  \"aria-label\" in props || \"aria-labelledby\" in props || \"role\" in props\n---\n\n{Comp && resolved && (\n  <Comp\n    height={24}\n    width={24}\n    fill={resolved.source === \"simple\" ? \"currentColor\" : \"none\"}\n    class=\"size-[1em] text-base\"\n    aria-hidden={isLabelled ? undefined : \"true\"}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = Omit<HTMLAttributes<\"svg\">, \"name\" | \"href\"> & {\n  href?: HTMLAttributes<\"a\">[\"href\"]\n  name?: string | number\n}\n\nconst { name, href, \"data-slot\": dataSlot = \"icon\", ...props } = Astro.props\n\nconst hrefMap = {\n  \"x.com\": \"x\",\n  twitter: \"twitter\",\n  facebook: \"facebook\",\n  instagram: \"instagram\",\n  pinterest: \"pinterest\",\n  youtube: \"youtube\",\n  tiktok: \"tiktok\",\n  snapchat: \"snapchat\",\n  reddit: \"reddit\",\n  tumblr: \"tumblr\",\n  \"wa.me\": \"whatsapp\",\n  telegram: \"telegram\",\n  discord: \"discord\",\n  vimeo: \"vimeo\",\n  flickr: \"flickr\",\n  yelp: \"yelp\",\n  spotify: \"spotify\",\n  behance: \"behance\",\n  dribbble: \"dribbble\",\n  soundcloud: \"soundcloud\",\n  github: \"github\",\n  twitch: \"twitch\",\n  \"tel:\": \"phone\",\n  \"mailto:\": \"mail\",\n  \"maps.app.goo.gl\": \"map-pin\",\n  linkedin: \"linkedin\",\n} as const\n\ntype Source = \"lucide\" | \"simple\"\n\nconst icons: Record<Source, Record<string, () => Promise<unknown>>> = {\n  lucide: import.meta.glob(\"/node_modules/lucide-static/icons/*.svg\"),\n  simple: import.meta.glob(\"/node_modules/simple-icons/icons/*.svg\"),\n}\n\nconst pathFor = (source: Source, icon: string) =>\n  source === \"lucide\"\n    ? `/node_modules/lucide-static/icons/${icon}.svg`\n    : `/node_modules/simple-icons/icons/${icon}.svg`\n\n// Resolve an icon by explicit name, or derive one from a link href.\n// Names may be prefixed with `lucide:` or `simple:` to pick a set when both\n// sets contain the same name (for example `github` or `figma`).\nconst hasName = name != null && name !== \"\"\n\nconst resolve = () => {\n  let key = hasName ? String(name) : undefined\n  let order: Source[] = [\"lucide\", \"simple\"]\n\n  if (!key && href) {\n    const hrefKey = Object.keys(hrefMap).find((candidate) =>\n      href.toString().includes(candidate)\n    )\n    if (hrefKey) {\n      key = hrefMap[hrefKey as keyof typeof hrefMap]\n      order = [\"simple\", \"lucide\"]\n    }\n  }\n\n  const linkIcon = {\n    source: \"lucide\" as const,\n    path: pathFor(\"lucide\", \"link\"),\n  }\n\n  if (!key) return href ? linkIcon : undefined\n  if (key === \"x.com\") key = \"simple:x\"\n\n  const [prefix, icon] = key.includes(\":\") ? key.split(\":\") : [undefined, key]\n  if (prefix === \"lucide\" || prefix === \"simple\") order = [prefix]\n\n  for (const source of order) {\n    const path = pathFor(source, icon)\n    if (path in icons[source]) return { source, path }\n  }\n\n  // A link always gets an icon, even when its brand has no logo in either set\n  // (Simple Icons removed LinkedIn, for example).\n  if (!hasName && href) return linkIcon\n\n  return undefined\n}\n\nconst resolved = resolve()\nconst module = resolved\n  ? ((await icons[resolved.source][resolved.path]()) as { default?: any })\n  : undefined\nconst Comp = module?.default\n\nconst isLabelled =\n  \"aria-label\" in props || \"aria-labelledby\" in props || \"role\" in props\n---\n\n{Comp && resolved && (\n  <Comp\n    height={24}\n    width={24}\n    fill={resolved.source === \"simple\" ? \"currentColor\" : \"none\"}\n    class=\"size-[1em] text-base\"\n    aria-hidden={isLabelled ? undefined : \"true\"}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/item.json b/public/r/styles/base-sera/item.json
index 92806aaf9..61c49489c 100644
--- a/public/r/styles/base-sera/item.json
+++ b/public/r/styles/base-sera/item.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/item/item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-none border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-3.5 px-3.5 py-3\",\n        xs: \"gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = href ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-none border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-3.5 px-3.5 py-3\",\n        xs: \"gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/layout.json b/public/r/styles/base-sera/layout.json
index cf7219c6e..dc22c1d3f 100644
--- a/public/r/styles/base-sera/layout.json
+++ b/public/r/styles/base-sera/layout.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/layout/layout.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport \"@/styles/global.css\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"html\">\n\nconst { class: className, lang, ...props } = Astro.props\n---\n\n<html\n  class={cn(\n    \"bg-background text-foreground has-data-[variant=inset]:bg-sidebar overscroll-none scroll-smooth\",\n    className\n  )}\n  data-slot=\"layout\"\n  lang={Astro.currentLocale || \"en\"}\n  {...props}\n>\n  <slot />\n</html>\n\n<style is:global>\n  :root {\n    color-scheme: light;\n  }\n\n  .dark {\n    color-scheme: dark;\n  }\n\n  @view-transition {\n    navigation: auto;\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport \"@/styles/global.css\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"html\">\n\nconst { class: className, lang, ...props } = Astro.props\n---\n\n<html\n  class={cn(\n    \"bg-background text-foreground has-data-[variant=inset]:bg-sidebar overscroll-none scroll-smooth\",\n    className\n  )}\n  data-slot=\"layout\"\n  lang={lang || Astro.currentLocale || \"en\"}\n  {...props}\n>\n  <slot />\n</html>\n\n<style is:global>\n  :root {\n    color-scheme: light;\n  }\n\n  .dark {\n    color-scheme: dark;\n  }\n\n  @view-transition {\n    navigation: auto;\n  }\n</style>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/logo.json b/public/r/styles/base-sera/logo.json
index 2e772f044..7295fe6de 100644
--- a/public/r/styles/base-sera/logo.json
+++ b/public/r/styles/base-sera/logo.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/logo/logo.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst { class: className, href, ...props } = Astro.props\n\nconst Comp = href ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-sm font-semibold tracking-widest uppercase flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-sm font-semibold tracking-widest uppercase flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/logo/logo-text.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<span class={cn(\"text-lg\", className)} {...props}>\n  <slot />\n</span>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"logo-text\",\n  ...props\n} = Astro.props\n---\n\n<span class={cn(\"text-lg\", className)} data-slot={dataSlot} {...props}>\n  <slot />\n</span>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/marquee.json b/public/r/styles/base-sera/marquee.json
index 25fc597f2..c932b246a 100644
--- a/public/r/styles/base-sera/marquee.json
+++ b/public/r/styles/base-sera/marquee.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  data-slot={dataSlot}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/navigation-menu.json b/public/r/styles/base-sera/navigation-menu.json
index 4e1b75cea..3641121f0 100644
--- a/public/r/styles/base-sera/navigation-menu.json
+++ b/public/r/styles/base-sera/navigation-menu.json
@@ -25,7 +25,7 @@
     },
     {
       "path": "src/components/ui/navigation-menu/navigation-menu-link.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  active?: boolean\n}\n\nconst { class: className, active, ...props } = Astro.props\n---\n\n<a\n  data-slot=\"navigation-menu-link\"\n  data-active={active ? \"true\" : undefined}\n  class={cn(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/30 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-none p-3 text-sm transition-all outline-none focus-visible:ring-2 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-3.5 in-data-[slot=navigation-menu-content]:rounded-none\", className)}\n  {...props}\n>\n  <slot />\n</a>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  active?: boolean\n}\n\nconst {\n  class: className,\n  active,\n  \"aria-current\": ariaCurrent = active ? \"page\" : undefined,\n  ...props\n} = Astro.props\n---\n\n<a\n  data-slot=\"navigation-menu-link\"\n  data-active={active ? \"true\" : undefined}\n  aria-current={ariaCurrent}\n  class={cn(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/30 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-none p-3 text-sm transition-all outline-none focus-visible:ring-2 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-3.5 in-data-[slot=navigation-menu-content]:rounded-none\", className)}\n  {...props}\n>\n  <slot />\n</a>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/price.json b/public/r/styles/base-sera/price.json
index f77df5491..4dc2ce0ee 100644
--- a/public/r/styles/base-sera/price.json
+++ b/public/r/styles/base-sera/price.json
@@ -6,17 +6,17 @@
   "files": [
     {
       "path": "src/components/ui/price/price.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div class={cn(\"flex flex-wrap items-center gap-x-2\", className)} {...props}>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"price\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\"flex flex-wrap items-center gap-x-2\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/price/price-unit.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<span\n  class={cn(\"text-muted-foreground text-sm leading-tight\", className)}\n  {...props}\n>\n  / <slot />\n</span>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"price-unit\",\n  ...props\n} = Astro.props\n---\n\n<span\n  class={cn(\"text-muted-foreground text-sm leading-tight\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  / <slot />\n</span>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/price/price-value.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-none px-0 py-0.5 text-[0.625rem] font-semibold tracking-widest text-muted-foreground uppercase\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-none px-0 py-0.5 text-[0.625rem] font-semibold tracking-widest text-muted-foreground uppercase\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/rating.json b/public/r/styles/base-sera/rating.json
index 7490c6dbb..57afb7920 100644
--- a/public/r/styles/base-sera/rating.json
+++ b/public/r/styles/base-sera/rating.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/rating/rating.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport Star from \"@lucide/astro/icons/star\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  value?: number\n}\n\nconst {\n  value = 5,\n  class: className,\n  \"aria-label\": ariaLabel = `Rated ${value} out of 5`,\n  ...props\n} = Astro.props\n---\n\n<div\n  role=\"img\"\n  aria-label={ariaLabel}\n  class={cn(\"flex items-center gap-1 text-base\", className)}\n  {...props}\n>\n  {Array.from({ length: 5 }).map((_, index) => {\n    const fillPercentage =\n      index < Math.floor(value)\n        ? 100\n        : index === Math.floor(value)\n          ? (value % 1) * 100\n          : 0\n\n    return (\n      <span\n        aria-hidden=\"true\"\n        class=\"text-muted-foreground/25 relative inline-flex size-[1em]\"\n      >\n        <Star class=\"size-[1em] fill-current\" />\n        {fillPercentage > 0 && (\n          <span\n            class=\"text-primary absolute inset-0 overflow-hidden\"\n            style={{ width: `${fillPercentage}%` }}\n          >\n            <Star class=\"size-[1em] fill-current\" />\n          </span>\n        )}\n      </span>\n    )\n  })}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport Star from \"@lucide/astro/icons/star\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  value?: number\n}\n\nconst {\n  value = 5,\n  class: className,\n  \"aria-label\": ariaLabel = `Rated ${value} out of 5`,\n  \"data-slot\": dataSlot = \"rating\",\n  ...props\n} = Astro.props\n---\n\n<div\n  role=\"img\"\n  aria-label={ariaLabel}\n  class={cn(\"flex items-center gap-1 text-base\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  {Array.from({ length: 5 }).map((_, index) => {\n    const fillPercentage =\n      index < Math.floor(value)\n        ? 100\n        : index === Math.floor(value)\n          ? (value % 1) * 100\n          : 0\n\n    return (\n      <span\n        aria-hidden=\"true\"\n        class=\"text-muted-foreground/25 relative inline-flex size-[1em]\"\n      >\n        <Star class=\"size-[1em] fill-current\" />\n        {fillPercentage > 0 && (\n          <span\n            class=\"text-primary absolute inset-0 overflow-hidden\"\n            style={{ width: `${fillPercentage}%` }}\n          >\n            <Star class=\"size-[1em] fill-current\" />\n          </span>\n        )}\n      </span>\n    )\n  })}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/section.json b/public/r/styles/base-sera/section.json
index aa4869653..b97a05bbf 100644
--- a/public/r/styles/base-sera/section.json
+++ b/public/r/styles/base-sera/section.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/section/section.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-20 py-[var(--section-padding,--spacing(24))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-24 rounded-none bg-background shadow-sm ring-1 ring-foreground/5 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-20 py-[var(--section-padding,--spacing(24))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-24 rounded-none bg-background shadow-sm ring-1 ring-foreground/5 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/theme-toggle.json b/public/r/styles/base-sera/theme-toggle.json
index 60e1a6dcc..9fbadda9c 100644
--- a/public/r/styles/base-sera/theme-toggle.json
+++ b/public/r/styles/base-sera/theme-toggle.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/ui/theme-toggle/theme-toggle.astro",
-      "content": "---\nimport type { ComponentProps } from \"astro/types\"\nimport Moon from \"@lucide/astro/icons/moon\"\nimport Sun from \"@lucide/astro/icons/sun\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = ComponentProps<typeof Button>\n\nconst {\n  class: className,\n  variant = \"ghost\",\n  size = \"icon-sm\",\n  ...props\n} = Astro.props\n---\n\n<Button\n  data-theme-toggle\n  aria-label=\"Toggle theme\"\n  variant={variant}\n  size={size}\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <Sun class=\"dark:hidden\" />\n  <Moon class=\"hidden dark:block\" />\n  <span class=\"sr-only\">Toggle theme</span>\n</Button>\n\n<script is:inline>\n  if (!window.__themeToggleHandlersInitialized) {\n    window.__themeToggleHandlersInitialized = true\n\n    const syncThemeToggles = () => {\n      const isDark = document.documentElement.classList.contains(\"dark\")\n\n      document.querySelectorAll(\"[data-theme-toggle]\").forEach((toggle) => {\n        if (!(toggle instanceof HTMLButtonElement)) return\n\n        toggle.setAttribute(\"aria-pressed\", isDark ? \"true\" : \"false\")\n        toggle.setAttribute(\"data-state\", isDark ? \"on\" : \"off\")\n\n        if (isDark) {\n          toggle.setAttribute(\"data-pressed\", \"\")\n        } else {\n          toggle.removeAttribute(\"data-pressed\")\n        }\n      })\n    }\n\n    syncThemeToggles()\n\n    const observer = new MutationObserver(syncThemeToggles)\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n    })\n\n    document.addEventListener(\"click\", (event) => {\n      const target = event.target\n\n      if (!(target instanceof Element)) return\n\n      const toggle = target.closest(\"[data-theme-toggle]\")\n\n      if (!(toggle instanceof HTMLButtonElement)) return\n      if (toggle.disabled) return\n\n      const isDark = document.documentElement.classList.contains(\"dark\")\n      const nextTheme = isDark ? \"light\" : \"dark\"\n\n      if (typeof window.__setTheme === \"function\") {\n        window.__setTheme(nextTheme)\n        return\n      }\n\n      document.documentElement.classList[\n        nextTheme === \"dark\" ? \"add\" : \"remove\"\n      ](\"dark\")\n    })\n  }\n</script>\n",
+      "content": "---\nimport type { ComponentProps } from \"astro/types\"\nimport Moon from \"@lucide/astro/icons/moon\"\nimport Sun from \"@lucide/astro/icons/sun\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = ComponentProps<typeof Button> & {\n  disabled?: boolean\n}\n\nconst {\n  class: className,\n  variant = \"ghost\",\n  size = \"icon-sm\",\n  ...props\n} = Astro.props\n---\n\n<Button\n  data-theme-toggle\n  aria-label=\"Toggle theme\"\n  variant={variant}\n  size={size}\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <Sun class=\"dark:hidden\" />\n  <Moon class=\"hidden dark:block\" />\n  <span class=\"sr-only\">Toggle theme</span>\n</Button>\n\n<script is:inline>\n  if (!window.__themeToggleHandlersInitialized) {\n    window.__themeToggleHandlersInitialized = true\n\n    const syncThemeToggles = () => {\n      const isDark = document.documentElement.classList.contains(\"dark\")\n\n      document.querySelectorAll(\"[data-theme-toggle]\").forEach((toggle) => {\n        if (!(toggle instanceof HTMLButtonElement)) return\n\n        toggle.setAttribute(\"aria-pressed\", isDark ? \"true\" : \"false\")\n        toggle.setAttribute(\"data-state\", isDark ? \"on\" : \"off\")\n\n        if (isDark) {\n          toggle.setAttribute(\"data-pressed\", \"\")\n        } else {\n          toggle.removeAttribute(\"data-pressed\")\n        }\n      })\n    }\n\n    syncThemeToggles()\n    document.addEventListener(\"astro:page-load\", syncThemeToggles)\n\n    const observer = new MutationObserver(syncThemeToggles)\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n    })\n\n    document.addEventListener(\"click\", (event) => {\n      const target = event.target\n\n      if (!(target instanceof Element)) return\n\n      const toggle = target.closest(\"[data-theme-toggle]\")\n\n      if (!(toggle instanceof HTMLButtonElement)) return\n      if (toggle.disabled) return\n\n      const isDark = document.documentElement.classList.contains(\"dark\")\n      const nextTheme = isDark ? \"light\" : \"dark\"\n\n      if (typeof window.__setTheme === \"function\") {\n        window.__setTheme(nextTheme)\n        return\n      }\n\n      document.documentElement.classList[\n        nextTheme === \"dark\" ? \"add\" : \"remove\"\n      ](\"dark\")\n    })\n  }\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/toast.json b/public/r/styles/base-sera/toast.json
index abf49bc77..e35e47729 100644
--- a/public/r/styles/base-sera/toast.json
+++ b/public/r/styles/base-sera/toast.json
@@ -18,7 +18,7 @@
     },
     {
       "path": "src/components/ui/toast/toast-action.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  hidden = true,\n  type = \"button\",\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"toast-action\"\n  type={type}\n  class={cn(buttonVariants({ variant: \"outline\", size: \"sm\" }), className)}\n  hidden={hidden}\n  {...props}\n>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  hidden = true,\n  type = \"button\",\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"toast-action\"\n  data-variant=\"outline\"\n  data-size=\"sm\"\n  type={type}\n  class={cn(buttonVariants({ variant: \"outline\", size: \"sm\" }), className)}\n  hidden={hidden}\n  {...props}\n>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/toc.json b/public/r/styles/base-sera/toc.json
index 1d97f1dbd..3c2dd7c7d 100644
--- a/public/r/styles/base-sera/toc.json
+++ b/public/r/styles/base-sera/toc.json
@@ -26,7 +26,7 @@
     },
     {
       "path": "src/components/ui/toc/toc-menu-link.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  depth?: number\n  isActive?: boolean\n  active?: boolean\n}\n\nconst {\n  class: className,\n  depth = 2,\n  isActive,\n  active = false,\n  ...props\n} = Astro.props\n\nconst resolvedActive = isActive ?? active\n---\n\n<a\n  data-slot=\"toc-menu-link\"\n  data-depth={depth}\n  data-active={resolvedActive ? \"true\" : undefined}\n  aria-current={resolvedActive ? \"location\" : undefined}\n  class={cn(\n    \"text-sm leading-6 text-muted-foreground hover:text-foreground data-[active=true]:text-foreground block transition-colors\",\n    depth === 3 && \"pl-4\",\n    depth >= 4 && \"pl-8\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</a>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  depth?: number\n  isActive?: boolean\n  active?: boolean\n}\n\nconst {\n  class: className,\n  depth = 2,\n  isActive,\n  active = false,\n  ...props\n} = Astro.props\n\nconst resolvedActive = isActive ?? active\n---\n\n<a\n  data-slot=\"toc-menu-link\"\n  data-depth={depth}\n  data-active={resolvedActive ? \"true\" : undefined}\n  aria-current={resolvedActive ? \"location\" : undefined}\n  class={cn(\n    \"text-sm leading-6 text-muted-foreground hover:text-foreground data-[active=true]:text-foreground block transition-colors\",\n    depth === 3 && \"ps-4\",\n    depth >= 4 && \"ps-8\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</a>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/typography.json b/public/r/styles/base-sera/typography.json
index 62c2f30a7..c7d5ee47c 100644
--- a/public/r/styles/base-sera/typography.json
+++ b/public/r/styles/base-sera/typography.json
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/typography/typography-blockquote.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"blockquote\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<blockquote\n  data-slot=\"typography-blockquote\"\n  data-size={size}\n  class={cn(\"mt-6 border-l-2 pl-6 italic\", sizeClass, className)}\n  {...props}\n>\n  <slot />\n</blockquote>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"blockquote\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<blockquote\n  data-slot=\"typography-blockquote\"\n  data-size={size}\n  class={cn(\"mt-6 border-s-2 ps-6 italic\", sizeClass, className)}\n  {...props}\n>\n  <slot />\n</blockquote>\n",
       "type": "registry:ui"
     },
     {
@@ -51,7 +51,7 @@
     },
     {
       "path": "src/components/ui/typography/typography-list.astro",
-      "content": "---\nimport type { Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props<Tag extends \"ul\" | \"ol\"> = Polymorphic<{ as: Tag; size?: Size }>\n\nconst {\n  as: Tag = \"ul\",\n  class: className,\n  size = \"default\",\n  ...props\n} = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<Tag\n  data-slot=\"typography-list\"\n  data-size={size}\n  data-ordered={Tag === \"ol\" ? \"\" : undefined}\n  class={cn(\n    \"my-6 ml-6\",\n    Tag === \"ol\" ? \"list-decimal\" : \"list-disc\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n",
+      "content": "---\nimport type { Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props<Tag extends \"ul\" | \"ol\"> = Polymorphic<{ as: Tag; size?: Size }>\n\nconst {\n  as: Tag = \"ul\",\n  class: className,\n  size = \"default\",\n  ...props\n} = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<Tag\n  data-slot=\"typography-list\"\n  data-size={size}\n  data-ordered={Tag === \"ol\" ? \"\" : undefined}\n  class={cn(\n    \"my-6 ms-6\",\n    Tag === \"ol\" ? \"list-decimal\" : \"list-disc\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n",
       "type": "registry:ui"
     },
     {
@@ -76,12 +76,12 @@
     },
     {
       "path": "src/components/ui/typography/typography-table-head.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-left font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/typography/typography-table-cell.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-left align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/video.json b/public/r/styles/base-sera/video.json
index ba5db8bac..7545d0467 100644
--- a/public/r/styles/base-sera/video.json
+++ b/public/r/styles/base-sera/video.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/video/video.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"src\"> & {\n  src?: string\n}\n\nconst { class: className, src, ...props } = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title=\"Embedded video\"\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-none border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-none border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/banner.json b/public/r/styles/base-vega/banner.json
index e34d9309c..ad6f6745e 100644
--- a/public/r/styles/base-vega/banner.json
+++ b/public/r/styles/base-vega/banner.json
@@ -9,12 +9,12 @@
   "files": [
     {
       "path": "src/components/ui/banner/banner.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"aside\"> &\n  VariantProps<typeof variants> & {\n    storageKey?: string\n  }\n\nconst variants = cva(\"py-2 relative flex items-center\", {\n  variants: {\n    variant: {\n      default: \"bg-foreground text-background w-full\",\n      floating:\n        \"my-2 rounded-lg border bg-background shadow-sm mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, storageKey, ...props } = Astro.props\n---\n\n<aside\n  class={cn(variants({ variant }), className)}\n  data-slot=\"banner\"\n  data-banner-storage-key={storageKey}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</aside>\n\n<script>\n  const getStorageToken = (key: string) => `banner:${key}`\n\n  const syncBanners = () => {\n    document.querySelectorAll(\"[data-slot='banner']\").forEach((banner) => {\n      if (!(banner instanceof HTMLElement)) return\n      const storageKey = banner.dataset.bannerStorageKey\n      if (\n        storageKey &&\n        sessionStorage.getItem(getStorageToken(storageKey)) === \"hidden\"\n      ) {\n        banner.hidden = true\n      }\n    })\n  }\n\n  syncBanners()\n  document.addEventListener(\"astro:page-load\", syncBanners)\n\n  document.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return\n    const closeButton = event.target.closest(\"[data-slot='banner-close']\")\n    const banner = closeButton?.closest(\"[data-slot='banner']\")\n    if (!(banner instanceof HTMLElement)) return\n    banner.hidden = true\n    const storageKey = banner.dataset.bannerStorageKey\n    if (storageKey)\n      sessionStorage.setItem(getStorageToken(storageKey), \"hidden\")\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"aside\"> &\n  VariantProps<typeof variants> & {\n    storageKey?: string\n  }\n\nconst variants = cva(\"py-2 relative flex items-center\", {\n  variants: {\n    variant: {\n      default: \"bg-foreground text-background w-full\",\n      floating:\n        \"my-2 rounded-lg border bg-background shadow-sm mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  storageKey,\n  ...props\n} = Astro.props\n---\n\n<aside\n  class={cn(variants({ variant }), className)}\n  data-slot=\"banner\"\n  data-banner-storage-key={storageKey}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</aside>\n\n<script>\n  const getStorageToken = (key: string) => `banner:${key}`\n\n  const syncBanners = () => {\n    document.querySelectorAll(\"[data-slot='banner']\").forEach((banner) => {\n      if (!(banner instanceof HTMLElement)) return\n      const storageKey = banner.dataset.bannerStorageKey\n      if (\n        storageKey &&\n        sessionStorage.getItem(getStorageToken(storageKey)) === \"hidden\"\n      ) {\n        banner.hidden = true\n      }\n    })\n  }\n\n  syncBanners()\n  document.addEventListener(\"astro:page-load\", syncBanners)\n\n  document.addEventListener(\"click\", (event) => {\n    if (!(event.target instanceof Element)) return\n    const closeButton = event.target.closest(\"[data-slot='banner-close']\")\n    const banner = closeButton?.closest(\"[data-slot='banner']\")\n    if (!(banner instanceof HTMLElement)) return\n    banner.hidden = true\n    const storageKey = banner.dataset.bannerStorageKey\n    if (storageKey)\n      sessionStorage.setItem(getStorageToken(storageKey), \"hidden\")\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/banner/banner-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst { class: className, showClose = true, ...props } = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-sm text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst {\n  class: className,\n  showClose = true,\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-sm text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/carousel.json b/public/r/styles/base-vega/carousel.json
index 3e3052ad3..7971e22fc 100644
--- a/public/r/styles/base-vega/carousel.json
+++ b/public/r/styles/base-vega/carousel.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = root.querySelector<HTMLElement>(\n        '[data-slot=\"carousel-content\"]'\n      )\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = root.querySelectorAll<HTMLButtonElement>(\n        '[data-slot=\"carousel-previous\"]'\n      )\n      const next = root.querySelectorAll<HTMLButtonElement>(\n        '[data-slot=\"carousel-next\"]'\n      )\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -28,12 +28,12 @@
     },
     {
       "path": "src/components/ui/carousel/carousel-next.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-previous.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/dropdown-menu.json b/public/r/styles/base-vega/dropdown-menu.json
index b60acc57e..941375064 100644
--- a/public/r/styles/base-vega/dropdown-menu.json
+++ b/public/r/styles/base-vega/dropdown-menu.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { Align, Side } from \"@data-slot/dropdown-menu\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  defaultValue?: string | null\n  defaultValues?: string[]\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  closeOnSelect?: boolean\n  highlightItemOnHover?: boolean\n  side?: Side\n  align?: Align\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  defaultValue,\n  defaultValues,\n  closeOnClickOutside,\n  closeOnEscape,\n  closeOnSelect,\n  highlightItemOnHover,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionPadding,\n  lockScroll,\n  ...props\n} = Astro.props\n\nconst defaultValuesAttr =\n  defaultValues === undefined ? undefined : JSON.stringify(defaultValues)\n---\n\n<div\n  data-slot=\"dropdown-menu\"\n  data-default-open={defaultOpen}\n  data-default-value={defaultValue}\n  data-default-values={defaultValuesAttr}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-close-on-select={closeOnSelect}\n  data-highlight-item-on-hover={highlightItemOnHover}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-avoid-collisions={avoidCollisions}\n  data-collision-padding={collisionPadding}\n  data-lock-scroll={lockScroll}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dropdown-menu\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { Align, Side } from \"@data-slot/dropdown-menu\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  defaultValue?: string | null\n  defaultValues?: string[]\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  closeOnSelect?: boolean\n  highlightItemOnHover?: boolean\n  side?: Side\n  align?: Align\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  defaultValue,\n  defaultValues,\n  closeOnClickOutside,\n  closeOnEscape,\n  closeOnSelect,\n  highlightItemOnHover,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionPadding,\n  lockScroll,\n  ...props\n} = Astro.props\n\nconst defaultValuesAttr =\n  defaultValues === undefined ? undefined : JSON.stringify(defaultValues)\n---\n\n<div\n  data-slot=\"dropdown-menu\"\n  data-default-open={defaultOpen}\n  data-default-value={defaultValue === null ? \"\" : defaultValue}\n  data-default-values={defaultValuesAttr}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-close-on-select={closeOnSelect}\n  data-highlight-item-on-hover={highlightItemOnHover}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-avoid-collisions={avoidCollisions}\n  data-collision-padding={collisionPadding}\n  data-lock-scroll={lockScroll}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/dropdown-menu\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -25,17 +25,17 @@
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> &\n  HTMLAttributes<\"a\"> & {\n    as?: \"button\" | \"a\"\n    disabled?: boolean\n    variant?: \"default\" | \"destructive\"\n    inset?: boolean\n  }\n\nconst {\n  as: Tag = \"href\" in Astro.props ? \"a\" : \"button\",\n  class: className,\n  type = \"button\",\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<Tag\n  data-slot=\"dropdown-menu-item\"\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={Tag === \"button\" && disabled ? true : undefined}\n  type={Tag === \"button\" ? type : undefined}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n\n<script>\n  // Data Slot owns selection; links also need native keyboard activation.\n  document.addEventListener(\n    \"keydown\",\n    (event) => {\n      if (\n        event.defaultPrevented ||\n        event.isComposing ||\n        ![\"Enter\", \" \"].includes(event.key)\n      )\n        return\n      const item =\n        event.target instanceof Element\n          ? event.target.closest('[data-slot=\"dropdown-menu-item\"][href]')\n          : null\n      if (\n        !(item instanceof HTMLAnchorElement) ||\n        item.getAttribute(\"aria-disabled\") === \"true\"\n      )\n        return\n      event.preventDefault()\n      event.stopPropagation()\n      item.click()\n    },\n    true\n  )\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> &\n  HTMLAttributes<\"a\"> & {\n    as?: \"button\" | \"a\"\n    disabled?: boolean\n    variant?: \"default\" | \"destructive\"\n    inset?: boolean\n  }\n\nconst {\n  as: Tag = \"href\" in Astro.props ? \"a\" : \"button\",\n  class: className,\n  type = \"button\",\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<Tag\n  data-slot=\"dropdown-menu-item\"\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={Tag === \"button\" && disabled ? true : undefined}\n  type={Tag === \"button\" ? type : undefined}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n\n<script>\n  // Data Slot owns selection; links also need native keyboard activation.\n  document.addEventListener(\n    \"keydown\",\n    (event) => {\n      if (\n        event.defaultPrevented ||\n        event.isComposing ||\n        ![\"Enter\", \" \"].includes(event.key)\n      )\n        return\n      const item =\n        event.target instanceof Element\n          ? event.target.closest('[data-slot=\"dropdown-menu-item\"][href]')\n          : null\n      if (\n        !(item instanceof HTMLAnchorElement) ||\n        item.getAttribute(\"aria-disabled\") === \"true\"\n      )\n        return\n      event.preventDefault()\n      event.stopPropagation()\n      item.click()\n    },\n    true\n  )\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-radio-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-radio-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-radio-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-radio-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-radio-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-radio-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-radio-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-radio-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-radio-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-checkbox-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled}\n  data-variant={variant}\n  data-inset={inset}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-checkbox-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-checkbox-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-checkbox-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport CheckIcon from \"@lucide/astro/icons/check\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  value: string\n  defaultChecked?: boolean\n  disabled?: boolean\n  variant?: \"default\" | \"destructive\"\n  inset?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  value,\n  defaultChecked,\n  disabled,\n  variant,\n  inset,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"dropdown-menu-checkbox-item\"\n  data-value={value}\n  data-default-checked={defaultChecked}\n  data-disabled={disabled || undefined}\n  data-variant={variant}\n  data-inset={inset || undefined}\n  disabled={disabled ? true : undefined}\n  type={type}\n  class={cn(\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-checkbox-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...props}\n>\n  <span\n    data-slot=\"dropdown-menu-checkbox-item-indicator\"\n    class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n  >\n    <CheckIcon class=\"opacity-0 group-data-checked/dropdown-menu-checkbox-item:opacity-100\" />\n  </span>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
@@ -45,7 +45,7 @@
     },
     {
       "path": "src/components/ui/dropdown-menu/dropdown-menu-label.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  inset?: boolean\n}\n\nconst { class: className, inset, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"dropdown-menu-label\"\n  data-inset={inset}\n  class={cn(\"text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8\", className)}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  inset?: boolean\n}\n\nconst { class: className, inset, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"dropdown-menu-label\"\n  data-inset={inset || undefined}\n  class={cn(\"text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8\", className)}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/header.json b/public/r/styles/base-vega/header.json
index 8183e429e..4108fed3e 100644
--- a/public/r/styles/base-vega/header.json
+++ b/public/r/styles/base-vega/header.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/header/header.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-lg border bg-background shadow-sm mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-lg border bg-background shadow-sm mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/icon.json b/public/r/styles/base-vega/icon.json
index 08bcfdfad..2dd8ce89c 100644
--- a/public/r/styles/base-vega/icon.json
+++ b/public/r/styles/base-vega/icon.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/ui/icon/icon.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = Omit<HTMLAttributes<\"svg\">, \"name\" | \"href\"> & {\n  href?: HTMLAttributes<\"a\">[\"href\"]\n  name?: string | number\n}\n\nconst { name, href, ...props } = Astro.props\n\nconst hrefMap = {\n  \"x.com\": \"x\",\n  twitter: \"twitter\",\n  facebook: \"facebook\",\n  instagram: \"instagram\",\n  pinterest: \"pinterest\",\n  youtube: \"youtube\",\n  tiktok: \"tiktok\",\n  snapchat: \"snapchat\",\n  reddit: \"reddit\",\n  tumblr: \"tumblr\",\n  \"wa.me\": \"whatsapp\",\n  telegram: \"telegram\",\n  discord: \"discord\",\n  vimeo: \"vimeo\",\n  flickr: \"flickr\",\n  yelp: \"yelp\",\n  spotify: \"spotify\",\n  behance: \"behance\",\n  dribbble: \"dribbble\",\n  soundcloud: \"soundcloud\",\n  github: \"github\",\n  twitch: \"twitch\",\n  \"tel:\": \"phone\",\n  \"mailto:\": \"mail\",\n  \"maps.app.goo.gl\": \"map-pin\",\n  linkedin: \"linkedin\",\n} as const\n\ntype Source = \"lucide\" | \"simple\"\n\nconst icons: Record<Source, Record<string, () => Promise<unknown>>> = {\n  lucide: import.meta.glob(\"/node_modules/lucide-static/icons/*.svg\"),\n  simple: import.meta.glob(\"/node_modules/simple-icons/icons/*.svg\"),\n}\n\nconst pathFor = (source: Source, icon: string) =>\n  source === \"lucide\"\n    ? `/node_modules/lucide-static/icons/${icon}.svg`\n    : `/node_modules/simple-icons/icons/${icon}.svg`\n\n// Resolve an icon by explicit name, or derive one from a link href.\n// Names may be prefixed with `lucide:` or `simple:` to pick a set when both\n// sets contain the same name (for example `github` or `figma`).\nconst hasName = name != null && name !== \"\"\n\nconst resolve = () => {\n  let key = hasName ? String(name) : undefined\n  let order: Source[] = [\"lucide\", \"simple\"]\n\n  if (!key && href) {\n    const hrefKey = Object.keys(hrefMap).find((candidate) =>\n      href.toString().includes(candidate)\n    )\n    if (hrefKey) {\n      key = hrefMap[hrefKey as keyof typeof hrefMap]\n      order = [\"simple\", \"lucide\"]\n    }\n  }\n\n  const linkIcon = {\n    source: \"lucide\" as const,\n    path: pathFor(\"lucide\", \"link\"),\n  }\n\n  if (!key) return href ? linkIcon : undefined\n  if (key === \"x.com\") key = \"simple:x\"\n\n  const [prefix, icon] = key.includes(\":\") ? key.split(\":\") : [undefined, key]\n  if (prefix === \"lucide\" || prefix === \"simple\") order = [prefix]\n\n  for (const source of order) {\n    const path = pathFor(source, icon)\n    if (path in icons[source]) return { source, path }\n  }\n\n  // A link always gets an icon, even when its brand has no logo in either set\n  // (Simple Icons removed LinkedIn, for example).\n  if (!hasName && href) return linkIcon\n\n  return undefined\n}\n\nconst resolved = resolve()\nconst module = resolved\n  ? ((await icons[resolved.source][resolved.path]()) as { default?: any })\n  : undefined\nconst Comp = module?.default\n\nconst isLabelled =\n  \"aria-label\" in props || \"aria-labelledby\" in props || \"role\" in props\n---\n\n{Comp && resolved && (\n  <Comp\n    height={24}\n    width={24}\n    fill={resolved.source === \"simple\" ? \"currentColor\" : \"none\"}\n    class=\"size-[1em] text-base\"\n    aria-hidden={isLabelled ? undefined : \"true\"}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = Omit<HTMLAttributes<\"svg\">, \"name\" | \"href\"> & {\n  href?: HTMLAttributes<\"a\">[\"href\"]\n  name?: string | number\n}\n\nconst { name, href, \"data-slot\": dataSlot = \"icon\", ...props } = Astro.props\n\nconst hrefMap = {\n  \"x.com\": \"x\",\n  twitter: \"twitter\",\n  facebook: \"facebook\",\n  instagram: \"instagram\",\n  pinterest: \"pinterest\",\n  youtube: \"youtube\",\n  tiktok: \"tiktok\",\n  snapchat: \"snapchat\",\n  reddit: \"reddit\",\n  tumblr: \"tumblr\",\n  \"wa.me\": \"whatsapp\",\n  telegram: \"telegram\",\n  discord: \"discord\",\n  vimeo: \"vimeo\",\n  flickr: \"flickr\",\n  yelp: \"yelp\",\n  spotify: \"spotify\",\n  behance: \"behance\",\n  dribbble: \"dribbble\",\n  soundcloud: \"soundcloud\",\n  github: \"github\",\n  twitch: \"twitch\",\n  \"tel:\": \"phone\",\n  \"mailto:\": \"mail\",\n  \"maps.app.goo.gl\": \"map-pin\",\n  linkedin: \"linkedin\",\n} as const\n\ntype Source = \"lucide\" | \"simple\"\n\nconst icons: Record<Source, Record<string, () => Promise<unknown>>> = {\n  lucide: import.meta.glob(\"/node_modules/lucide-static/icons/*.svg\"),\n  simple: import.meta.glob(\"/node_modules/simple-icons/icons/*.svg\"),\n}\n\nconst pathFor = (source: Source, icon: string) =>\n  source === \"lucide\"\n    ? `/node_modules/lucide-static/icons/${icon}.svg`\n    : `/node_modules/simple-icons/icons/${icon}.svg`\n\n// Resolve an icon by explicit name, or derive one from a link href.\n// Names may be prefixed with `lucide:` or `simple:` to pick a set when both\n// sets contain the same name (for example `github` or `figma`).\nconst hasName = name != null && name !== \"\"\n\nconst resolve = () => {\n  let key = hasName ? String(name) : undefined\n  let order: Source[] = [\"lucide\", \"simple\"]\n\n  if (!key && href) {\n    const hrefKey = Object.keys(hrefMap).find((candidate) =>\n      href.toString().includes(candidate)\n    )\n    if (hrefKey) {\n      key = hrefMap[hrefKey as keyof typeof hrefMap]\n      order = [\"simple\", \"lucide\"]\n    }\n  }\n\n  const linkIcon = {\n    source: \"lucide\" as const,\n    path: pathFor(\"lucide\", \"link\"),\n  }\n\n  if (!key) return href ? linkIcon : undefined\n  if (key === \"x.com\") key = \"simple:x\"\n\n  const [prefix, icon] = key.includes(\":\") ? key.split(\":\") : [undefined, key]\n  if (prefix === \"lucide\" || prefix === \"simple\") order = [prefix]\n\n  for (const source of order) {\n    const path = pathFor(source, icon)\n    if (path in icons[source]) return { source, path }\n  }\n\n  // A link always gets an icon, even when its brand has no logo in either set\n  // (Simple Icons removed LinkedIn, for example).\n  if (!hasName && href) return linkIcon\n\n  return undefined\n}\n\nconst resolved = resolve()\nconst module = resolved\n  ? ((await icons[resolved.source][resolved.path]()) as { default?: any })\n  : undefined\nconst Comp = module?.default\n\nconst isLabelled =\n  \"aria-label\" in props || \"aria-labelledby\" in props || \"role\" in props\n---\n\n{Comp && resolved && (\n  <Comp\n    height={24}\n    width={24}\n    fill={resolved.source === \"simple\" ? \"currentColor\" : \"none\"}\n    class=\"size-[1em] text-base\"\n    aria-hidden={isLabelled ? undefined : \"true\"}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/item.json b/public/r/styles/base-vega/item.json
index 0f2fe9532..64d67cdfb 100644
--- a/public/r/styles/base-vega/item.json
+++ b/public/r/styles/base-vega/item.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/item/item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-md border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = href ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-md border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/layout.json b/public/r/styles/base-vega/layout.json
index cf7219c6e..dc22c1d3f 100644
--- a/public/r/styles/base-vega/layout.json
+++ b/public/r/styles/base-vega/layout.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/layout/layout.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport \"@/styles/global.css\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"html\">\n\nconst { class: className, lang, ...props } = Astro.props\n---\n\n<html\n  class={cn(\n    \"bg-background text-foreground has-data-[variant=inset]:bg-sidebar overscroll-none scroll-smooth\",\n    className\n  )}\n  data-slot=\"layout\"\n  lang={Astro.currentLocale || \"en\"}\n  {...props}\n>\n  <slot />\n</html>\n\n<style is:global>\n  :root {\n    color-scheme: light;\n  }\n\n  .dark {\n    color-scheme: dark;\n  }\n\n  @view-transition {\n    navigation: auto;\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport \"@/styles/global.css\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"html\">\n\nconst { class: className, lang, ...props } = Astro.props\n---\n\n<html\n  class={cn(\n    \"bg-background text-foreground has-data-[variant=inset]:bg-sidebar overscroll-none scroll-smooth\",\n    className\n  )}\n  data-slot=\"layout\"\n  lang={lang || Astro.currentLocale || \"en\"}\n  {...props}\n>\n  <slot />\n</html>\n\n<style is:global>\n  :root {\n    color-scheme: light;\n  }\n\n  .dark {\n    color-scheme: dark;\n  }\n\n  @view-transition {\n    navigation: auto;\n  }\n</style>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/logo.json b/public/r/styles/base-vega/logo.json
index 5118dce00..fbaefd162 100644
--- a/public/r/styles/base-vega/logo.json
+++ b/public/r/styles/base-vega/logo.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/logo/logo.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst { class: className, href, ...props } = Astro.props\n\nconst Comp = href ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-base font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-base font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/logo/logo-text.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<span class={cn(\"text-lg\", className)} {...props}>\n  <slot />\n</span>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"logo-text\",\n  ...props\n} = Astro.props\n---\n\n<span class={cn(\"text-lg\", className)} data-slot={dataSlot} {...props}>\n  <slot />\n</span>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/marquee.json b/public/r/styles/base-vega/marquee.json
index 25fc597f2..c932b246a 100644
--- a/public/r/styles/base-vega/marquee.json
+++ b/public/r/styles/base-vega/marquee.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  data-slot={dataSlot}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/navigation-menu.json b/public/r/styles/base-vega/navigation-menu.json
index 297f589e6..5e76cdea7 100644
--- a/public/r/styles/base-vega/navigation-menu.json
+++ b/public/r/styles/base-vega/navigation-menu.json
@@ -25,7 +25,7 @@
     },
     {
       "path": "src/components/ui/navigation-menu/navigation-menu-link.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  active?: boolean\n}\n\nconst { class: className, active, ...props } = Astro.props\n---\n\n<a\n  data-slot=\"navigation-menu-link\"\n  data-active={active ? \"true\" : undefined}\n  class={cn(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-md p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 in-data-[slot=navigation-menu-content]:rounded-sm\", className)}\n  {...props}\n>\n  <slot />\n</a>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  active?: boolean\n}\n\nconst {\n  class: className,\n  active,\n  \"aria-current\": ariaCurrent = active ? \"page\" : undefined,\n  ...props\n} = Astro.props\n---\n\n<a\n  data-slot=\"navigation-menu-link\"\n  data-active={active ? \"true\" : undefined}\n  aria-current={ariaCurrent}\n  class={cn(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-md p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 in-data-[slot=navigation-menu-content]:rounded-sm\", className)}\n  {...props}\n>\n  <slot />\n</a>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/price.json b/public/r/styles/base-vega/price.json
index da3b26c9f..d815f6576 100644
--- a/public/r/styles/base-vega/price.json
+++ b/public/r/styles/base-vega/price.json
@@ -6,17 +6,17 @@
   "files": [
     {
       "path": "src/components/ui/price/price.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div class={cn(\"flex flex-wrap items-center gap-x-2\", className)} {...props}>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"price\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\"flex flex-wrap items-center gap-x-2\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/price/price-unit.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<span\n  class={cn(\"text-muted-foreground text-sm leading-tight\", className)}\n  {...props}\n>\n  / <slot />\n</span>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"price-unit\",\n  ...props\n} = Astro.props\n---\n\n<span\n  class={cn(\"text-muted-foreground text-sm leading-tight\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  / <slot />\n</span>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/price/price-value.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/rating.json b/public/r/styles/base-vega/rating.json
index 7490c6dbb..57afb7920 100644
--- a/public/r/styles/base-vega/rating.json
+++ b/public/r/styles/base-vega/rating.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/rating/rating.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport Star from \"@lucide/astro/icons/star\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  value?: number\n}\n\nconst {\n  value = 5,\n  class: className,\n  \"aria-label\": ariaLabel = `Rated ${value} out of 5`,\n  ...props\n} = Astro.props\n---\n\n<div\n  role=\"img\"\n  aria-label={ariaLabel}\n  class={cn(\"flex items-center gap-1 text-base\", className)}\n  {...props}\n>\n  {Array.from({ length: 5 }).map((_, index) => {\n    const fillPercentage =\n      index < Math.floor(value)\n        ? 100\n        : index === Math.floor(value)\n          ? (value % 1) * 100\n          : 0\n\n    return (\n      <span\n        aria-hidden=\"true\"\n        class=\"text-muted-foreground/25 relative inline-flex size-[1em]\"\n      >\n        <Star class=\"size-[1em] fill-current\" />\n        {fillPercentage > 0 && (\n          <span\n            class=\"text-primary absolute inset-0 overflow-hidden\"\n            style={{ width: `${fillPercentage}%` }}\n          >\n            <Star class=\"size-[1em] fill-current\" />\n          </span>\n        )}\n      </span>\n    )\n  })}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport Star from \"@lucide/astro/icons/star\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  value?: number\n}\n\nconst {\n  value = 5,\n  class: className,\n  \"aria-label\": ariaLabel = `Rated ${value} out of 5`,\n  \"data-slot\": dataSlot = \"rating\",\n  ...props\n} = Astro.props\n---\n\n<div\n  role=\"img\"\n  aria-label={ariaLabel}\n  class={cn(\"flex items-center gap-1 text-base\", className)}\n  data-slot={dataSlot}\n  {...props}\n>\n  {Array.from({ length: 5 }).map((_, index) => {\n    const fillPercentage =\n      index < Math.floor(value)\n        ? 100\n        : index === Math.floor(value)\n          ? (value % 1) * 100\n          : 0\n\n    return (\n      <span\n        aria-hidden=\"true\"\n        class=\"text-muted-foreground/25 relative inline-flex size-[1em]\"\n      >\n        <Star class=\"size-[1em] fill-current\" />\n        {fillPercentage > 0 && (\n          <span\n            class=\"text-primary absolute inset-0 overflow-hidden\"\n            style={{ width: `${fillPercentage}%` }}\n          >\n            <Star class=\"size-[1em] fill-current\" />\n          </span>\n        )}\n      </span>\n    )\n  })}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/section.json b/public/r/styles/base-vega/section.json
index 1f4c5a200..bfdcd376b 100644
--- a/public/r/styles/base-vega/section.json
+++ b/public/r/styles/base-vega/section.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/section/section.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-16 py-[var(--section-padding,--spacing(16))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-16 rounded-xl border bg-background shadow-md mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-16 py-[var(--section-padding,--spacing(16))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-16 rounded-xl border bg-background shadow-md mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/theme-toggle.json b/public/r/styles/base-vega/theme-toggle.json
index 60e1a6dcc..9fbadda9c 100644
--- a/public/r/styles/base-vega/theme-toggle.json
+++ b/public/r/styles/base-vega/theme-toggle.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/ui/theme-toggle/theme-toggle.astro",
-      "content": "---\nimport type { ComponentProps } from \"astro/types\"\nimport Moon from \"@lucide/astro/icons/moon\"\nimport Sun from \"@lucide/astro/icons/sun\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = ComponentProps<typeof Button>\n\nconst {\n  class: className,\n  variant = \"ghost\",\n  size = \"icon-sm\",\n  ...props\n} = Astro.props\n---\n\n<Button\n  data-theme-toggle\n  aria-label=\"Toggle theme\"\n  variant={variant}\n  size={size}\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <Sun class=\"dark:hidden\" />\n  <Moon class=\"hidden dark:block\" />\n  <span class=\"sr-only\">Toggle theme</span>\n</Button>\n\n<script is:inline>\n  if (!window.__themeToggleHandlersInitialized) {\n    window.__themeToggleHandlersInitialized = true\n\n    const syncThemeToggles = () => {\n      const isDark = document.documentElement.classList.contains(\"dark\")\n\n      document.querySelectorAll(\"[data-theme-toggle]\").forEach((toggle) => {\n        if (!(toggle instanceof HTMLButtonElement)) return\n\n        toggle.setAttribute(\"aria-pressed\", isDark ? \"true\" : \"false\")\n        toggle.setAttribute(\"data-state\", isDark ? \"on\" : \"off\")\n\n        if (isDark) {\n          toggle.setAttribute(\"data-pressed\", \"\")\n        } else {\n          toggle.removeAttribute(\"data-pressed\")\n        }\n      })\n    }\n\n    syncThemeToggles()\n\n    const observer = new MutationObserver(syncThemeToggles)\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n    })\n\n    document.addEventListener(\"click\", (event) => {\n      const target = event.target\n\n      if (!(target instanceof Element)) return\n\n      const toggle = target.closest(\"[data-theme-toggle]\")\n\n      if (!(toggle instanceof HTMLButtonElement)) return\n      if (toggle.disabled) return\n\n      const isDark = document.documentElement.classList.contains(\"dark\")\n      const nextTheme = isDark ? \"light\" : \"dark\"\n\n      if (typeof window.__setTheme === \"function\") {\n        window.__setTheme(nextTheme)\n        return\n      }\n\n      document.documentElement.classList[\n        nextTheme === \"dark\" ? \"add\" : \"remove\"\n      ](\"dark\")\n    })\n  }\n</script>\n",
+      "content": "---\nimport type { ComponentProps } from \"astro/types\"\nimport Moon from \"@lucide/astro/icons/moon\"\nimport Sun from \"@lucide/astro/icons/sun\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = ComponentProps<typeof Button> & {\n  disabled?: boolean\n}\n\nconst {\n  class: className,\n  variant = \"ghost\",\n  size = \"icon-sm\",\n  ...props\n} = Astro.props\n---\n\n<Button\n  data-theme-toggle\n  aria-label=\"Toggle theme\"\n  variant={variant}\n  size={size}\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <Sun class=\"dark:hidden\" />\n  <Moon class=\"hidden dark:block\" />\n  <span class=\"sr-only\">Toggle theme</span>\n</Button>\n\n<script is:inline>\n  if (!window.__themeToggleHandlersInitialized) {\n    window.__themeToggleHandlersInitialized = true\n\n    const syncThemeToggles = () => {\n      const isDark = document.documentElement.classList.contains(\"dark\")\n\n      document.querySelectorAll(\"[data-theme-toggle]\").forEach((toggle) => {\n        if (!(toggle instanceof HTMLButtonElement)) return\n\n        toggle.setAttribute(\"aria-pressed\", isDark ? \"true\" : \"false\")\n        toggle.setAttribute(\"data-state\", isDark ? \"on\" : \"off\")\n\n        if (isDark) {\n          toggle.setAttribute(\"data-pressed\", \"\")\n        } else {\n          toggle.removeAttribute(\"data-pressed\")\n        }\n      })\n    }\n\n    syncThemeToggles()\n    document.addEventListener(\"astro:page-load\", syncThemeToggles)\n\n    const observer = new MutationObserver(syncThemeToggles)\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n    })\n\n    document.addEventListener(\"click\", (event) => {\n      const target = event.target\n\n      if (!(target instanceof Element)) return\n\n      const toggle = target.closest(\"[data-theme-toggle]\")\n\n      if (!(toggle instanceof HTMLButtonElement)) return\n      if (toggle.disabled) return\n\n      const isDark = document.documentElement.classList.contains(\"dark\")\n      const nextTheme = isDark ? \"light\" : \"dark\"\n\n      if (typeof window.__setTheme === \"function\") {\n        window.__setTheme(nextTheme)\n        return\n      }\n\n      document.documentElement.classList[\n        nextTheme === \"dark\" ? \"add\" : \"remove\"\n      ](\"dark\")\n    })\n  }\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/toast.json b/public/r/styles/base-vega/toast.json
index efa1a9d7a..19f5528dc 100644
--- a/public/r/styles/base-vega/toast.json
+++ b/public/r/styles/base-vega/toast.json
@@ -18,7 +18,7 @@
     },
     {
       "path": "src/components/ui/toast/toast-action.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  hidden = true,\n  type = \"button\",\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"toast-action\"\n  type={type}\n  class={cn(buttonVariants({ variant: \"outline\", size: \"sm\" }), className)}\n  hidden={hidden}\n  {...props}\n>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  hidden = true,\n  type = \"button\",\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"toast-action\"\n  data-variant=\"outline\"\n  data-size=\"sm\"\n  type={type}\n  class={cn(buttonVariants({ variant: \"outline\", size: \"sm\" }), className)}\n  hidden={hidden}\n  {...props}\n>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/toc.json b/public/r/styles/base-vega/toc.json
index b83d9608f..f8ad7c489 100644
--- a/public/r/styles/base-vega/toc.json
+++ b/public/r/styles/base-vega/toc.json
@@ -26,7 +26,7 @@
     },
     {
       "path": "src/components/ui/toc/toc-menu-link.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  depth?: number\n  isActive?: boolean\n  active?: boolean\n}\n\nconst {\n  class: className,\n  depth = 2,\n  isActive,\n  active = false,\n  ...props\n} = Astro.props\n\nconst resolvedActive = isActive ?? active\n---\n\n<a\n  data-slot=\"toc-menu-link\"\n  data-depth={depth}\n  data-active={resolvedActive ? \"true\" : undefined}\n  aria-current={resolvedActive ? \"location\" : undefined}\n  class={cn(\n    \"text-sm leading-6 text-muted-foreground hover:text-foreground data-[active=true]:text-foreground block transition-colors\",\n    depth === 3 && \"pl-4\",\n    depth >= 4 && \"pl-8\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</a>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  depth?: number\n  isActive?: boolean\n  active?: boolean\n}\n\nconst {\n  class: className,\n  depth = 2,\n  isActive,\n  active = false,\n  ...props\n} = Astro.props\n\nconst resolvedActive = isActive ?? active\n---\n\n<a\n  data-slot=\"toc-menu-link\"\n  data-depth={depth}\n  data-active={resolvedActive ? \"true\" : undefined}\n  aria-current={resolvedActive ? \"location\" : undefined}\n  class={cn(\n    \"text-sm leading-6 text-muted-foreground hover:text-foreground data-[active=true]:text-foreground block transition-colors\",\n    depth === 3 && \"ps-4\",\n    depth >= 4 && \"ps-8\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</a>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/typography.json b/public/r/styles/base-vega/typography.json
index ab74fdb67..9e858ad36 100644
--- a/public/r/styles/base-vega/typography.json
+++ b/public/r/styles/base-vega/typography.json
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/typography/typography-blockquote.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"blockquote\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<blockquote\n  data-slot=\"typography-blockquote\"\n  data-size={size}\n  class={cn(\"mt-6 border-l-2 pl-6 italic\", sizeClass, className)}\n  {...props}\n>\n  <slot />\n</blockquote>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"blockquote\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<blockquote\n  data-slot=\"typography-blockquote\"\n  data-size={size}\n  class={cn(\"mt-6 border-s-2 ps-6 italic\", sizeClass, className)}\n  {...props}\n>\n  <slot />\n</blockquote>\n",
       "type": "registry:ui"
     },
     {
@@ -51,7 +51,7 @@
     },
     {
       "path": "src/components/ui/typography/typography-list.astro",
-      "content": "---\nimport type { Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props<Tag extends \"ul\" | \"ol\"> = Polymorphic<{ as: Tag; size?: Size }>\n\nconst {\n  as: Tag = \"ul\",\n  class: className,\n  size = \"default\",\n  ...props\n} = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<Tag\n  data-slot=\"typography-list\"\n  data-size={size}\n  data-ordered={Tag === \"ol\" ? \"\" : undefined}\n  class={cn(\n    \"my-6 ml-6\",\n    Tag === \"ol\" ? \"list-decimal\" : \"list-disc\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n",
+      "content": "---\nimport type { Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props<Tag extends \"ul\" | \"ol\"> = Polymorphic<{ as: Tag; size?: Size }>\n\nconst {\n  as: Tag = \"ul\",\n  class: className,\n  size = \"default\",\n  ...props\n} = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<Tag\n  data-slot=\"typography-list\"\n  data-size={size}\n  data-ordered={Tag === \"ol\" ? \"\" : undefined}\n  class={cn(\n    \"my-6 ms-6\",\n    Tag === \"ol\" ? \"list-decimal\" : \"list-disc\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n",
       "type": "registry:ui"
     },
     {
@@ -76,12 +76,12 @@
     },
     {
       "path": "src/components/ui/typography/typography-table-head.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-left font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/typography/typography-table-cell.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-left align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/video.json b/public/r/styles/base-vega/video.json
index 5c9d5d2a3..cab2ef605 100644
--- a/public/r/styles/base-vega/video.json
+++ b/public/r/styles/base-vega/video.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/video/video.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"src\"> & {\n  src?: string\n}\n\nconst { class: className, src, ...props } = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title=\"Embedded video\"\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-lg border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-lg border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/theme-toggle.json b/public/r/theme-toggle.json
index 60e1a6dcc..9fbadda9c 100644
--- a/public/r/theme-toggle.json
+++ b/public/r/theme-toggle.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/ui/theme-toggle/theme-toggle.astro",
-      "content": "---\nimport type { ComponentProps } from \"astro/types\"\nimport Moon from \"@lucide/astro/icons/moon\"\nimport Sun from \"@lucide/astro/icons/sun\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = ComponentProps<typeof Button>\n\nconst {\n  class: className,\n  variant = \"ghost\",\n  size = \"icon-sm\",\n  ...props\n} = Astro.props\n---\n\n<Button\n  data-theme-toggle\n  aria-label=\"Toggle theme\"\n  variant={variant}\n  size={size}\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <Sun class=\"dark:hidden\" />\n  <Moon class=\"hidden dark:block\" />\n  <span class=\"sr-only\">Toggle theme</span>\n</Button>\n\n<script is:inline>\n  if (!window.__themeToggleHandlersInitialized) {\n    window.__themeToggleHandlersInitialized = true\n\n    const syncThemeToggles = () => {\n      const isDark = document.documentElement.classList.contains(\"dark\")\n\n      document.querySelectorAll(\"[data-theme-toggle]\").forEach((toggle) => {\n        if (!(toggle instanceof HTMLButtonElement)) return\n\n        toggle.setAttribute(\"aria-pressed\", isDark ? \"true\" : \"false\")\n        toggle.setAttribute(\"data-state\", isDark ? \"on\" : \"off\")\n\n        if (isDark) {\n          toggle.setAttribute(\"data-pressed\", \"\")\n        } else {\n          toggle.removeAttribute(\"data-pressed\")\n        }\n      })\n    }\n\n    syncThemeToggles()\n\n    const observer = new MutationObserver(syncThemeToggles)\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n    })\n\n    document.addEventListener(\"click\", (event) => {\n      const target = event.target\n\n      if (!(target instanceof Element)) return\n\n      const toggle = target.closest(\"[data-theme-toggle]\")\n\n      if (!(toggle instanceof HTMLButtonElement)) return\n      if (toggle.disabled) return\n\n      const isDark = document.documentElement.classList.contains(\"dark\")\n      const nextTheme = isDark ? \"light\" : \"dark\"\n\n      if (typeof window.__setTheme === \"function\") {\n        window.__setTheme(nextTheme)\n        return\n      }\n\n      document.documentElement.classList[\n        nextTheme === \"dark\" ? \"add\" : \"remove\"\n      ](\"dark\")\n    })\n  }\n</script>\n",
+      "content": "---\nimport type { ComponentProps } from \"astro/types\"\nimport Moon from \"@lucide/astro/icons/moon\"\nimport Sun from \"@lucide/astro/icons/sun\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = ComponentProps<typeof Button> & {\n  disabled?: boolean\n}\n\nconst {\n  class: className,\n  variant = \"ghost\",\n  size = \"icon-sm\",\n  ...props\n} = Astro.props\n---\n\n<Button\n  data-theme-toggle\n  aria-label=\"Toggle theme\"\n  variant={variant}\n  size={size}\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <Sun class=\"dark:hidden\" />\n  <Moon class=\"hidden dark:block\" />\n  <span class=\"sr-only\">Toggle theme</span>\n</Button>\n\n<script is:inline>\n  if (!window.__themeToggleHandlersInitialized) {\n    window.__themeToggleHandlersInitialized = true\n\n    const syncThemeToggles = () => {\n      const isDark = document.documentElement.classList.contains(\"dark\")\n\n      document.querySelectorAll(\"[data-theme-toggle]\").forEach((toggle) => {\n        if (!(toggle instanceof HTMLButtonElement)) return\n\n        toggle.setAttribute(\"aria-pressed\", isDark ? \"true\" : \"false\")\n        toggle.setAttribute(\"data-state\", isDark ? \"on\" : \"off\")\n\n        if (isDark) {\n          toggle.setAttribute(\"data-pressed\", \"\")\n        } else {\n          toggle.removeAttribute(\"data-pressed\")\n        }\n      })\n    }\n\n    syncThemeToggles()\n    document.addEventListener(\"astro:page-load\", syncThemeToggles)\n\n    const observer = new MutationObserver(syncThemeToggles)\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n    })\n\n    document.addEventListener(\"click\", (event) => {\n      const target = event.target\n\n      if (!(target instanceof Element)) return\n\n      const toggle = target.closest(\"[data-theme-toggle]\")\n\n      if (!(toggle instanceof HTMLButtonElement)) return\n      if (toggle.disabled) return\n\n      const isDark = document.documentElement.classList.contains(\"dark\")\n      const nextTheme = isDark ? \"light\" : \"dark\"\n\n      if (typeof window.__setTheme === \"function\") {\n        window.__setTheme(nextTheme)\n        return\n      }\n\n      document.documentElement.classList[\n        nextTheme === \"dark\" ? \"add\" : \"remove\"\n      ](\"dark\")\n    })\n  }\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/toast.json b/public/r/toast.json
index efa1a9d7a..19f5528dc 100644
--- a/public/r/toast.json
+++ b/public/r/toast.json
@@ -18,7 +18,7 @@
     },
     {
       "path": "src/components/ui/toast/toast-action.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  hidden = true,\n  type = \"button\",\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"toast-action\"\n  type={type}\n  class={cn(buttonVariants({ variant: \"outline\", size: \"sm\" }), className)}\n  hidden={hidden}\n  {...props}\n>\n  <slot />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  hidden = true,\n  type = \"button\",\n  ...props\n} = Astro.props\n---\n\n<button\n  data-slot=\"toast-action\"\n  data-variant=\"outline\"\n  data-size=\"sm\"\n  type={type}\n  class={cn(buttonVariants({ variant: \"outline\", size: \"sm\" }), className)}\n  hidden={hidden}\n  {...props}\n>\n  <slot />\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/toc.json b/public/r/toc.json
index b83d9608f..f8ad7c489 100644
--- a/public/r/toc.json
+++ b/public/r/toc.json
@@ -26,7 +26,7 @@
     },
     {
       "path": "src/components/ui/toc/toc-menu-link.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  depth?: number\n  isActive?: boolean\n  active?: boolean\n}\n\nconst {\n  class: className,\n  depth = 2,\n  isActive,\n  active = false,\n  ...props\n} = Astro.props\n\nconst resolvedActive = isActive ?? active\n---\n\n<a\n  data-slot=\"toc-menu-link\"\n  data-depth={depth}\n  data-active={resolvedActive ? \"true\" : undefined}\n  aria-current={resolvedActive ? \"location\" : undefined}\n  class={cn(\n    \"text-sm leading-6 text-muted-foreground hover:text-foreground data-[active=true]:text-foreground block transition-colors\",\n    depth === 3 && \"pl-4\",\n    depth >= 4 && \"pl-8\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</a>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"a\"> & {\n  depth?: number\n  isActive?: boolean\n  active?: boolean\n}\n\nconst {\n  class: className,\n  depth = 2,\n  isActive,\n  active = false,\n  ...props\n} = Astro.props\n\nconst resolvedActive = isActive ?? active\n---\n\n<a\n  data-slot=\"toc-menu-link\"\n  data-depth={depth}\n  data-active={resolvedActive ? \"true\" : undefined}\n  aria-current={resolvedActive ? \"location\" : undefined}\n  class={cn(\n    \"text-sm leading-6 text-muted-foreground hover:text-foreground data-[active=true]:text-foreground block transition-colors\",\n    depth === 3 && \"ps-4\",\n    depth >= 4 && \"ps-8\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</a>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/typography.json b/public/r/typography.json
index ab74fdb67..9e858ad36 100644
--- a/public/r/typography.json
+++ b/public/r/typography.json
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/typography/typography-blockquote.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"blockquote\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<blockquote\n  data-slot=\"typography-blockquote\"\n  data-size={size}\n  class={cn(\"mt-6 border-l-2 pl-6 italic\", sizeClass, className)}\n  {...props}\n>\n  <slot />\n</blockquote>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"blockquote\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<blockquote\n  data-slot=\"typography-blockquote\"\n  data-size={size}\n  class={cn(\"mt-6 border-s-2 ps-6 italic\", sizeClass, className)}\n  {...props}\n>\n  <slot />\n</blockquote>\n",
       "type": "registry:ui"
     },
     {
@@ -51,7 +51,7 @@
     },
     {
       "path": "src/components/ui/typography/typography-list.astro",
-      "content": "---\nimport type { Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props<Tag extends \"ul\" | \"ol\"> = Polymorphic<{ as: Tag; size?: Size }>\n\nconst {\n  as: Tag = \"ul\",\n  class: className,\n  size = \"default\",\n  ...props\n} = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<Tag\n  data-slot=\"typography-list\"\n  data-size={size}\n  data-ordered={Tag === \"ol\" ? \"\" : undefined}\n  class={cn(\n    \"my-6 ml-6\",\n    Tag === \"ol\" ? \"list-decimal\" : \"list-disc\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n",
+      "content": "---\nimport type { Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props<Tag extends \"ul\" | \"ol\"> = Polymorphic<{ as: Tag; size?: Size }>\n\nconst {\n  as: Tag = \"ul\",\n  class: className,\n  size = \"default\",\n  ...props\n} = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<Tag\n  data-slot=\"typography-list\"\n  data-size={size}\n  data-ordered={Tag === \"ol\" ? \"\" : undefined}\n  class={cn(\n    \"my-6 ms-6\",\n    Tag === \"ol\" ? \"list-decimal\" : \"list-disc\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n",
       "type": "registry:ui"
     },
     {
@@ -76,12 +76,12 @@
     },
     {
       "path": "src/components/ui/typography/typography-table-head.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-left font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/typography/typography-table-cell.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-left align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/video.json b/public/r/video.json
index 5c9d5d2a3..cab2ef605 100644
--- a/public/r/video.json
+++ b/public/r/video.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/video/video.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"src\"> & {\n  src?: string\n}\n\nconst { class: className, src, ...props } = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title=\"Embedded video\"\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-lg border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-lg border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {

From f45fea1f86971d2b68e799406226dd1032202ccd Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 14:35:49 +0200
Subject: [PATCH 05/60] Let Video callers override allow and allowfullscreen

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 public/r/styles/base-luma/video.json | 2 +-
 public/r/styles/base-lyra/video.json | 2 +-
 public/r/styles/base-maia/video.json | 2 +-
 public/r/styles/base-mira/video.json | 2 +-
 public/r/styles/base-nova/video.json | 2 +-
 public/r/styles/base-rhea/video.json | 2 +-
 public/r/styles/base-sera/video.json | 2 +-
 public/r/styles/base-vega/video.json | 2 +-
 public/r/video.json                  | 2 +-
 src/components/ui/video/video.astro  | 6 ++++--
 10 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/public/r/styles/base-luma/video.json b/public/r/styles/base-luma/video.json
index f8bbcfeb4..81eb85e5a 100644
--- a/public/r/styles/base-luma/video.json
+++ b/public/r/styles/base-luma/video.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/video/video.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-3xl border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  allow = \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\",\n  allowfullscreen = true,\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow={allow}\n    allowfullscreen={allowfullscreen}\n    class={cn(\n      \"rounded-3xl border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/video.json b/public/r/styles/base-lyra/video.json
index 7545d0467..842516d49 100644
--- a/public/r/styles/base-lyra/video.json
+++ b/public/r/styles/base-lyra/video.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/video/video.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-none border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  allow = \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\",\n  allowfullscreen = true,\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow={allow}\n    allowfullscreen={allowfullscreen}\n    class={cn(\n      \"rounded-none border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/video.json b/public/r/styles/base-maia/video.json
index 4ac4944b8..b789201e1 100644
--- a/public/r/styles/base-maia/video.json
+++ b/public/r/styles/base-maia/video.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/video/video.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-2xl border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  allow = \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\",\n  allowfullscreen = true,\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow={allow}\n    allowfullscreen={allowfullscreen}\n    class={cn(\n      \"rounded-2xl border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/video.json b/public/r/styles/base-mira/video.json
index 3c90d9280..6f39c76e7 100644
--- a/public/r/styles/base-mira/video.json
+++ b/public/r/styles/base-mira/video.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/video/video.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-md border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  allow = \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\",\n  allowfullscreen = true,\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow={allow}\n    allowfullscreen={allowfullscreen}\n    class={cn(\n      \"rounded-md border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/video.json b/public/r/styles/base-nova/video.json
index cab2ef605..c8d7ce889 100644
--- a/public/r/styles/base-nova/video.json
+++ b/public/r/styles/base-nova/video.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/video/video.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-lg border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  allow = \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\",\n  allowfullscreen = true,\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow={allow}\n    allowfullscreen={allowfullscreen}\n    class={cn(\n      \"rounded-lg border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/video.json b/public/r/styles/base-rhea/video.json
index 4ac4944b8..b789201e1 100644
--- a/public/r/styles/base-rhea/video.json
+++ b/public/r/styles/base-rhea/video.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/video/video.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-2xl border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  allow = \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\",\n  allowfullscreen = true,\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow={allow}\n    allowfullscreen={allowfullscreen}\n    class={cn(\n      \"rounded-2xl border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/video.json b/public/r/styles/base-sera/video.json
index 7545d0467..842516d49 100644
--- a/public/r/styles/base-sera/video.json
+++ b/public/r/styles/base-sera/video.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/video/video.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-none border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  allow = \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\",\n  allowfullscreen = true,\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow={allow}\n    allowfullscreen={allowfullscreen}\n    class={cn(\n      \"rounded-none border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/video.json b/public/r/styles/base-vega/video.json
index cab2ef605..c8d7ce889 100644
--- a/public/r/styles/base-vega/video.json
+++ b/public/r/styles/base-vega/video.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/video/video.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-lg border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  allow = \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\",\n  allowfullscreen = true,\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow={allow}\n    allowfullscreen={allowfullscreen}\n    class={cn(\n      \"rounded-lg border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/video.json b/public/r/video.json
index cab2ef605..c8d7ce889 100644
--- a/public/r/video.json
+++ b/public/r/video.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/video/video.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen\n    class={cn(\n      \"rounded-lg border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Omit<HTMLAttributes<\"iframe\">, \"src\"> & {\n  src?: string\n}\n\nconst {\n  class: className,\n  src,\n  title = \"Embedded video\",\n  allow = \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\",\n  allowfullscreen = true,\n  \"data-slot\": dataSlot = \"video\",\n  ...props\n} = Astro.props\n\nconst getEmbedSrc = (value?: string) => {\n  if (!value) return undefined\n\n  try {\n    const url = new URL(value)\n    const host = url.hostname.replace(/^www\\./, \"\")\n\n    if (host === \"youtube.com\" && url.pathname === \"/watch\") {\n      const id = url.searchParams.get(\"v\")\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtube.com\" && url.pathname.startsWith(\"/shorts/\")) {\n      const id = url.pathname.split(\"/\")[2]\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n\n    if (host === \"youtu.be\") {\n      const id = url.pathname.slice(1)\n      return id ? `https://www.youtube-nocookie.com/embed/${id}` : undefined\n    }\n  } catch {\n    return undefined\n  }\n}\n\nconst embedSrc = getEmbedSrc(src)\nconst isShort = src?.includes(\"/shorts/\")\n---\n\n{embedSrc && (\n  <iframe\n    src={embedSrc}\n    title={title}\n    allow={allow}\n    allowfullscreen={allowfullscreen}\n    class={cn(\n      \"rounded-lg border bg-muted w-full\",\n      isShort ? \"aspect-9/16 max-w-xs\" : \"aspect-video\",\n      className\n    )}\n    data-slot={dataSlot}\n    {...props}\n  />\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/src/components/ui/video/video.astro b/src/components/ui/video/video.astro
index 04dc3bd89..43284f978 100644
--- a/src/components/ui/video/video.astro
+++ b/src/components/ui/video/video.astro
@@ -11,6 +11,8 @@ const {
   class: className,
   src,
   title = "Embedded video",
+  allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+  allowfullscreen = true,
   "data-slot": dataSlot = "video",
   ...props
 } = Astro.props
@@ -49,8 +51,8 @@ const isShort = src?.includes("/shorts/")
   <iframe
     src={embedSrc}
     title={title}
-    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-    allowfullscreen
+    allow={allow}
+    allowfullscreen={allowfullscreen}
     class={cn(
       "cn-video w-full",
       isShort ? "aspect-9/16 max-w-xs" : "aspect-video",

From 1239b449413a61ca76b3ee63bed0779fb56c018c Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 14:37:04 +0200
Subject: [PATCH 06/60] Honor align=left on Typography table head and cell

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 public/r/styles/base-luma/typography.json                | 4 ++--
 public/r/styles/base-lyra/typography.json                | 4 ++--
 public/r/styles/base-maia/typography.json                | 4 ++--
 public/r/styles/base-mira/typography.json                | 4 ++--
 public/r/styles/base-nova/typography.json                | 4 ++--
 public/r/styles/base-rhea/typography.json                | 4 ++--
 public/r/styles/base-sera/typography.json                | 4 ++--
 public/r/styles/base-vega/typography.json                | 4 ++--
 public/r/typography.json                                 | 4 ++--
 src/components/ui/typography/typography-table-cell.astro | 2 +-
 src/components/ui/typography/typography-table-head.astro | 2 +-
 11 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/public/r/styles/base-luma/typography.json b/public/r/styles/base-luma/typography.json
index a06d0ec93..fd1924eda 100644
--- a/public/r/styles/base-luma/typography.json
+++ b/public/r/styles/base-luma/typography.json
@@ -76,12 +76,12 @@
     },
     {
       "path": "src/components/ui/typography/typography-table-head.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=left]]:text-left [&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/typography/typography-table-cell.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=left]]:text-left [&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/typography.json b/public/r/styles/base-lyra/typography.json
index f8f0aec5a..bacab852f 100644
--- a/public/r/styles/base-lyra/typography.json
+++ b/public/r/styles/base-lyra/typography.json
@@ -76,12 +76,12 @@
     },
     {
       "path": "src/components/ui/typography/typography-table-head.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=left]]:text-left [&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/typography/typography-table-cell.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=left]]:text-left [&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/typography.json b/public/r/styles/base-maia/typography.json
index a06d0ec93..fd1924eda 100644
--- a/public/r/styles/base-maia/typography.json
+++ b/public/r/styles/base-maia/typography.json
@@ -76,12 +76,12 @@
     },
     {
       "path": "src/components/ui/typography/typography-table-head.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=left]]:text-left [&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/typography/typography-table-cell.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=left]]:text-left [&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/typography.json b/public/r/styles/base-mira/typography.json
index e0dc3b115..8a6678fca 100644
--- a/public/r/styles/base-mira/typography.json
+++ b/public/r/styles/base-mira/typography.json
@@ -76,12 +76,12 @@
     },
     {
       "path": "src/components/ui/typography/typography-table-head.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=left]]:text-left [&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/typography/typography-table-cell.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=left]]:text-left [&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/typography.json b/public/r/styles/base-nova/typography.json
index 9e858ad36..272c43262 100644
--- a/public/r/styles/base-nova/typography.json
+++ b/public/r/styles/base-nova/typography.json
@@ -76,12 +76,12 @@
     },
     {
       "path": "src/components/ui/typography/typography-table-head.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=left]]:text-left [&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/typography/typography-table-cell.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=left]]:text-left [&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/typography.json b/public/r/styles/base-rhea/typography.json
index a06d0ec93..fd1924eda 100644
--- a/public/r/styles/base-rhea/typography.json
+++ b/public/r/styles/base-rhea/typography.json
@@ -76,12 +76,12 @@
     },
     {
       "path": "src/components/ui/typography/typography-table-head.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=left]]:text-left [&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/typography/typography-table-cell.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=left]]:text-left [&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/typography.json b/public/r/styles/base-sera/typography.json
index c7d5ee47c..23279e074 100644
--- a/public/r/styles/base-sera/typography.json
+++ b/public/r/styles/base-sera/typography.json
@@ -76,12 +76,12 @@
     },
     {
       "path": "src/components/ui/typography/typography-table-head.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=left]]:text-left [&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/typography/typography-table-cell.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=left]]:text-left [&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/typography.json b/public/r/styles/base-vega/typography.json
index 9e858ad36..272c43262 100644
--- a/public/r/styles/base-vega/typography.json
+++ b/public/r/styles/base-vega/typography.json
@@ -76,12 +76,12 @@
     },
     {
       "path": "src/components/ui/typography/typography-table-head.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=left]]:text-left [&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/typography/typography-table-cell.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=left]]:text-left [&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/typography.json b/public/r/typography.json
index 9e858ad36..272c43262 100644
--- a/public/r/typography.json
+++ b/public/r/typography.json
@@ -76,12 +76,12 @@
     },
     {
       "path": "src/components/ui/typography/typography-table-head.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"th\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<th\n  data-slot=\"typography-table-head\"\n  data-size={size}\n  class={cn(\n    \"border-border border-b px-4 py-3 text-start font-semibold\",\n    \"[&[align=left]]:text-left [&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</th>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/typography/typography-table-cell.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Size = \"sm\" | \"default\" | \"lg\"\ntype Props = HTMLAttributes<\"td\"> & {\n  size?: Size\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n\nconst sizeClass =\n  size === \"sm\" ? \"text-sm\" : size === \"lg\" ? \"text-lg\" : \"text-base\"\n---\n\n<td\n  data-slot=\"typography-table-cell\"\n  data-size={size}\n  class={cn(\n    \"border-border border-t px-4 py-3 text-start align-middle\",\n    \"[&[align=left]]:text-left [&[align=center]]:text-center [&[align=right]]:text-right\",\n    sizeClass,\n    className\n  )}\n  {...props}\n>\n  <slot />\n</td>\n",
       "type": "registry:ui"
     },
     {
diff --git a/src/components/ui/typography/typography-table-cell.astro b/src/components/ui/typography/typography-table-cell.astro
index 37db29c08..939d43a9f 100644
--- a/src/components/ui/typography/typography-table-cell.astro
+++ b/src/components/ui/typography/typography-table-cell.astro
@@ -19,7 +19,7 @@ const sizeClass =
   data-size={size}
   class={cn(
     "border-border border-t px-4 py-3 text-start align-middle",
-    "[&[align=center]]:text-center [&[align=right]]:text-right",
+    "[&[align=left]]:text-left [&[align=center]]:text-center [&[align=right]]:text-right",
     sizeClass,
     className
   )}
diff --git a/src/components/ui/typography/typography-table-head.astro b/src/components/ui/typography/typography-table-head.astro
index bab6df2d2..84990a829 100644
--- a/src/components/ui/typography/typography-table-head.astro
+++ b/src/components/ui/typography/typography-table-head.astro
@@ -19,7 +19,7 @@ const sizeClass =
   data-size={size}
   class={cn(
     "border-border border-b px-4 py-3 text-start font-semibold",
-    "[&[align=center]]:text-center [&[align=right]]:text-right",
+    "[&[align=left]]:text-left [&[align=center]]:text-center [&[align=right]]:text-right",
     sizeClass,
     className
   )}

From bcf7d51109f2d9ac5bf8063cecba8c916dc1f443 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 14:47:56 +0200
Subject: [PATCH 07/60] Render Item and Logo as div when href is undefined or
 null

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 public/r/item.json                  | 2 +-
 public/r/logo.json                  | 2 +-
 public/r/styles/base-luma/item.json | 2 +-
 public/r/styles/base-luma/logo.json | 2 +-
 public/r/styles/base-lyra/item.json | 2 +-
 public/r/styles/base-lyra/logo.json | 2 +-
 public/r/styles/base-maia/item.json | 2 +-
 public/r/styles/base-maia/logo.json | 2 +-
 public/r/styles/base-mira/item.json | 2 +-
 public/r/styles/base-mira/logo.json | 2 +-
 public/r/styles/base-nova/item.json | 2 +-
 public/r/styles/base-nova/logo.json | 2 +-
 public/r/styles/base-rhea/item.json | 2 +-
 public/r/styles/base-rhea/logo.json | 2 +-
 public/r/styles/base-sera/item.json | 2 +-
 public/r/styles/base-sera/logo.json | 2 +-
 public/r/styles/base-vega/item.json | 2 +-
 public/r/styles/base-vega/logo.json | 2 +-
 src/components/ui/item/item.astro   | 2 +-
 src/components/ui/logo/logo.astro   | 2 +-
 20 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/public/r/item.json b/public/r/item.json
index 64d67cdfb..783d228e5 100644
--- a/public/r/item.json
+++ b/public/r/item.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/item/item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-md border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-md border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = href != null ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/logo.json b/public/r/logo.json
index fbaefd162..56ae30c0b 100644
--- a/public/r/logo.json
+++ b/public/r/logo.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/logo/logo.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-base font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = href != null ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-base font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/item.json b/public/r/styles/base-luma/item.json
index 308a28868..c568bea92 100644
--- a/public/r/styles/base-luma/item.json
+++ b/public/r/styles/base-luma/item.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/item/item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-2xl border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-3.5 px-3.5 py-3\",\n        xs: \"gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-2xl border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-3.5 px-3.5 py-3\",\n        xs: \"gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = href != null ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/logo.json b/public/r/styles/base-luma/logo.json
index fbaefd162..56ae30c0b 100644
--- a/public/r/styles/base-luma/logo.json
+++ b/public/r/styles/base-luma/logo.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/logo/logo.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-base font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = href != null ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-base font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/item.json b/public/r/styles/base-lyra/item.json
index 11c352de5..e7915c952 100644
--- a/public/r/styles/base-lyra/item.json
+++ b/public/r/styles/base-lyra/item.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/item/item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-none border text-xs group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-none border text-xs group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = href != null ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/logo.json b/public/r/styles/base-lyra/logo.json
index c9c868432..48908c633 100644
--- a/public/r/styles/base-lyra/logo.json
+++ b/public/r/styles/base-lyra/logo.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/logo/logo.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-sm font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = href != null ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-sm font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/item.json b/public/r/styles/base-maia/item.json
index 661dcc50e..6c55b396a 100644
--- a/public/r/styles/base-maia/item.json
+++ b/public/r/styles/base-maia/item.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/item/item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-2xl border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-3.5 px-3.5 py-3\",\n        xs: \"gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-2xl border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-3.5 px-3.5 py-3\",\n        xs: \"gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = href != null ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/logo.json b/public/r/styles/base-maia/logo.json
index fbaefd162..56ae30c0b 100644
--- a/public/r/styles/base-maia/logo.json
+++ b/public/r/styles/base-maia/logo.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/logo/logo.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-base font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = href != null ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-base font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/item.json b/public/r/styles/base-mira/item.json
index bf169e6bc..f754e68bd 100644
--- a/public/r/styles/base-mira/item.json
+++ b/public/r/styles/base-mira/item.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/item/item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-md border text-xs/relaxed group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2.5 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-md border text-xs/relaxed group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2.5 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = href != null ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/logo.json b/public/r/styles/base-mira/logo.json
index c9c868432..48908c633 100644
--- a/public/r/styles/base-mira/logo.json
+++ b/public/r/styles/base-mira/logo.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/logo/logo.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-sm font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = href != null ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-sm font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/item.json b/public/r/styles/base-nova/item.json
index 8482ddc81..41b464995 100644
--- a/public/r/styles/base-nova/item.json
+++ b/public/r/styles/base-nova/item.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/item/item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-lg border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-lg border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = href != null ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/logo.json b/public/r/styles/base-nova/logo.json
index fbaefd162..56ae30c0b 100644
--- a/public/r/styles/base-nova/logo.json
+++ b/public/r/styles/base-nova/logo.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/logo/logo.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-base font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = href != null ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-base font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/item.json b/public/r/styles/base-rhea/item.json
index 3b518f8e8..d0385e2b3 100644
--- a/public/r/styles/base-rhea/item.json
+++ b/public/r/styles/base-rhea/item.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/item/item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-2xl border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-3.5 px-3.5 py-3\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-2xl border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-3.5 px-3.5 py-3\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = href != null ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/logo.json b/public/r/styles/base-rhea/logo.json
index fbaefd162..56ae30c0b 100644
--- a/public/r/styles/base-rhea/logo.json
+++ b/public/r/styles/base-rhea/logo.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/logo/logo.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-base font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = href != null ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-base font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/item.json b/public/r/styles/base-sera/item.json
index 61c49489c..2069b89be 100644
--- a/public/r/styles/base-sera/item.json
+++ b/public/r/styles/base-sera/item.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/item/item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-none border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-3.5 px-3.5 py-3\",\n        xs: \"gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-none border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-3.5 px-3.5 py-3\",\n        xs: \"gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = href != null ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/logo.json b/public/r/styles/base-sera/logo.json
index 7295fe6de..d37a42fc3 100644
--- a/public/r/styles/base-sera/logo.json
+++ b/public/r/styles/base-sera/logo.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/logo/logo.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-sm font-semibold tracking-widest uppercase flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = href != null ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-sm font-semibold tracking-widest uppercase flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/item.json b/public/r/styles/base-vega/item.json
index 64d67cdfb..783d228e5 100644
--- a/public/r/styles/base-vega/item.json
+++ b/public/r/styles/base-vega/item.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/item/item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-md border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"a\">\n\nconst variants = cva(\n  \"[a]:hover:bg-muted rounded-md border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst {\n  class: className,\n  variant = \"default\",\n  size = \"default\",\n  href,\n  ...props\n} = Astro.props\n\nconst Comp = href != null ? \"a\" : \"div\"\n---\n\n<Comp\n  data-slot=\"item\"\n  data-variant={variant}\n  data-size={size}\n  class={cn(variants({ variant, size }), className)}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/logo.json b/public/r/styles/base-vega/logo.json
index fbaefd162..56ae30c0b 100644
--- a/public/r/styles/base-vega/logo.json
+++ b/public/r/styles/base-vega/logo.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/components/ui/logo/logo.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = \"href\" in Astro.props ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-base font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & HTMLAttributes<\"a\">\n\nconst {\n  class: className,\n  href,\n  \"data-slot\": dataSlot = \"logo\",\n  ...props\n} = Astro.props\n\nconst Comp = href != null ? \"a\" : \"div\"\n---\n\n<Comp\n  class={cn(\n    \"text-base font-semibold flex h-10 items-center justify-start gap-2 whitespace-nowrap\",\n    className\n  )}\n  data-slot={dataSlot}\n  href={href}\n  {...props}\n>\n  <slot />\n</Comp>\n",
       "type": "registry:ui"
     },
     {
diff --git a/src/components/ui/item/item.astro b/src/components/ui/item/item.astro
index 430d33353..d54569e7e 100644
--- a/src/components/ui/item/item.astro
+++ b/src/components/ui/item/item.astro
@@ -38,7 +38,7 @@ const {
   ...props
 } = Astro.props
 
-const Comp = "href" in Astro.props ? "a" : "div"
+const Comp = href != null ? "a" : "div"
 ---
 
 <Comp
diff --git a/src/components/ui/logo/logo.astro b/src/components/ui/logo/logo.astro
index d3bb43551..5f31f6983 100644
--- a/src/components/ui/logo/logo.astro
+++ b/src/components/ui/logo/logo.astro
@@ -12,7 +12,7 @@ const {
   ...props
 } = Astro.props
 
-const Comp = "href" in Astro.props ? "a" : "div"
+const Comp = href != null ? "a" : "div"
 ---
 
 <Comp

From 9fcdd31df58c674a27caeceb4f0f893661b32cd9 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 15:15:01 +0200
Subject: [PATCH 08/60] Render nothing for empty optional arrays in blocks

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/blocks/banner-2.astro   | 2 +-
 src/components/blocks/content-1.astro  | 4 ++--
 src/components/blocks/content-2.astro  | 4 ++--
 src/components/blocks/content-3.astro  | 2 +-
 src/components/blocks/content-4.astro  | 4 ++--
 src/components/blocks/cta-1.astro      | 2 +-
 src/components/blocks/cta-2.astro      | 2 +-
 src/components/blocks/cta-3.astro      | 2 +-
 src/components/blocks/cta-4.astro      | 2 +-
 src/components/blocks/cta-5.astro      | 4 ++--
 src/components/blocks/cta-6.astro      | 2 +-
 src/components/blocks/cta-7.astro      | 2 +-
 src/components/blocks/cta-8.astro      | 2 +-
 src/components/blocks/faqs-1.astro     | 2 +-
 src/components/blocks/faqs-2.astro     | 2 +-
 src/components/blocks/features-1.astro | 2 +-
 src/components/blocks/features-2.astro | 2 +-
 src/components/blocks/features-4.astro | 2 +-
 src/components/blocks/features-5.astro | 2 +-
 src/components/blocks/features-6.astro | 2 +-
 src/components/blocks/header-4.astro   | 2 +-
 src/components/blocks/header-5.astro   | 2 +-
 src/components/blocks/services-1.astro | 2 +-
 src/components/blocks/services-2.astro | 2 +-
 src/components/blocks/services-3.astro | 2 +-
 src/components/blocks/services-4.astro | 2 +-
 src/components/blocks/services-5.astro | 2 +-
 src/components/blocks/services-6.astro | 2 +-
 src/components/blocks/services-7.astro | 2 +-
 29 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/components/blocks/banner-2.astro b/src/components/blocks/banner-2.astro
index 1f4335a7c..e0bf98b6e 100644
--- a/src/components/blocks/banner-2.astro
+++ b/src/components/blocks/banner-2.astro
@@ -32,7 +32,7 @@ const { class: className, title, description, buttons, ...props } = Astro.props
       <p class="text-sm font-semibold">{title}</p>
       <p class="text-muted-foreground text-sm">{description}</p>
     </div>
-    {buttons?.length && (
+    {buttons && buttons.length > 0 && (
       <div class="flex flex-wrap items-center gap-2">
         {buttons.map(({ href, label, ...button }, index) => (
           <Button
diff --git a/src/components/blocks/content-1.astro b/src/components/blocks/content-1.astro
index 11f12a203..63af0a13c 100644
--- a/src/components/blocks/content-1.astro
+++ b/src/components/blocks/content-1.astro
@@ -46,7 +46,7 @@ const {
       <SectionTitle>{title}</SectionTitle>
       <SectionDescription>{description}</SectionDescription>
     </div>
-    {features?.length && (
+    {features && features.length > 0 && (
       <ul class="flex flex-col gap-3">
         {features.map((feature) => (
           <li class="flex items-center gap-3 text-sm">
@@ -56,7 +56,7 @@ const {
         ))}
       </ul>
     )}
-    {buttons?.length && (
+    {buttons && buttons.length > 0 && (
       <div class="flex flex-wrap gap-3">
         {buttons.map(({ href, label, ...button }, index) => (
           <Button
diff --git a/src/components/blocks/content-2.astro b/src/components/blocks/content-2.astro
index 41806058b..dd6c11c91 100644
--- a/src/components/blocks/content-2.astro
+++ b/src/components/blocks/content-2.astro
@@ -47,7 +47,7 @@ const {
         <SectionTitle>{title}</SectionTitle>
         <SectionDescription>{description}</SectionDescription>
       </div>
-      {features?.length && (
+      {features && features.length > 0 && (
         <ul class="flex flex-col gap-3">
           {features.map((feature) => (
             <li class="flex items-center gap-3 text-sm">
@@ -57,7 +57,7 @@ const {
           ))}
         </ul>
       )}
-      {buttons?.length && (
+      {buttons && buttons.length > 0 && (
         <div class="flex flex-wrap gap-3">
           {buttons.map(({ href, label, ...button }, index) => (
             <Button
diff --git a/src/components/blocks/content-3.astro b/src/components/blocks/content-3.astro
index 35efa78ae..c3dda8844 100644
--- a/src/components/blocks/content-3.astro
+++ b/src/components/blocks/content-3.astro
@@ -44,7 +44,7 @@ const {
         <SectionTitle>{title}</SectionTitle>
         <SectionDescription class="mt-4">{description}</SectionDescription>
       </div>
-      {buttons?.length && (
+      {buttons && buttons.length > 0 && (
         <div class="flex flex-wrap gap-3">
           {buttons.map(({ href, label, ...button }, index) => (
             <Button
diff --git a/src/components/blocks/content-4.astro b/src/components/blocks/content-4.astro
index 02ebabdef..128642a33 100644
--- a/src/components/blocks/content-4.astro
+++ b/src/components/blocks/content-4.astro
@@ -48,7 +48,7 @@ const {
           <SectionTitle>{title}</SectionTitle>
           <SectionDescription>{description}</SectionDescription>
         </div>
-        {features?.length && (
+        {features && features.length > 0 && (
           <ul class="flex flex-col gap-3">
             {features.map((feature) => (
               <li class="flex items-center gap-3 text-sm">
@@ -58,7 +58,7 @@ const {
             ))}
           </ul>
         )}
-        {buttons?.length && (
+        {buttons && buttons.length > 0 && (
           <div class="flex flex-wrap gap-3">
             {buttons.map(({ href, label, ...button }, index) => (
               <Button
diff --git a/src/components/blocks/cta-1.astro b/src/components/blocks/cta-1.astro
index caa01c261..848c2e8b9 100644
--- a/src/components/blocks/cta-1.astro
+++ b/src/components/blocks/cta-1.astro
@@ -72,7 +72,7 @@ const {
       <SectionTitle class="leading-[1.1]">{title}</SectionTitle>
       <SectionDescription>{description}</SectionDescription>
     </div>
-    {buttons?.length && (
+    {buttons && buttons.length > 0 && (
       <div class="flex flex-wrap justify-center gap-3">
         {buttons.map(({ href, label, ...button }, index) => (
           <Button
diff --git a/src/components/blocks/cta-2.astro b/src/components/blocks/cta-2.astro
index 45e68b8a3..08b7c21e9 100644
--- a/src/components/blocks/cta-2.astro
+++ b/src/components/blocks/cta-2.astro
@@ -62,7 +62,7 @@ const {
           {description}
         </p>
       </div>
-      {buttons?.length && (
+      {buttons && buttons.length > 0 && (
         <div class="flex flex-wrap gap-3">
           {buttons.map(({ href, label, ...button }, index) => (
             <Button
diff --git a/src/components/blocks/cta-3.astro b/src/components/blocks/cta-3.astro
index f52b004ea..98dc4f0c7 100644
--- a/src/components/blocks/cta-3.astro
+++ b/src/components/blocks/cta-3.astro
@@ -59,7 +59,7 @@ const {
       </p>
     </div>
     <div class="flex flex-col gap-6 lg:items-end">
-      {buttons?.length && (
+      {buttons && buttons.length > 0 && (
         <div class="flex flex-wrap gap-3">
           {buttons.map(({ href, label, ...button }, index) => (
             <Button
diff --git a/src/components/blocks/cta-4.astro b/src/components/blocks/cta-4.astro
index cd9c2f246..23157dd70 100644
--- a/src/components/blocks/cta-4.astro
+++ b/src/components/blocks/cta-4.astro
@@ -71,7 +71,7 @@ const {
       <SectionTitle class="leading-[1.1]">{title}</SectionTitle>
       <SectionDescription>{description}</SectionDescription>
     </div>
-    {buttons?.length && (
+    {buttons && buttons.length > 0 && (
       <div class="flex flex-wrap justify-center gap-3">
         {buttons.map(({ href, label, ...button }, index) => (
           <Button
diff --git a/src/components/blocks/cta-5.astro b/src/components/blocks/cta-5.astro
index e439171ef..043e5bd32 100644
--- a/src/components/blocks/cta-5.astro
+++ b/src/components/blocks/cta-5.astro
@@ -48,7 +48,7 @@ const {
           {description}
         </p>
       </div>
-      {features?.length && (
+      {features && features.length > 0 && (
         <ul class="flex flex-col gap-3">
           {features.map((feature) => (
             <li class="flex items-center gap-3 text-sm">
@@ -58,7 +58,7 @@ const {
           ))}
         </ul>
       )}
-      {buttons?.length && (
+      {buttons && buttons.length > 0 && (
         <div class="flex flex-wrap gap-3">
           {buttons.map(({ href, label, ...button }, index) => (
             <Button
diff --git a/src/components/blocks/cta-6.astro b/src/components/blocks/cta-6.astro
index cd92ef839..67d8819cc 100644
--- a/src/components/blocks/cta-6.astro
+++ b/src/components/blocks/cta-6.astro
@@ -69,7 +69,7 @@ const {
           {description}
         </p>
       </div>
-      {buttons?.length && (
+      {buttons && buttons.length > 0 && (
         <div class="flex flex-wrap gap-3">
           {buttons.map(({ href, label, ...button }, index) => (
             <Button
diff --git a/src/components/blocks/cta-7.astro b/src/components/blocks/cta-7.astro
index 1c30ae4cc..0ec9e7683 100644
--- a/src/components/blocks/cta-7.astro
+++ b/src/components/blocks/cta-7.astro
@@ -57,7 +57,7 @@ const {
       <SectionTitle class="leading-[1.1]">{title}</SectionTitle>
       <SectionDescription>{description}</SectionDescription>
     </div>
-    {buttons?.length && (
+    {buttons && buttons.length > 0 && (
       <div class="flex flex-wrap justify-center gap-3">
         {buttons.map(({ href, label, ...button }, index) => (
           <Button
diff --git a/src/components/blocks/cta-8.astro b/src/components/blocks/cta-8.astro
index 6abfad5f0..204ff414c 100644
--- a/src/components/blocks/cta-8.astro
+++ b/src/components/blocks/cta-8.astro
@@ -33,7 +33,7 @@ const { class: className, title, description, buttons, ...props } = Astro.props
       <SectionTitle class="leading-[1.1]">{title}</SectionTitle>
       <SectionDescription>{description}</SectionDescription>
     </div>
-    {buttons?.length && (
+    {buttons && buttons.length > 0 && (
       <div class="flex flex-wrap justify-center gap-3">
         {buttons.map(({ href, label, ...button }, index) => (
           <Button
diff --git a/src/components/blocks/faqs-1.astro b/src/components/blocks/faqs-1.astro
index c2482f55d..92aa8ad98 100644
--- a/src/components/blocks/faqs-1.astro
+++ b/src/components/blocks/faqs-1.astro
@@ -47,7 +47,7 @@ const {
       <SectionTitle>{title}</SectionTitle>
       <SectionDescription>{description}</SectionDescription>
     </div>
-    {buttons?.length && (
+    {buttons && buttons.length > 0 && (
       <div class="flex flex-wrap justify-center gap-3">
         {buttons.map(({ href, label, ...button }, index) => (
           <Button
diff --git a/src/components/blocks/faqs-2.astro b/src/components/blocks/faqs-2.astro
index 9f1501062..5ea2bfd8f 100644
--- a/src/components/blocks/faqs-2.astro
+++ b/src/components/blocks/faqs-2.astro
@@ -48,7 +48,7 @@ const {
         <p class="text-muted-foreground mt-4 text-base leading-relaxed text-balance">
           {description}
         </p>
-        {buttons?.length && (
+        {buttons && buttons.length > 0 && (
           <div class="mt-8 flex flex-wrap gap-3">
             {buttons.map(({ href, label, ...button }, index) => (
               <Button
diff --git a/src/components/blocks/features-1.astro b/src/components/blocks/features-1.astro
index 830b82f70..89cfbeafd 100644
--- a/src/components/blocks/features-1.astro
+++ b/src/components/blocks/features-1.astro
@@ -45,7 +45,7 @@ const {
       <SectionTitle>{title}</SectionTitle>
       <SectionDescription class="max-w-2xl">{description}</SectionDescription>
     </div>
-    {buttons?.length && (
+    {buttons && buttons.length > 0 && (
       <div class="flex flex-wrap justify-center gap-3">
         {buttons.map(({ href, label, ...button }, index) => (
           <Button
diff --git a/src/components/blocks/features-2.astro b/src/components/blocks/features-2.astro
index 9ca8ffc58..249417238 100644
--- a/src/components/blocks/features-2.astro
+++ b/src/components/blocks/features-2.astro
@@ -42,7 +42,7 @@ const {
       <SectionTitle>{title}</SectionTitle>
       <SectionDescription class="max-w-2xl">{description}</SectionDescription>
     </div>
-    {buttons?.length && (
+    {buttons && buttons.length > 0 && (
       <div class="flex flex-wrap justify-center gap-3">
         {buttons.map(({ href, label, ...button }, index) => (
           <Button
diff --git a/src/components/blocks/features-4.astro b/src/components/blocks/features-4.astro
index 8511e8ef0..c059a31e5 100644
--- a/src/components/blocks/features-4.astro
+++ b/src/components/blocks/features-4.astro
@@ -46,7 +46,7 @@ const {
         <p class="text-muted-foreground mt-4 text-base leading-relaxed text-balance">
           {description}
         </p>
-        {buttons?.length && (
+        {buttons && buttons.length > 0 && (
           <div class="mt-6 flex flex-wrap gap-3">
             {buttons.map(({ href, label, ...button }, index) => (
               <Button
diff --git a/src/components/blocks/features-5.astro b/src/components/blocks/features-5.astro
index 16e8eca6e..2fd9aa775 100644
--- a/src/components/blocks/features-5.astro
+++ b/src/components/blocks/features-5.astro
@@ -42,7 +42,7 @@ const {
       <SectionTitle>{title}</SectionTitle>
       <SectionDescription class="max-w-2xl">{description}</SectionDescription>
     </div>
-    {buttons?.length && (
+    {buttons && buttons.length > 0 && (
       <div class="flex flex-wrap justify-center gap-3">
         {buttons.map(({ href, label, ...button }, index) => (
           <Button
diff --git a/src/components/blocks/features-6.astro b/src/components/blocks/features-6.astro
index 0850aa3a4..1b6d686aa 100644
--- a/src/components/blocks/features-6.astro
+++ b/src/components/blocks/features-6.astro
@@ -41,7 +41,7 @@ const {
       <p class="text-muted-foreground text-base leading-relaxed text-balance">
         {description}
       </p>
-      {buttons?.length && (
+      {buttons && buttons.length > 0 && (
         <div class="mt-2 flex flex-wrap gap-3">
           {buttons.map(({ href, label, ...button }, index) => (
             <Button
diff --git a/src/components/blocks/header-4.astro b/src/components/blocks/header-4.astro
index 2c4de0736..508e9569b 100644
--- a/src/components/blocks/header-4.astro
+++ b/src/components/blocks/header-4.astro
@@ -211,7 +211,7 @@ const {
                 >
                   {item.label}
                 </SheetClose>
-                {item.links?.length && (
+                {item.links && item.links.length > 0 && (
                   <div class="border-border ml-3 grid gap-1 border-l pl-3">
                     {item.links.map((link) => (
                       <SheetClose
diff --git a/src/components/blocks/header-5.astro b/src/components/blocks/header-5.astro
index 5e207e64d..b79d173c7 100644
--- a/src/components/blocks/header-5.astro
+++ b/src/components/blocks/header-5.astro
@@ -141,7 +141,7 @@ const {
                 >
                   {item.label}
                 </SheetClose>
-                {item.links?.length && (
+                {item.links && item.links.length > 0 && (
                   <div class="border-border ml-3 grid gap-1 border-l pl-3">
                     {item.links.map((link) => (
                       <SheetClose
diff --git a/src/components/blocks/services-1.astro b/src/components/blocks/services-1.astro
index a31eae0d9..347130e6c 100644
--- a/src/components/blocks/services-1.astro
+++ b/src/components/blocks/services-1.astro
@@ -51,7 +51,7 @@ const {
         {badge && <Badge variant="secondary">{badge}</Badge>}
         <SectionTitle class="mt-4">{title}</SectionTitle>
       </div>
-      {buttons?.length && (
+      {buttons && buttons.length > 0 && (
         <div class="flex flex-wrap gap-3">
           {buttons.map(({ href, label, ...button }) => (
             <Button as="a" href={href} variant={button.variant}>
diff --git a/src/components/blocks/services-2.astro b/src/components/blocks/services-2.astro
index 65d0a3896..ba99aa695 100644
--- a/src/components/blocks/services-2.astro
+++ b/src/components/blocks/services-2.astro
@@ -58,7 +58,7 @@ const {
           {description}
         </p>
       )}
-      {buttons?.length && (
+      {buttons && buttons.length > 0 && (
         <div class="mt-6 flex flex-wrap justify-center gap-3">
           {buttons.map(({ href, label, ...button }) => (
             <Button as="a" href={href} variant={button.variant}>
diff --git a/src/components/blocks/services-3.astro b/src/components/blocks/services-3.astro
index 02beba68f..c9fbd6641 100644
--- a/src/components/blocks/services-3.astro
+++ b/src/components/blocks/services-3.astro
@@ -57,7 +57,7 @@ const {
           {description}
         </p>
       )}
-      {buttons?.length && (
+      {buttons && buttons.length > 0 && (
         <div class="mt-6 flex flex-wrap justify-center gap-3">
           {buttons.map(({ href, label, ...button }) => (
             <Button as="a" href={href} variant={button.variant}>
diff --git a/src/components/blocks/services-4.astro b/src/components/blocks/services-4.astro
index 4d039be5f..c533b2013 100644
--- a/src/components/blocks/services-4.astro
+++ b/src/components/blocks/services-4.astro
@@ -53,7 +53,7 @@ const {
           </p>
         )}
       </div>
-      {buttons?.length && (
+      {buttons && buttons.length > 0 && (
         <div class="flex flex-wrap gap-3">
           {buttons.map(({ href, label, ...button }) => (
             <Button as="a" href={href} variant={button.variant}>
diff --git a/src/components/blocks/services-5.astro b/src/components/blocks/services-5.astro
index 06ee4701b..cd133ee85 100644
--- a/src/components/blocks/services-5.astro
+++ b/src/components/blocks/services-5.astro
@@ -50,7 +50,7 @@ const {
           {description}
         </p>
       )}
-      {buttons?.length && (
+      {buttons && buttons.length > 0 && (
         <div class="mt-6 flex flex-wrap justify-center gap-3">
           {buttons.map(({ href, label, ...button }) => (
             <Button as="a" href={href} variant={button.variant}>
diff --git a/src/components/blocks/services-6.astro b/src/components/blocks/services-6.astro
index 238b9b311..1de989d0b 100644
--- a/src/components/blocks/services-6.astro
+++ b/src/components/blocks/services-6.astro
@@ -53,7 +53,7 @@ const {
           {description}
         </p>
       )}
-      {buttons?.length && (
+      {buttons && buttons.length > 0 && (
         <div class="mt-6 flex flex-wrap gap-3">
           {buttons.map(({ href, label, ...button }) => (
             <Button as="a" href={href} variant={button.variant}>
diff --git a/src/components/blocks/services-7.astro b/src/components/blocks/services-7.astro
index 38783d0cd..a918c9dde 100644
--- a/src/components/blocks/services-7.astro
+++ b/src/components/blocks/services-7.astro
@@ -58,7 +58,7 @@ const {
           </p>
         )}
       </div>
-      {buttons?.length && (
+      {buttons && buttons.length > 0 && (
         <div class="flex flex-wrap gap-3">
           {buttons.map(({ href, label, ...button }) => (
             <Button as="a" href={href} variant={button.variant}>

From b8de2887c7ac6ea8780d8ab3275cf2c9ae0c2a4c Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 15:15:54 +0200
Subject: [PATCH 09/60] Scope Doc1 copy behavior and forward native attributes
 in docs shells

Doc1 marks its page-copy button with data-doc-copy and its content with
data-doc-content, so code-block decoration and copy delegation no longer
depend on the docs-copy-page ID prefix or touch unrelated Typography.
Doc1 and Blocks1 accept native div attributes on the outer container and
group their open-in links in DropdownMenuGroup.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/blocks/blocks-1.astro |  93 ++++++++++----------
 src/components/blocks/doc-1.astro    | 126 ++++++++++++++-------------
 2 files changed, 114 insertions(+), 105 deletions(-)

diff --git a/src/components/blocks/blocks-1.astro b/src/components/blocks/blocks-1.astro
index e70555acd..9646f96ce 100644
--- a/src/components/blocks/blocks-1.astro
+++ b/src/components/blocks/blocks-1.astro
@@ -1,4 +1,5 @@
 ---
+import type { HTMLAttributes } from "astro/types"
 import ArrowLeft from "@lucide/astro/icons/arrow-left"
 import ArrowRight from "@lucide/astro/icons/arrow-right"
 import Check from "@lucide/astro/icons/check"
@@ -14,6 +15,7 @@ import { Button, buttonVariants } from "@/components/ui/button"
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
@@ -24,8 +26,7 @@ import {
   TypographyLead,
 } from "@/components/ui/typography"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"div"> & {
   title: string
   description?: string
   copyButton?: {
@@ -65,6 +66,7 @@ const {
   previousPage,
   nextPage,
   labels,
+  ...props
 } = Astro.props
 const showCopyButton = Boolean(copyButton)
 const showOpenButton = Boolean(markdownUrl)
@@ -101,6 +103,7 @@ const openLinks = markdownUrl
 <SectionContainer
   data-slot="blocks-page"
   class={cn("gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12", className)}
+  {...props}
 >
   <div class="mx-auto flex w-full max-w-[84rem] flex-col gap-10">
     <header class="flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between">
@@ -139,48 +142,50 @@ const openLinks = markdownUrl
               <ChevronDown class="size-3.5 opacity-70" />
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" sideOffset={6} class="w-56">
-              {openLinks.map((link) => (
-                <DropdownMenuItem
-                  href={link.href}
-                  target="_blank"
-                  rel="noreferrer noopener"
-                >
-                  {link.icon === "markdown" && (
-                    <Markdown
-                      class="size-4"
-                      fill="currentColor"
-                      aria-hidden="true"
-                    />
-                  )}
-                  {link.icon === "chatgpt" && (
-                    <svg
-                      role="img"
-                      viewBox="0 0 24 24"
-                      fill="currentColor"
-                      class="size-4"
-                      aria-hidden="true"
-                    >
-                      <path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z" />
-                    </svg>
-                  )}
-                  {link.icon === "claude" && (
-                    <Claude
-                      class="size-4"
-                      fill="currentColor"
-                      aria-hidden="true"
-                    />
-                  )}
-                  {link.icon === "cursor" && (
-                    <Cursor
-                      class="size-4"
-                      fill="currentColor"
-                      aria-hidden="true"
-                    />
-                  )}
-                  <span>{link.label}</span>
-                  <ExternalLink class="text-muted-foreground ml-auto size-3.5" />
-                </DropdownMenuItem>
-              ))}
+              <DropdownMenuGroup>
+                {openLinks.map((link) => (
+                  <DropdownMenuItem
+                    href={link.href}
+                    target="_blank"
+                    rel="noreferrer noopener"
+                  >
+                    {link.icon === "markdown" && (
+                      <Markdown
+                        class="size-4"
+                        fill="currentColor"
+                        aria-hidden="true"
+                      />
+                    )}
+                    {link.icon === "chatgpt" && (
+                      <svg
+                        role="img"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                        class="size-4"
+                        aria-hidden="true"
+                      >
+                        <path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z" />
+                      </svg>
+                    )}
+                    {link.icon === "claude" && (
+                      <Claude
+                        class="size-4"
+                        fill="currentColor"
+                        aria-hidden="true"
+                      />
+                    )}
+                    {link.icon === "cursor" && (
+                      <Cursor
+                        class="size-4"
+                        fill="currentColor"
+                        aria-hidden="true"
+                      />
+                    )}
+                    <span>{link.label}</span>
+                    <ExternalLink class="text-muted-foreground ml-auto size-3.5" />
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuGroup>
             </DropdownMenuContent>
           </DropdownMenu>
         )}
diff --git a/src/components/blocks/doc-1.astro b/src/components/blocks/doc-1.astro
index e4f7ed9ed..47ba86c4a 100644
--- a/src/components/blocks/doc-1.astro
+++ b/src/components/blocks/doc-1.astro
@@ -1,4 +1,5 @@
 ---
+import type { HTMLAttributes } from "astro/types"
 import ArrowLeft from "@lucide/astro/icons/arrow-left"
 import ArrowRight from "@lucide/astro/icons/arrow-right"
 import Check from "@lucide/astro/icons/check"
@@ -20,6 +21,7 @@ import {
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
@@ -37,8 +39,7 @@ import {
   TypographyLead,
 } from "@/components/ui/typography"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"div"> & {
   title: string
   description?: string
   copyButton?: {
@@ -94,6 +95,7 @@ const {
   previousPage,
   nextPage,
   labels,
+  ...props
 } = Astro.props
 const showCopyButton = Boolean(copyButton)
 const showOpenButton = Boolean(markdownUrl)
@@ -132,6 +134,7 @@ const openLinks = markdownUrl
     "gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16",
     className
   )}
+  {...props}
 >
   <div class="mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10">
     <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
@@ -156,6 +159,7 @@ const openLinks = markdownUrl
             variant="outline"
             size="xs"
             data-source={copyButton?.source}
+            data-doc-copy
             aria-label={labels.copyMarkdown}
           >
             <Copy data-copy-icon class="docs-copy-icon size-3.5" />
@@ -172,55 +176,57 @@ const openLinks = markdownUrl
               <ChevronDown class="size-3.5 opacity-70" />
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" sideOffset={6} class="w-56">
-              {openLinks.map((link) => (
-                <DropdownMenuItem
-                  href={link.href}
-                  target="_blank"
-                  rel="noreferrer noopener"
-                >
-                  {link.icon === "markdown" && (
-                    <Markdown
-                      class="size-4"
-                      fill="currentColor"
-                      aria-hidden="true"
-                    />
-                  )}
-                  {link.icon === "chatgpt" && (
-                    <svg
-                      role="img"
-                      viewBox="0 0 24 24"
-                      fill="currentColor"
-                      class="size-4"
-                      aria-hidden="true"
-                    >
-                      <path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z" />
-                    </svg>
-                  )}
-                  {link.icon === "claude" && (
-                    <Claude
-                      class="size-4"
-                      fill="currentColor"
-                      aria-hidden="true"
-                    />
-                  )}
-                  {link.icon === "cursor" && (
-                    <Cursor
-                      class="size-4"
-                      fill="currentColor"
-                      aria-hidden="true"
-                    />
-                  )}
-                  <span>{link.label}</span>
-                  <ExternalLink class="text-muted-foreground ml-auto size-3.5" />
-                </DropdownMenuItem>
-              ))}
+              <DropdownMenuGroup>
+                {openLinks.map((link) => (
+                  <DropdownMenuItem
+                    href={link.href}
+                    target="_blank"
+                    rel="noreferrer noopener"
+                  >
+                    {link.icon === "markdown" && (
+                      <Markdown
+                        class="size-4"
+                        fill="currentColor"
+                        aria-hidden="true"
+                      />
+                    )}
+                    {link.icon === "chatgpt" && (
+                      <svg
+                        role="img"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                        class="size-4"
+                        aria-hidden="true"
+                      >
+                        <path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z" />
+                      </svg>
+                    )}
+                    {link.icon === "claude" && (
+                      <Claude
+                        class="size-4"
+                        fill="currentColor"
+                        aria-hidden="true"
+                      />
+                    )}
+                    {link.icon === "cursor" && (
+                      <Cursor
+                        class="size-4"
+                        fill="currentColor"
+                        aria-hidden="true"
+                      />
+                    )}
+                    <span>{link.label}</span>
+                    <ExternalLink class="text-muted-foreground ml-auto size-3.5" />
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuGroup>
             </DropdownMenuContent>
           </DropdownMenu>
         )}
       </div>
     </header>
 
-    <Typography as="article" size="sm">
+    <Typography as="article" size="sm" data-doc-content>
       <slot />
     </Typography>
 
@@ -383,21 +389,19 @@ const openLinks = markdownUrl
   const copyIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>`
   const checkIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>`
   const initializeCodeBlocks = () => {
-    document
-      .querySelectorAll("[data-slot='typography'] > pre")
-      .forEach((pre) => {
-        if (pre.closest(".docs-code-block")) return
-        const wrapper = document.createElement("div")
-        const button = document.createElement("button")
-        wrapper.className = "docs-code-block"
-        wrapper.dataset.notTypeset = ""
-        button.type = "button"
-        button.className = "docs-code-copy"
-        button.ariaLabel = "Copy code"
-        button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class="hidden">${checkIcon}</span>`
-        pre.before(wrapper)
-        wrapper.append(pre, button)
-      })
+    document.querySelectorAll("[data-doc-content] > pre").forEach((pre) => {
+      if (pre.closest(".docs-code-block")) return
+      const wrapper = document.createElement("div")
+      const button = document.createElement("button")
+      wrapper.className = "docs-code-block"
+      wrapper.dataset.notTypeset = ""
+      button.type = "button"
+      button.className = "docs-code-copy"
+      button.ariaLabel = "Copy code"
+      button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class="hidden">${checkIcon}</span>`
+      pre.before(wrapper)
+      wrapper.append(pre, button)
+    })
   }
 
   initializeCodeBlocks()
@@ -406,7 +410,7 @@ const openLinks = markdownUrl
   document.addEventListener("click", async (event) => {
     if (!(event.target instanceof Element)) return
     const button = event.target.closest(
-      "[id^='docs-copy-page-'], .docs-code-copy"
+      "[data-doc-copy], [data-doc-content] .docs-code-copy"
     )
     if (!(button instanceof HTMLButtonElement)) return
     const source =

From c242989fca4a6096101cf9eeac46697540d7bd8f Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 15:16:57 +0200
Subject: [PATCH 10/60] Mark active header navigation links on desktop and
 mobile

Header1, Header2 and Header3 accept navigation active and pass it to
NavigationMenuLink, and all five headers set aria-current on the
matching mobile SheetClose links.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/blocks/header-1.astro | 4 +++-
 src/components/blocks/header-2.astro | 4 +++-
 src/components/blocks/header-3.astro | 4 +++-
 src/components/blocks/header-4.astro | 2 ++
 src/components/blocks/header-5.astro | 2 ++
 5 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/blocks/header-1.astro b/src/components/blocks/header-1.astro
index 6483a3d95..6046968b5 100644
--- a/src/components/blocks/header-1.astro
+++ b/src/components/blocks/header-1.astro
@@ -34,6 +34,7 @@ type Props = HTMLAttributes<"header"> & {
   navigation: {
     label: string
     href: string
+    active?: boolean
     links?: {
       label: string
       href: string
@@ -88,7 +89,7 @@ const {
       <NavigationMenuList class="justify-start">
         {navigation.map((item, index) => (
           <NavigationMenuItem value={`nav-${index}`}>
-            <NavigationMenuLink href={item.href}>
+            <NavigationMenuLink href={item.href} active={item.active}>
               {item.label}
             </NavigationMenuLink>
           </NavigationMenuItem>
@@ -131,6 +132,7 @@ const {
               <SheetClose
                 as="a"
                 href={item.href}
+                aria-current={item.active ? "page" : undefined}
                 variant="ghost"
                 class="justify-start"
               >
diff --git a/src/components/blocks/header-2.astro b/src/components/blocks/header-2.astro
index 52f2bdb18..713c21947 100644
--- a/src/components/blocks/header-2.astro
+++ b/src/components/blocks/header-2.astro
@@ -34,6 +34,7 @@ type Props = HTMLAttributes<"header"> & {
   navigation: {
     label: string
     href: string
+    active?: boolean
     links?: {
       label: string
       href: string
@@ -88,7 +89,7 @@ const {
       <NavigationMenuList>
         {navigation.map((item, index) => (
           <NavigationMenuItem value={`nav-${index}`}>
-            <NavigationMenuLink href={item.href}>
+            <NavigationMenuLink href={item.href} active={item.active}>
               {item.label}
             </NavigationMenuLink>
           </NavigationMenuItem>
@@ -131,6 +132,7 @@ const {
               <SheetClose
                 as="a"
                 href={item.href}
+                aria-current={item.active ? "page" : undefined}
                 variant="ghost"
                 class="justify-start"
               >
diff --git a/src/components/blocks/header-3.astro b/src/components/blocks/header-3.astro
index ceae69a11..ab21ee4ff 100644
--- a/src/components/blocks/header-3.astro
+++ b/src/components/blocks/header-3.astro
@@ -35,6 +35,7 @@ type Props = HTMLAttributes<"header"> & {
   navigation: {
     label: string
     href: string
+    active?: boolean
     links?: {
       label: string
       href: string
@@ -90,7 +91,7 @@ const {
         <NavigationMenuList>
           {navigation.map((item, index) => (
             <NavigationMenuItem value={`nav-${index}`}>
-              <NavigationMenuLink href={item.href}>
+              <NavigationMenuLink href={item.href} active={item.active}>
                 {item.label}
               </NavigationMenuLink>
             </NavigationMenuItem>
@@ -136,6 +137,7 @@ const {
               <SheetClose
                 as="a"
                 href={item.href}
+                aria-current={item.active ? "page" : undefined}
                 variant="ghost"
                 class="justify-start"
               >
diff --git a/src/components/blocks/header-4.astro b/src/components/blocks/header-4.astro
index 508e9569b..7cd575304 100644
--- a/src/components/blocks/header-4.astro
+++ b/src/components/blocks/header-4.astro
@@ -206,6 +206,7 @@ const {
                 <SheetClose
                   as="a"
                   href={item.href}
+                  aria-current={item.active ? "page" : undefined}
                   variant="ghost"
                   class="justify-start font-medium"
                 >
@@ -217,6 +218,7 @@ const {
                       <SheetClose
                         as="a"
                         href={link.href}
+                        aria-current={link.active ? "page" : undefined}
                         variant="ghost"
                         class="text-muted-foreground justify-start"
                       >
diff --git a/src/components/blocks/header-5.astro b/src/components/blocks/header-5.astro
index b79d173c7..dee4d2b26 100644
--- a/src/components/blocks/header-5.astro
+++ b/src/components/blocks/header-5.astro
@@ -136,6 +136,7 @@ const {
                 <SheetClose
                   as="a"
                   href={item.href}
+                  aria-current={item.active ? "page" : undefined}
                   variant="ghost"
                   class="justify-start font-medium"
                 >
@@ -147,6 +148,7 @@ const {
                       <SheetClose
                         as="a"
                         href={link.href}
+                        aria-current={link.active ? "page" : undefined}
                         variant="ghost"
                         class="text-muted-foreground justify-start"
                       >

From a616988e6ba740347cdbc15db042d06bbd2528af Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 15:16:57 +0200
Subject: [PATCH 11/60] Open the FAQs1 default item through Accordion
 defaultValue

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/blocks/faqs-1.astro | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/blocks/faqs-1.astro b/src/components/blocks/faqs-1.astro
index 92aa8ad98..512b6ae4b 100644
--- a/src/components/blocks/faqs-1.astro
+++ b/src/components/blocks/faqs-1.astro
@@ -24,6 +24,7 @@ type Props = HTMLAttributes<"section"> & {
     question: string
     answer: string
   }[]
+  defaultItem?: string
   buttons?: {
     label: string
     href: string
@@ -36,6 +37,7 @@ const {
   title,
   description,
   faqs,
+  defaultItem,
   buttons,
   ...props
 } = Astro.props
@@ -65,7 +67,7 @@ const {
   </SectionContainer>
   <SectionContainer>
     <div class="mx-auto w-full max-w-3xl">
-      <Accordion collapsible>
+      <Accordion collapsible defaultValue={defaultItem}>
         {faqs.map((item) => (
           <AccordionItem value={item.id}>
             <AccordionTrigger>{item.question}</AccordionTrigger>

From fd7696c0df0efda1b37d7a5fdea5dad0698161de Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 15:16:57 +0200
Subject: [PATCH 12/60] Name the Services6 arrow link and describe the Contact1
 message field

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/blocks/contact-1.astro  | 5 ++++-
 src/components/blocks/services-6.astro | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/blocks/contact-1.astro b/src/components/blocks/contact-1.astro
index 82267184b..869164f79 100644
--- a/src/components/blocks/contact-1.astro
+++ b/src/components/blocks/contact-1.astro
@@ -140,8 +140,11 @@ const formId = form.id ?? `contact-${crypto.randomUUID()}`
                 required
                 rows={5}
                 placeholder={form.messagePlaceholder}
+                aria-describedby={`${formId}-message-description`}
               />
-              <FieldDescription>{form.messageDescription}</FieldDescription>
+              <FieldDescription id={`${formId}-message-description`}>
+                {form.messageDescription}
+              </FieldDescription>
             </Field>
             <Button type="submit" size="lg" class="w-full">
               {form.actionLabel}
diff --git a/src/components/blocks/services-6.astro b/src/components/blocks/services-6.astro
index 1de989d0b..34c6705cb 100644
--- a/src/components/blocks/services-6.astro
+++ b/src/components/blocks/services-6.astro
@@ -84,6 +84,7 @@ const {
             {service.href && (
               <a
                 href={service.href}
+                aria-label={service.title}
                 class="shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25"
               >
                 <ArrowRightIcon class="size-4 text-white" />

From 1bb659828514d30f9cbd4149720105b182c038af Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 15:17:22 +0200
Subject: [PATCH 13/60] Fetch GitHub stars in the base layout and pass them to
 Sidebar1

Sidebar1 takes an optional githubStars number and formats it, keeping
the Stars fallback, so the block no longer fetches during render.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/blocks/sidebar-1.astro | 22 ++++++++--------------
 src/layouts/base.astro                | 16 ++++++++++++++++
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/components/blocks/sidebar-1.astro b/src/components/blocks/sidebar-1.astro
index d3af60143..1c132f961 100644
--- a/src/components/blocks/sidebar-1.astro
+++ b/src/components/blocks/sidebar-1.astro
@@ -92,6 +92,7 @@ type Props = {
     }[]
   }[]
   githubRepo: string
+  githubStars?: number
 }
 
 const {
@@ -101,7 +102,8 @@ const {
   breadcrumb,
   navigation,
   githubRepo,
-}: Props = Astro.props
+  githubStars,
+} = Astro.props
 
 const normalizePath = (path: string) => {
   if (path === "/") return path
@@ -123,18 +125,10 @@ const searchGroups = search.items.reduce<
   return groups
 }, [])
 
-let githubStars = "Stars"
-
-try {
-  const response = await fetch(`https://api.github.com/repos/${githubRepo}`)
-  const data = await response.json()
-
-  if (response.ok && typeof data.stargazers_count === "number") {
-    githubStars = new Intl.NumberFormat().format(data.stargazers_count)
-  }
-} catch {
-  // Keep the fallback label when GitHub is unavailable.
-}
+const githubStarsLabel =
+  githubStars === undefined
+    ? "Stars"
+    : new Intl.NumberFormat().format(githubStars)
 
 /* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */
 ---
@@ -325,7 +319,7 @@ try {
             aria-label={`View ${githubRepo} on GitHub`}
           >
             <Icon name="github" />
-            <span class="hidden sm:inline">{githubStars}</span>
+            <span class="hidden sm:inline">{githubStarsLabel}</span>
           </Button>
           <ThemeToggle />
         </HeaderGroup>
diff --git a/src/layouts/base.astro b/src/layouts/base.astro
index d40d293a5..f6d3bb0ae 100644
--- a/src/layouts/base.astro
+++ b/src/layouts/base.astro
@@ -22,6 +22,21 @@ const [searchItems, breadcrumbItems] = await Promise.all([
   getPageSearchItems(),
   getPageBreadcrumbItems(Astro.url.pathname),
 ])
+
+let githubStars: number | undefined
+
+try {
+  const response = await fetch(
+    `https://api.github.com/repos/${global.header.githubRepo}`
+  )
+  const data = await response.json()
+
+  if (response.ok && typeof data.stargazers_count === "number") {
+    githubStars = data.stargazers_count
+  }
+} catch {
+  // Leave the stars unset so Sidebar1 shows its fallback label.
+}
 ---
 
 <Layout>
@@ -52,6 +67,7 @@ const [searchItems, breadcrumbItems] = await Promise.all([
       }}
       navigation={global.sidebar.navigation}
       githubRepo={global.header.githubRepo}
+      githubStars={githubStars}
     >
       {/* SidebarInset already renders the page's main element. */}
       <div class="@container flex flex-col rounded-[inherit]">

From 118022baa686cdb1077a3e20b2685ac761a62368 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 15:17:40 +0200
Subject: [PATCH 14/60] Drop registry dependencies that Links2 and Sidebar1 no
 longer import

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 registry.json | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/registry.json b/registry.json
index f82e3472f..1ce80aa32 100644
--- a/registry.json
+++ b/registry.json
@@ -3416,14 +3416,7 @@
       "categories": ["links"],
       "docs": "https://ui.full.dev/blocks/links/",
       "dependencies": ["@lucide/astro"],
-      "registryDependencies": [
-        "@fulldev/accordion",
-        "@fulldev/button",
-        "@fulldev/card",
-        "@fulldev/carousel",
-        "@fulldev/section",
-        "@fulldev/tabs"
-      ],
+      "registryDependencies": ["@fulldev/section"],
       "files": [
         {
           "path": "src/components/blocks/links-2.astro",
@@ -3955,7 +3948,6 @@
         "@fulldev/header",
         "@fulldev/icon",
         "@fulldev/kbd",
-        "@fulldev/layout",
         "@fulldev/logo",
         "@fulldev/separator",
         "@fulldev/sidebar",

From 1bde61d85e777251fe53137488bfea1428ef24de Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 15:17:56 +0200
Subject: [PATCH 15/60] Match the Doc labels example and Links prose to the
 current blocks

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/content/pages/blocks/doc.mdx   | 7 ++++++-
 src/content/pages/blocks/links.mdx | 4 ++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/content/pages/blocks/doc.mdx b/src/content/pages/blocks/doc.mdx
index e0c7bb374..3cd05d7ef 100644
--- a/src/content/pages/blocks/doc.mdx
+++ b/src/content/pages/blocks/doc.mdx
@@ -36,7 +36,12 @@ import Doc1Block from "@/components/blocks/doc-1.astro"
     title: "Dialog",
   }}
   labels={{
-    copyPage: "Copy Page",
+    copyMarkdown: "Copy Markdown",
+    openIn: "Open in",
+    openInMarkdown: "Open in Markdown",
+    openInChatGPT: "Open in ChatGPT",
+    openInClaude: "Open in Claude",
+    openInCursor: "Open in Cursor",
     pagination: {
       previous: "Previous",
       next: "Next",
diff --git a/src/content/pages/blocks/links.mdx b/src/content/pages/blocks/links.mdx
index fa87133ee..3d43aa8fe 100644
--- a/src/content/pages/blocks/links.mdx
+++ b/src/content/pages/blocks/links.mdx
@@ -1,7 +1,7 @@
 ---
 type: block
 title: Links
-description: Link carousel blocks for presenting related pages, components, or resources.
+description: Link grid blocks for presenting related pages, components, or resources.
 ---
 
 ```astro live props={{ name: 'links-2' }}
@@ -11,7 +11,7 @@ import Links2Block from "@/components/blocks/links-2.astro"
 
 <Links2Block
   title="Explore the component library"
-  description="A carousel of related links with compact visual previews for each destination."
+  description="A grid of related links with a short description for each destination."
   links={[
     {
       href: "/components/section/",

From cfa0d7b2f783d7fb0a034839af2b4ab89a08efd0 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 15:18:10 +0200
Subject: [PATCH 16/60] Regenerate registry output for compatible block
 cleanups

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 public/r/banner-2.json                    |  2 +-
 public/r/blocks-1.json                    |  2 +-
 public/r/contact-1.json                   |  2 +-
 public/r/content-1.json                   |  2 +-
 public/r/content-2.json                   |  2 +-
 public/r/content-3.json                   |  2 +-
 public/r/content-4.json                   |  2 +-
 public/r/cta-1.json                       |  2 +-
 public/r/cta-2.json                       |  2 +-
 public/r/cta-3.json                       |  2 +-
 public/r/cta-4.json                       |  2 +-
 public/r/cta-5.json                       |  2 +-
 public/r/cta-6.json                       |  2 +-
 public/r/cta-7.json                       |  2 +-
 public/r/cta-8.json                       |  2 +-
 public/r/doc-1.json                       |  2 +-
 public/r/faqs-1.json                      |  2 +-
 public/r/faqs-2.json                      |  2 +-
 public/r/features-1.json                  |  2 +-
 public/r/features-2.json                  |  2 +-
 public/r/features-4.json                  |  2 +-
 public/r/features-5.json                  |  2 +-
 public/r/features-6.json                  |  2 +-
 public/r/header-1.json                    |  2 +-
 public/r/header-2.json                    |  2 +-
 public/r/header-3.json                    |  2 +-
 public/r/header-4.json                    |  2 +-
 public/r/header-5.json                    |  2 +-
 public/r/links-2.json                     |  9 ++-------
 public/r/registry.json                    | 10 ++--------
 public/r/services-1.json                  |  2 +-
 public/r/services-2.json                  |  2 +-
 public/r/services-3.json                  |  2 +-
 public/r/services-4.json                  |  2 +-
 public/r/services-5.json                  |  2 +-
 public/r/services-6.json                  |  2 +-
 public/r/services-7.json                  |  2 +-
 public/r/sidebar-1.json                   |  3 +--
 public/r/styles/base-luma/banner-2.json   |  2 +-
 public/r/styles/base-luma/blocks-1.json   |  2 +-
 public/r/styles/base-luma/contact-1.json  |  2 +-
 public/r/styles/base-luma/content-1.json  |  2 +-
 public/r/styles/base-luma/content-2.json  |  2 +-
 public/r/styles/base-luma/content-3.json  |  2 +-
 public/r/styles/base-luma/content-4.json  |  2 +-
 public/r/styles/base-luma/cta-1.json      |  2 +-
 public/r/styles/base-luma/cta-2.json      |  2 +-
 public/r/styles/base-luma/cta-3.json      |  2 +-
 public/r/styles/base-luma/cta-4.json      |  2 +-
 public/r/styles/base-luma/cta-5.json      |  2 +-
 public/r/styles/base-luma/cta-6.json      |  2 +-
 public/r/styles/base-luma/cta-7.json      |  2 +-
 public/r/styles/base-luma/cta-8.json      |  2 +-
 public/r/styles/base-luma/doc-1.json      |  2 +-
 public/r/styles/base-luma/faqs-1.json     |  2 +-
 public/r/styles/base-luma/faqs-2.json     |  2 +-
 public/r/styles/base-luma/features-1.json |  2 +-
 public/r/styles/base-luma/features-2.json |  2 +-
 public/r/styles/base-luma/features-4.json |  2 +-
 public/r/styles/base-luma/features-5.json |  2 +-
 public/r/styles/base-luma/features-6.json |  2 +-
 public/r/styles/base-luma/header-1.json   |  2 +-
 public/r/styles/base-luma/header-2.json   |  2 +-
 public/r/styles/base-luma/header-3.json   |  2 +-
 public/r/styles/base-luma/header-4.json   |  2 +-
 public/r/styles/base-luma/header-5.json   |  2 +-
 public/r/styles/base-luma/links-2.json    |  9 ++-------
 public/r/styles/base-luma/registry.json   | 10 ++--------
 public/r/styles/base-luma/services-1.json |  2 +-
 public/r/styles/base-luma/services-2.json |  2 +-
 public/r/styles/base-luma/services-3.json |  2 +-
 public/r/styles/base-luma/services-4.json |  2 +-
 public/r/styles/base-luma/services-5.json |  2 +-
 public/r/styles/base-luma/services-6.json |  2 +-
 public/r/styles/base-luma/services-7.json |  2 +-
 public/r/styles/base-luma/sidebar-1.json  |  3 +--
 public/r/styles/base-lyra/banner-2.json   |  2 +-
 public/r/styles/base-lyra/blocks-1.json   |  2 +-
 public/r/styles/base-lyra/contact-1.json  |  2 +-
 public/r/styles/base-lyra/content-1.json  |  2 +-
 public/r/styles/base-lyra/content-2.json  |  2 +-
 public/r/styles/base-lyra/content-3.json  |  2 +-
 public/r/styles/base-lyra/content-4.json  |  2 +-
 public/r/styles/base-lyra/cta-1.json      |  2 +-
 public/r/styles/base-lyra/cta-2.json      |  2 +-
 public/r/styles/base-lyra/cta-3.json      |  2 +-
 public/r/styles/base-lyra/cta-4.json      |  2 +-
 public/r/styles/base-lyra/cta-5.json      |  2 +-
 public/r/styles/base-lyra/cta-6.json      |  2 +-
 public/r/styles/base-lyra/cta-7.json      |  2 +-
 public/r/styles/base-lyra/cta-8.json      |  2 +-
 public/r/styles/base-lyra/doc-1.json      |  2 +-
 public/r/styles/base-lyra/faqs-1.json     |  2 +-
 public/r/styles/base-lyra/faqs-2.json     |  2 +-
 public/r/styles/base-lyra/features-1.json |  2 +-
 public/r/styles/base-lyra/features-2.json |  2 +-
 public/r/styles/base-lyra/features-4.json |  2 +-
 public/r/styles/base-lyra/features-5.json |  2 +-
 public/r/styles/base-lyra/features-6.json |  2 +-
 public/r/styles/base-lyra/header-1.json   |  2 +-
 public/r/styles/base-lyra/header-2.json   |  2 +-
 public/r/styles/base-lyra/header-3.json   |  2 +-
 public/r/styles/base-lyra/header-4.json   |  2 +-
 public/r/styles/base-lyra/header-5.json   |  2 +-
 public/r/styles/base-lyra/links-2.json    |  9 ++-------
 public/r/styles/base-lyra/registry.json   | 10 ++--------
 public/r/styles/base-lyra/services-1.json |  2 +-
 public/r/styles/base-lyra/services-2.json |  2 +-
 public/r/styles/base-lyra/services-3.json |  2 +-
 public/r/styles/base-lyra/services-4.json |  2 +-
 public/r/styles/base-lyra/services-5.json |  2 +-
 public/r/styles/base-lyra/services-6.json |  2 +-
 public/r/styles/base-lyra/services-7.json |  2 +-
 public/r/styles/base-lyra/sidebar-1.json  |  3 +--
 public/r/styles/base-maia/banner-2.json   |  2 +-
 public/r/styles/base-maia/blocks-1.json   |  2 +-
 public/r/styles/base-maia/contact-1.json  |  2 +-
 public/r/styles/base-maia/content-1.json  |  2 +-
 public/r/styles/base-maia/content-2.json  |  2 +-
 public/r/styles/base-maia/content-3.json  |  2 +-
 public/r/styles/base-maia/content-4.json  |  2 +-
 public/r/styles/base-maia/cta-1.json      |  2 +-
 public/r/styles/base-maia/cta-2.json      |  2 +-
 public/r/styles/base-maia/cta-3.json      |  2 +-
 public/r/styles/base-maia/cta-4.json      |  2 +-
 public/r/styles/base-maia/cta-5.json      |  2 +-
 public/r/styles/base-maia/cta-6.json      |  2 +-
 public/r/styles/base-maia/cta-7.json      |  2 +-
 public/r/styles/base-maia/cta-8.json      |  2 +-
 public/r/styles/base-maia/doc-1.json      |  2 +-
 public/r/styles/base-maia/faqs-1.json     |  2 +-
 public/r/styles/base-maia/faqs-2.json     |  2 +-
 public/r/styles/base-maia/features-1.json |  2 +-
 public/r/styles/base-maia/features-2.json |  2 +-
 public/r/styles/base-maia/features-4.json |  2 +-
 public/r/styles/base-maia/features-5.json |  2 +-
 public/r/styles/base-maia/features-6.json |  2 +-
 public/r/styles/base-maia/header-1.json   |  2 +-
 public/r/styles/base-maia/header-2.json   |  2 +-
 public/r/styles/base-maia/header-3.json   |  2 +-
 public/r/styles/base-maia/header-4.json   |  2 +-
 public/r/styles/base-maia/header-5.json   |  2 +-
 public/r/styles/base-maia/links-2.json    |  9 ++-------
 public/r/styles/base-maia/registry.json   | 10 ++--------
 public/r/styles/base-maia/services-1.json |  2 +-
 public/r/styles/base-maia/services-2.json |  2 +-
 public/r/styles/base-maia/services-3.json |  2 +-
 public/r/styles/base-maia/services-4.json |  2 +-
 public/r/styles/base-maia/services-5.json |  2 +-
 public/r/styles/base-maia/services-6.json |  2 +-
 public/r/styles/base-maia/services-7.json |  2 +-
 public/r/styles/base-maia/sidebar-1.json  |  3 +--
 public/r/styles/base-mira/banner-2.json   |  2 +-
 public/r/styles/base-mira/blocks-1.json   |  2 +-
 public/r/styles/base-mira/contact-1.json  |  2 +-
 public/r/styles/base-mira/content-1.json  |  2 +-
 public/r/styles/base-mira/content-2.json  |  2 +-
 public/r/styles/base-mira/content-3.json  |  2 +-
 public/r/styles/base-mira/content-4.json  |  2 +-
 public/r/styles/base-mira/cta-1.json      |  2 +-
 public/r/styles/base-mira/cta-2.json      |  2 +-
 public/r/styles/base-mira/cta-3.json      |  2 +-
 public/r/styles/base-mira/cta-4.json      |  2 +-
 public/r/styles/base-mira/cta-5.json      |  2 +-
 public/r/styles/base-mira/cta-6.json      |  2 +-
 public/r/styles/base-mira/cta-7.json      |  2 +-
 public/r/styles/base-mira/cta-8.json      |  2 +-
 public/r/styles/base-mira/doc-1.json      |  2 +-
 public/r/styles/base-mira/faqs-1.json     |  2 +-
 public/r/styles/base-mira/faqs-2.json     |  2 +-
 public/r/styles/base-mira/features-1.json |  2 +-
 public/r/styles/base-mira/features-2.json |  2 +-
 public/r/styles/base-mira/features-4.json |  2 +-
 public/r/styles/base-mira/features-5.json |  2 +-
 public/r/styles/base-mira/features-6.json |  2 +-
 public/r/styles/base-mira/header-1.json   |  2 +-
 public/r/styles/base-mira/header-2.json   |  2 +-
 public/r/styles/base-mira/header-3.json   |  2 +-
 public/r/styles/base-mira/header-4.json   |  2 +-
 public/r/styles/base-mira/header-5.json   |  2 +-
 public/r/styles/base-mira/links-2.json    |  9 ++-------
 public/r/styles/base-mira/registry.json   | 10 ++--------
 public/r/styles/base-mira/services-1.json |  2 +-
 public/r/styles/base-mira/services-2.json |  2 +-
 public/r/styles/base-mira/services-3.json |  2 +-
 public/r/styles/base-mira/services-4.json |  2 +-
 public/r/styles/base-mira/services-5.json |  2 +-
 public/r/styles/base-mira/services-6.json |  2 +-
 public/r/styles/base-mira/services-7.json |  2 +-
 public/r/styles/base-mira/sidebar-1.json  |  3 +--
 public/r/styles/base-nova/banner-2.json   |  2 +-
 public/r/styles/base-nova/blocks-1.json   |  2 +-
 public/r/styles/base-nova/contact-1.json  |  2 +-
 public/r/styles/base-nova/content-1.json  |  2 +-
 public/r/styles/base-nova/content-2.json  |  2 +-
 public/r/styles/base-nova/content-3.json  |  2 +-
 public/r/styles/base-nova/content-4.json  |  2 +-
 public/r/styles/base-nova/cta-1.json      |  2 +-
 public/r/styles/base-nova/cta-2.json      |  2 +-
 public/r/styles/base-nova/cta-3.json      |  2 +-
 public/r/styles/base-nova/cta-4.json      |  2 +-
 public/r/styles/base-nova/cta-5.json      |  2 +-
 public/r/styles/base-nova/cta-6.json      |  2 +-
 public/r/styles/base-nova/cta-7.json      |  2 +-
 public/r/styles/base-nova/cta-8.json      |  2 +-
 public/r/styles/base-nova/doc-1.json      |  2 +-
 public/r/styles/base-nova/faqs-1.json     |  2 +-
 public/r/styles/base-nova/faqs-2.json     |  2 +-
 public/r/styles/base-nova/features-1.json |  2 +-
 public/r/styles/base-nova/features-2.json |  2 +-
 public/r/styles/base-nova/features-4.json |  2 +-
 public/r/styles/base-nova/features-5.json |  2 +-
 public/r/styles/base-nova/features-6.json |  2 +-
 public/r/styles/base-nova/header-1.json   |  2 +-
 public/r/styles/base-nova/header-2.json   |  2 +-
 public/r/styles/base-nova/header-3.json   |  2 +-
 public/r/styles/base-nova/header-4.json   |  2 +-
 public/r/styles/base-nova/header-5.json   |  2 +-
 public/r/styles/base-nova/links-2.json    |  9 ++-------
 public/r/styles/base-nova/registry.json   | 10 ++--------
 public/r/styles/base-nova/services-1.json |  2 +-
 public/r/styles/base-nova/services-2.json |  2 +-
 public/r/styles/base-nova/services-3.json |  2 +-
 public/r/styles/base-nova/services-4.json |  2 +-
 public/r/styles/base-nova/services-5.json |  2 +-
 public/r/styles/base-nova/services-6.json |  2 +-
 public/r/styles/base-nova/services-7.json |  2 +-
 public/r/styles/base-nova/sidebar-1.json  |  3 +--
 public/r/styles/base-rhea/banner-2.json   |  2 +-
 public/r/styles/base-rhea/blocks-1.json   |  2 +-
 public/r/styles/base-rhea/contact-1.json  |  2 +-
 public/r/styles/base-rhea/content-1.json  |  2 +-
 public/r/styles/base-rhea/content-2.json  |  2 +-
 public/r/styles/base-rhea/content-3.json  |  2 +-
 public/r/styles/base-rhea/content-4.json  |  2 +-
 public/r/styles/base-rhea/cta-1.json      |  2 +-
 public/r/styles/base-rhea/cta-2.json      |  2 +-
 public/r/styles/base-rhea/cta-3.json      |  2 +-
 public/r/styles/base-rhea/cta-4.json      |  2 +-
 public/r/styles/base-rhea/cta-5.json      |  2 +-
 public/r/styles/base-rhea/cta-6.json      |  2 +-
 public/r/styles/base-rhea/cta-7.json      |  2 +-
 public/r/styles/base-rhea/cta-8.json      |  2 +-
 public/r/styles/base-rhea/doc-1.json      |  2 +-
 public/r/styles/base-rhea/faqs-1.json     |  2 +-
 public/r/styles/base-rhea/faqs-2.json     |  2 +-
 public/r/styles/base-rhea/features-1.json |  2 +-
 public/r/styles/base-rhea/features-2.json |  2 +-
 public/r/styles/base-rhea/features-4.json |  2 +-
 public/r/styles/base-rhea/features-5.json |  2 +-
 public/r/styles/base-rhea/features-6.json |  2 +-
 public/r/styles/base-rhea/header-1.json   |  2 +-
 public/r/styles/base-rhea/header-2.json   |  2 +-
 public/r/styles/base-rhea/header-3.json   |  2 +-
 public/r/styles/base-rhea/header-4.json   |  2 +-
 public/r/styles/base-rhea/header-5.json   |  2 +-
 public/r/styles/base-rhea/links-2.json    |  9 ++-------
 public/r/styles/base-rhea/registry.json   | 10 ++--------
 public/r/styles/base-rhea/services-1.json |  2 +-
 public/r/styles/base-rhea/services-2.json |  2 +-
 public/r/styles/base-rhea/services-3.json |  2 +-
 public/r/styles/base-rhea/services-4.json |  2 +-
 public/r/styles/base-rhea/services-5.json |  2 +-
 public/r/styles/base-rhea/services-6.json |  2 +-
 public/r/styles/base-rhea/services-7.json |  2 +-
 public/r/styles/base-rhea/sidebar-1.json  |  3 +--
 public/r/styles/base-sera/banner-2.json   |  2 +-
 public/r/styles/base-sera/blocks-1.json   |  2 +-
 public/r/styles/base-sera/contact-1.json  |  2 +-
 public/r/styles/base-sera/content-1.json  |  2 +-
 public/r/styles/base-sera/content-2.json  |  2 +-
 public/r/styles/base-sera/content-3.json  |  2 +-
 public/r/styles/base-sera/content-4.json  |  2 +-
 public/r/styles/base-sera/cta-1.json      |  2 +-
 public/r/styles/base-sera/cta-2.json      |  2 +-
 public/r/styles/base-sera/cta-3.json      |  2 +-
 public/r/styles/base-sera/cta-4.json      |  2 +-
 public/r/styles/base-sera/cta-5.json      |  2 +-
 public/r/styles/base-sera/cta-6.json      |  2 +-
 public/r/styles/base-sera/cta-7.json      |  2 +-
 public/r/styles/base-sera/cta-8.json      |  2 +-
 public/r/styles/base-sera/doc-1.json      |  2 +-
 public/r/styles/base-sera/faqs-1.json     |  2 +-
 public/r/styles/base-sera/faqs-2.json     |  2 +-
 public/r/styles/base-sera/features-1.json |  2 +-
 public/r/styles/base-sera/features-2.json |  2 +-
 public/r/styles/base-sera/features-4.json |  2 +-
 public/r/styles/base-sera/features-5.json |  2 +-
 public/r/styles/base-sera/features-6.json |  2 +-
 public/r/styles/base-sera/header-1.json   |  2 +-
 public/r/styles/base-sera/header-2.json   |  2 +-
 public/r/styles/base-sera/header-3.json   |  2 +-
 public/r/styles/base-sera/header-4.json   |  2 +-
 public/r/styles/base-sera/header-5.json   |  2 +-
 public/r/styles/base-sera/links-2.json    |  9 ++-------
 public/r/styles/base-sera/registry.json   | 10 ++--------
 public/r/styles/base-sera/services-1.json |  2 +-
 public/r/styles/base-sera/services-2.json |  2 +-
 public/r/styles/base-sera/services-3.json |  2 +-
 public/r/styles/base-sera/services-4.json |  2 +-
 public/r/styles/base-sera/services-5.json |  2 +-
 public/r/styles/base-sera/services-6.json |  2 +-
 public/r/styles/base-sera/services-7.json |  2 +-
 public/r/styles/base-sera/sidebar-1.json  |  3 +--
 public/r/styles/base-vega/banner-2.json   |  2 +-
 public/r/styles/base-vega/blocks-1.json   |  2 +-
 public/r/styles/base-vega/contact-1.json  |  2 +-
 public/r/styles/base-vega/content-1.json  |  2 +-
 public/r/styles/base-vega/content-2.json  |  2 +-
 public/r/styles/base-vega/content-3.json  |  2 +-
 public/r/styles/base-vega/content-4.json  |  2 +-
 public/r/styles/base-vega/cta-1.json      |  2 +-
 public/r/styles/base-vega/cta-2.json      |  2 +-
 public/r/styles/base-vega/cta-3.json      |  2 +-
 public/r/styles/base-vega/cta-4.json      |  2 +-
 public/r/styles/base-vega/cta-5.json      |  2 +-
 public/r/styles/base-vega/cta-6.json      |  2 +-
 public/r/styles/base-vega/cta-7.json      |  2 +-
 public/r/styles/base-vega/cta-8.json      |  2 +-
 public/r/styles/base-vega/doc-1.json      |  2 +-
 public/r/styles/base-vega/faqs-1.json     |  2 +-
 public/r/styles/base-vega/faqs-2.json     |  2 +-
 public/r/styles/base-vega/features-1.json |  2 +-
 public/r/styles/base-vega/features-2.json |  2 +-
 public/r/styles/base-vega/features-4.json |  2 +-
 public/r/styles/base-vega/features-5.json |  2 +-
 public/r/styles/base-vega/features-6.json |  2 +-
 public/r/styles/base-vega/header-1.json   |  2 +-
 public/r/styles/base-vega/header-2.json   |  2 +-
 public/r/styles/base-vega/header-3.json   |  2 +-
 public/r/styles/base-vega/header-4.json   |  2 +-
 public/r/styles/base-vega/header-5.json   |  2 +-
 public/r/styles/base-vega/links-2.json    |  9 ++-------
 public/r/styles/base-vega/registry.json   | 10 ++--------
 public/r/styles/base-vega/services-1.json |  2 +-
 public/r/styles/base-vega/services-2.json |  2 +-
 public/r/styles/base-vega/services-3.json |  2 +-
 public/r/styles/base-vega/services-4.json |  2 +-
 public/r/styles/base-vega/services-5.json |  2 +-
 public/r/styles/base-vega/services-6.json |  2 +-
 public/r/styles/base-vega/services-7.json |  2 +-
 public/r/styles/base-vega/sidebar-1.json  |  3 +--
 registry.json                             |  2 +-
 343 files changed, 361 insertions(+), 469 deletions(-)

diff --git a/public/r/banner-2.json b/public/r/banner-2.json
index 6e48f54fe..6ea880320 100644
--- a/public/r/banner-2.json
+++ b/public/r/banner-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/blocks-1.json b/public/r/blocks-1.json
index 7c342e844..5f875b246 100644
--- a/public/r/blocks-1.json
+++ b/public/r/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              {openLinks.map((link) => (\n                <DropdownMenuItem\n                  href={link.href}\n                  target=\"_blank\"\n                  rel=\"noreferrer noopener\"\n                >\n                  {link.icon === \"markdown\" && (\n                    <Markdown\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"chatgpt\" && (\n                    <svg\n                      role=\"img\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"currentColor\"\n                      class=\"size-4\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                    </svg>\n                  )}\n                  {link.icon === \"claude\" && (\n                    <Claude\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"cursor\" && (\n                    <Cursor\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  <span>{link.label}</span>\n                  <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/contact-1.json b/public/r/contact-1.json
index 5108a5643..9af391672 100644
--- a/public/r/contact-1.json
+++ b/public/r/contact-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/contact-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n              />\n              <FieldDescription>{form.messageDescription}</FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n                aria-describedby={`${formId}-message-description`}\n              />\n              <FieldDescription id={`${formId}-message-description`}>\n                {form.messageDescription}\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/content-1.json b/public/r/content-1.json
index e15f48b21..9bd4e3cc6 100644
--- a/public/r/content-1.json
+++ b/public/r/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features?.length && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons?.length && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features && features.length > 0 && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/content-2.json b/public/r/content-2.json
index ae71c7e37..14af2df66 100644
--- a/public/r/content-2.json
+++ b/public/r/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features?.length && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/content-3.json b/public/r/content-3.json
index 1fc69b356..6ae269ebc 100644
--- a/public/r/content-3.json
+++ b/public/r/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/content-4.json b/public/r/content-4.json
index def8f5ea3..09aa3dfbf 100644
--- a/public/r/content-4.json
+++ b/public/r/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features?.length && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons?.length && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features && features.length > 0 && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons && buttons.length > 0 && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/cta-1.json b/public/r/cta-1.json
index ba417864c..d4b30fd2d 100644
--- a/public/r/cta-1.json
+++ b/public/r/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/cta-2.json b/public/r/cta-2.json
index 783e24bb0..458de6318 100644
--- a/public/r/cta-2.json
+++ b/public/r/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/cta-3.json b/public/r/cta-3.json
index 44c7a351f..dba896177 100644
--- a/public/r/cta-3.json
+++ b/public/r/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/cta-4.json b/public/r/cta-4.json
index 91de3701c..244bfa2cd 100644
--- a/public/r/cta-4.json
+++ b/public/r/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/cta-5.json b/public/r/cta-5.json
index 5f0fb0cb8..9c655d7ac 100644
--- a/public/r/cta-5.json
+++ b/public/r/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features?.length && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/cta-6.json b/public/r/cta-6.json
index 4cf570ac1..8b4d735ee 100644
--- a/public/r/cta-6.json
+++ b/public/r/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/cta-7.json b/public/r/cta-7.json
index 013a1100f..961d6855d 100644
--- a/public/r/cta-7.json
+++ b/public/r/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/cta-8.json b/public/r/cta-8.json
index 2bc3031f2..4b2d77e41 100644
--- a/public/r/cta-8.json
+++ b/public/r/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/doc-1.json b/public/r/doc-1.json
index 8585d22dc..4806861e6 100644
--- a/public/r/doc-1.json
+++ b/public/r/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              {openLinks.map((link) => (\n                <DropdownMenuItem\n                  href={link.href}\n                  target=\"_blank\"\n                  rel=\"noreferrer noopener\"\n                >\n                  {link.icon === \"markdown\" && (\n                    <Markdown\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"chatgpt\" && (\n                    <svg\n                      role=\"img\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"currentColor\"\n                      class=\"size-4\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                    </svg>\n                  )}\n                  {link.icon === \"claude\" && (\n                    <Claude\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"cursor\" && (\n                    <Cursor\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  <span>{link.label}</span>\n                  <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll(\"[data-slot='typography'] > pre\")\n      .forEach((pre) => {\n        if (pre.closest(\".docs-code-block\")) return\n        const wrapper = document.createElement(\"div\")\n        const button = document.createElement(\"button\")\n        wrapper.className = \"docs-code-block\"\n        wrapper.dataset.notTypeset = \"\"\n        button.type = \"button\"\n        button.className = \"docs-code-copy\"\n        button.ariaLabel = \"Copy code\"\n        button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n        pre.before(wrapper)\n        wrapper.append(pre, button)\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[id^='docs-copy-page-'], .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\" data-doc-content>\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document.querySelectorAll(\"[data-doc-content] > pre\").forEach((pre) => {\n      if (pre.closest(\".docs-code-block\")) return\n      const wrapper = document.createElement(\"div\")\n      const button = document.createElement(\"button\")\n      wrapper.className = \"docs-code-block\"\n      wrapper.dataset.notTypeset = \"\"\n      button.type = \"button\"\n      button.className = \"docs-code-copy\"\n      button.ariaLabel = \"Copy code\"\n      button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n      pre.before(wrapper)\n      wrapper.append(pre, button)\n    })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/faqs-1.json b/public/r/faqs-1.json
index dd7bab930..e33726343 100644
--- a/public/r/faqs-1.json
+++ b/public/r/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/faqs-2.json b/public/r/faqs-2.json
index a76c98096..5d669bafe 100644
--- a/public/r/faqs-2.json
+++ b/public/r/faqs-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons?.length && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/features-1.json b/public/r/features-1.json
index fae8c3764..e4cd92254 100644
--- a/public/r/features-1.json
+++ b/public/r/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/features-2.json b/public/r/features-2.json
index c2cf45f9c..51c9a088e 100644
--- a/public/r/features-2.json
+++ b/public/r/features-2.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/features-4.json b/public/r/features-4.json
index 6c3870911..6210bc332 100644
--- a/public/r/features-4.json
+++ b/public/r/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons?.length && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/features-5.json b/public/r/features-5.json
index 9bbc9affe..8575743db 100644
--- a/public/r/features-5.json
+++ b/public/r/features-5.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/features-6.json b/public/r/features-6.json
index 248bb4563..5e729533e 100644
--- a/public/r/features-6.json
+++ b/public/r/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons?.length && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/header-1.json b/public/r/header-1.json
index d4c11d61a..8baebe0f5 100644
--- a/public/r/header-1.json
+++ b/public/r/header-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/header-2.json b/public/r/header-2.json
index 30a7c4e17..a1039f8b2 100644
--- a/public/r/header-2.json
+++ b/public/r/header-2.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/header-3.json b/public/r/header-3.json
index 14a7fea9f..e511a92e7 100644
--- a/public/r/header-3.json
+++ b/public/r/header-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/header-4.json b/public/r/header-4.json
index 94e357029..3bd445ad1 100644
--- a/public/r/header-4.json
+++ b/public/r/header-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links?.length && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/header-5.json b/public/r/header-5.json
index e6cfc0b16..5f781e13c 100644
--- a/public/r/header-5.json
+++ b/public/r/header-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links?.length && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/links-2.json b/public/r/links-2.json
index 5980421f0..3d1b59a93 100644
--- a/public/r/links-2.json
+++ b/public/r/links-2.json
@@ -2,17 +2,12 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "links-2",
   "title": "Links 2",
-  "description": "Link carousel blocks for presenting related pages, components, or resources.",
+  "description": "Link grid blocks for presenting related pages, components, or resources.",
   "dependencies": [
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/accordion",
-    "@fulldev/button",
-    "@fulldev/card",
-    "@fulldev/carousel",
-    "@fulldev/section",
-    "@fulldev/tabs"
+    "@fulldev/section"
   ],
   "files": [
     {
diff --git a/public/r/registry.json b/public/r/registry.json
index 7d74eff2f..ea0465cff 100644
--- a/public/r/registry.json
+++ b/public/r/registry.json
@@ -3838,7 +3838,7 @@
       "name": "links-2",
       "type": "registry:block",
       "title": "Links 2",
-      "description": "Link carousel blocks for presenting related pages, components, or resources.",
+      "description": "Link grid blocks for presenting related pages, components, or resources.",
       "categories": [
         "links"
       ],
@@ -3847,12 +3847,7 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/accordion",
-        "@fulldev/button",
-        "@fulldev/card",
-        "@fulldev/carousel",
-        "@fulldev/section",
-        "@fulldev/tabs"
+        "@fulldev/section"
       ],
       "files": [
         {
@@ -4470,7 +4465,6 @@
         "@fulldev/header",
         "@fulldev/icon",
         "@fulldev/kbd",
-        "@fulldev/layout",
         "@fulldev/logo",
         "@fulldev/separator",
         "@fulldev/sidebar",
diff --git a/public/r/services-1.json b/public/r/services-1.json
index f934c1f9b..3fef88847 100644
--- a/public/r/services-1.json
+++ b/public/r/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/services-2.json b/public/r/services-2.json
index 36df53f2c..22252912d 100644
--- a/public/r/services-2.json
+++ b/public/r/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/services-3.json b/public/r/services-3.json
index c031f55bc..6f77bedb6 100644
--- a/public/r/services-3.json
+++ b/public/r/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/services-4.json b/public/r/services-4.json
index 8319c0db0..112b8fe30 100644
--- a/public/r/services-4.json
+++ b/public/r/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/services-5.json b/public/r/services-5.json
index b20aeb7ab..02476c58a 100644
--- a/public/r/services-5.json
+++ b/public/r/services-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/services-6.json b/public/r/services-6.json
index d20c3c556..76d0bd582 100644
--- a/public/r/services-6.json
+++ b/public/r/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/services-7.json b/public/r/services-7.json
index 9a22c4444..091def64d 100644
--- a/public/r/services-7.json
+++ b/public/r/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/sidebar-1.json b/public/r/sidebar-1.json
index c09ee6102..66f778967 100644
--- a/public/r/sidebar-1.json
+++ b/public/r/sidebar-1.json
@@ -14,7 +14,6 @@
     "@fulldev/header",
     "@fulldev/icon",
     "@fulldev/kbd",
-    "@fulldev/layout",
     "@fulldev/logo",
     "@fulldev/separator",
     "@fulldev/sidebar",
@@ -23,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n}: Props = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nlet githubStars = \"Stars\"\n\ntry {\n  const response = await fetch(`https://api.github.com/repos/${githubRepo}`)\n  const data = await response.json()\n\n  if (response.ok && typeof data.stargazers_count === \"number\") {\n    githubStars = new Intl.NumberFormat().format(data.stargazers_count)\n  }\n} catch {\n  // Keep the fallback label when GitHub is unavailable.\n}\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStars}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? \"Stars\"\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/banner-2.json b/public/r/styles/base-luma/banner-2.json
index 6e48f54fe..6ea880320 100644
--- a/public/r/styles/base-luma/banner-2.json
+++ b/public/r/styles/base-luma/banner-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/blocks-1.json b/public/r/styles/base-luma/blocks-1.json
index 7c342e844..5f875b246 100644
--- a/public/r/styles/base-luma/blocks-1.json
+++ b/public/r/styles/base-luma/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              {openLinks.map((link) => (\n                <DropdownMenuItem\n                  href={link.href}\n                  target=\"_blank\"\n                  rel=\"noreferrer noopener\"\n                >\n                  {link.icon === \"markdown\" && (\n                    <Markdown\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"chatgpt\" && (\n                    <svg\n                      role=\"img\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"currentColor\"\n                      class=\"size-4\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                    </svg>\n                  )}\n                  {link.icon === \"claude\" && (\n                    <Claude\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"cursor\" && (\n                    <Cursor\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  <span>{link.label}</span>\n                  <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/contact-1.json b/public/r/styles/base-luma/contact-1.json
index 5108a5643..9af391672 100644
--- a/public/r/styles/base-luma/contact-1.json
+++ b/public/r/styles/base-luma/contact-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/contact-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n              />\n              <FieldDescription>{form.messageDescription}</FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n                aria-describedby={`${formId}-message-description`}\n              />\n              <FieldDescription id={`${formId}-message-description`}>\n                {form.messageDescription}\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/content-1.json b/public/r/styles/base-luma/content-1.json
index e15f48b21..9bd4e3cc6 100644
--- a/public/r/styles/base-luma/content-1.json
+++ b/public/r/styles/base-luma/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features?.length && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons?.length && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features && features.length > 0 && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/content-2.json b/public/r/styles/base-luma/content-2.json
index ae71c7e37..14af2df66 100644
--- a/public/r/styles/base-luma/content-2.json
+++ b/public/r/styles/base-luma/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features?.length && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/content-3.json b/public/r/styles/base-luma/content-3.json
index 1fc69b356..6ae269ebc 100644
--- a/public/r/styles/base-luma/content-3.json
+++ b/public/r/styles/base-luma/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/content-4.json b/public/r/styles/base-luma/content-4.json
index def8f5ea3..09aa3dfbf 100644
--- a/public/r/styles/base-luma/content-4.json
+++ b/public/r/styles/base-luma/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features?.length && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons?.length && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features && features.length > 0 && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons && buttons.length > 0 && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/cta-1.json b/public/r/styles/base-luma/cta-1.json
index ba417864c..d4b30fd2d 100644
--- a/public/r/styles/base-luma/cta-1.json
+++ b/public/r/styles/base-luma/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/cta-2.json b/public/r/styles/base-luma/cta-2.json
index 783e24bb0..458de6318 100644
--- a/public/r/styles/base-luma/cta-2.json
+++ b/public/r/styles/base-luma/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/cta-3.json b/public/r/styles/base-luma/cta-3.json
index 44c7a351f..dba896177 100644
--- a/public/r/styles/base-luma/cta-3.json
+++ b/public/r/styles/base-luma/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/cta-4.json b/public/r/styles/base-luma/cta-4.json
index 91de3701c..244bfa2cd 100644
--- a/public/r/styles/base-luma/cta-4.json
+++ b/public/r/styles/base-luma/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/cta-5.json b/public/r/styles/base-luma/cta-5.json
index 5f0fb0cb8..9c655d7ac 100644
--- a/public/r/styles/base-luma/cta-5.json
+++ b/public/r/styles/base-luma/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features?.length && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/cta-6.json b/public/r/styles/base-luma/cta-6.json
index 4cf570ac1..8b4d735ee 100644
--- a/public/r/styles/base-luma/cta-6.json
+++ b/public/r/styles/base-luma/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/cta-7.json b/public/r/styles/base-luma/cta-7.json
index 013a1100f..961d6855d 100644
--- a/public/r/styles/base-luma/cta-7.json
+++ b/public/r/styles/base-luma/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/cta-8.json b/public/r/styles/base-luma/cta-8.json
index 2bc3031f2..4b2d77e41 100644
--- a/public/r/styles/base-luma/cta-8.json
+++ b/public/r/styles/base-luma/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/doc-1.json b/public/r/styles/base-luma/doc-1.json
index 8585d22dc..4806861e6 100644
--- a/public/r/styles/base-luma/doc-1.json
+++ b/public/r/styles/base-luma/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              {openLinks.map((link) => (\n                <DropdownMenuItem\n                  href={link.href}\n                  target=\"_blank\"\n                  rel=\"noreferrer noopener\"\n                >\n                  {link.icon === \"markdown\" && (\n                    <Markdown\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"chatgpt\" && (\n                    <svg\n                      role=\"img\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"currentColor\"\n                      class=\"size-4\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                    </svg>\n                  )}\n                  {link.icon === \"claude\" && (\n                    <Claude\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"cursor\" && (\n                    <Cursor\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  <span>{link.label}</span>\n                  <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll(\"[data-slot='typography'] > pre\")\n      .forEach((pre) => {\n        if (pre.closest(\".docs-code-block\")) return\n        const wrapper = document.createElement(\"div\")\n        const button = document.createElement(\"button\")\n        wrapper.className = \"docs-code-block\"\n        wrapper.dataset.notTypeset = \"\"\n        button.type = \"button\"\n        button.className = \"docs-code-copy\"\n        button.ariaLabel = \"Copy code\"\n        button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n        pre.before(wrapper)\n        wrapper.append(pre, button)\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[id^='docs-copy-page-'], .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\" data-doc-content>\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document.querySelectorAll(\"[data-doc-content] > pre\").forEach((pre) => {\n      if (pre.closest(\".docs-code-block\")) return\n      const wrapper = document.createElement(\"div\")\n      const button = document.createElement(\"button\")\n      wrapper.className = \"docs-code-block\"\n      wrapper.dataset.notTypeset = \"\"\n      button.type = \"button\"\n      button.className = \"docs-code-copy\"\n      button.ariaLabel = \"Copy code\"\n      button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n      pre.before(wrapper)\n      wrapper.append(pre, button)\n    })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/faqs-1.json b/public/r/styles/base-luma/faqs-1.json
index dd7bab930..e33726343 100644
--- a/public/r/styles/base-luma/faqs-1.json
+++ b/public/r/styles/base-luma/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/faqs-2.json b/public/r/styles/base-luma/faqs-2.json
index a76c98096..5d669bafe 100644
--- a/public/r/styles/base-luma/faqs-2.json
+++ b/public/r/styles/base-luma/faqs-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons?.length && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/features-1.json b/public/r/styles/base-luma/features-1.json
index fae8c3764..e4cd92254 100644
--- a/public/r/styles/base-luma/features-1.json
+++ b/public/r/styles/base-luma/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/features-2.json b/public/r/styles/base-luma/features-2.json
index c2cf45f9c..51c9a088e 100644
--- a/public/r/styles/base-luma/features-2.json
+++ b/public/r/styles/base-luma/features-2.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/features-4.json b/public/r/styles/base-luma/features-4.json
index 6c3870911..6210bc332 100644
--- a/public/r/styles/base-luma/features-4.json
+++ b/public/r/styles/base-luma/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons?.length && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/features-5.json b/public/r/styles/base-luma/features-5.json
index 9bbc9affe..8575743db 100644
--- a/public/r/styles/base-luma/features-5.json
+++ b/public/r/styles/base-luma/features-5.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/features-6.json b/public/r/styles/base-luma/features-6.json
index 248bb4563..5e729533e 100644
--- a/public/r/styles/base-luma/features-6.json
+++ b/public/r/styles/base-luma/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons?.length && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/header-1.json b/public/r/styles/base-luma/header-1.json
index d4c11d61a..8baebe0f5 100644
--- a/public/r/styles/base-luma/header-1.json
+++ b/public/r/styles/base-luma/header-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/header-2.json b/public/r/styles/base-luma/header-2.json
index 30a7c4e17..a1039f8b2 100644
--- a/public/r/styles/base-luma/header-2.json
+++ b/public/r/styles/base-luma/header-2.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/header-3.json b/public/r/styles/base-luma/header-3.json
index 14a7fea9f..e511a92e7 100644
--- a/public/r/styles/base-luma/header-3.json
+++ b/public/r/styles/base-luma/header-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/header-4.json b/public/r/styles/base-luma/header-4.json
index 94e357029..3bd445ad1 100644
--- a/public/r/styles/base-luma/header-4.json
+++ b/public/r/styles/base-luma/header-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links?.length && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/header-5.json b/public/r/styles/base-luma/header-5.json
index e6cfc0b16..5f781e13c 100644
--- a/public/r/styles/base-luma/header-5.json
+++ b/public/r/styles/base-luma/header-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links?.length && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/links-2.json b/public/r/styles/base-luma/links-2.json
index 5980421f0..3d1b59a93 100644
--- a/public/r/styles/base-luma/links-2.json
+++ b/public/r/styles/base-luma/links-2.json
@@ -2,17 +2,12 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "links-2",
   "title": "Links 2",
-  "description": "Link carousel blocks for presenting related pages, components, or resources.",
+  "description": "Link grid blocks for presenting related pages, components, or resources.",
   "dependencies": [
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/accordion",
-    "@fulldev/button",
-    "@fulldev/card",
-    "@fulldev/carousel",
-    "@fulldev/section",
-    "@fulldev/tabs"
+    "@fulldev/section"
   ],
   "files": [
     {
diff --git a/public/r/styles/base-luma/registry.json b/public/r/styles/base-luma/registry.json
index 97573b411..8c9ec1bd8 100644
--- a/public/r/styles/base-luma/registry.json
+++ b/public/r/styles/base-luma/registry.json
@@ -3838,7 +3838,7 @@
       "name": "links-2",
       "type": "registry:block",
       "title": "Links 2",
-      "description": "Link carousel blocks for presenting related pages, components, or resources.",
+      "description": "Link grid blocks for presenting related pages, components, or resources.",
       "categories": [
         "links"
       ],
@@ -3847,12 +3847,7 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/accordion",
-        "@fulldev/button",
-        "@fulldev/card",
-        "@fulldev/carousel",
-        "@fulldev/section",
-        "@fulldev/tabs"
+        "@fulldev/section"
       ],
       "files": [
         {
@@ -4470,7 +4465,6 @@
         "@fulldev/header",
         "@fulldev/icon",
         "@fulldev/kbd",
-        "@fulldev/layout",
         "@fulldev/logo",
         "@fulldev/separator",
         "@fulldev/sidebar",
diff --git a/public/r/styles/base-luma/services-1.json b/public/r/styles/base-luma/services-1.json
index f934c1f9b..3fef88847 100644
--- a/public/r/styles/base-luma/services-1.json
+++ b/public/r/styles/base-luma/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/services-2.json b/public/r/styles/base-luma/services-2.json
index 36df53f2c..22252912d 100644
--- a/public/r/styles/base-luma/services-2.json
+++ b/public/r/styles/base-luma/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/services-3.json b/public/r/styles/base-luma/services-3.json
index c031f55bc..6f77bedb6 100644
--- a/public/r/styles/base-luma/services-3.json
+++ b/public/r/styles/base-luma/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/services-4.json b/public/r/styles/base-luma/services-4.json
index 8319c0db0..112b8fe30 100644
--- a/public/r/styles/base-luma/services-4.json
+++ b/public/r/styles/base-luma/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/services-5.json b/public/r/styles/base-luma/services-5.json
index b20aeb7ab..02476c58a 100644
--- a/public/r/styles/base-luma/services-5.json
+++ b/public/r/styles/base-luma/services-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/services-6.json b/public/r/styles/base-luma/services-6.json
index d20c3c556..76d0bd582 100644
--- a/public/r/styles/base-luma/services-6.json
+++ b/public/r/styles/base-luma/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/services-7.json b/public/r/styles/base-luma/services-7.json
index 9a22c4444..091def64d 100644
--- a/public/r/styles/base-luma/services-7.json
+++ b/public/r/styles/base-luma/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/sidebar-1.json b/public/r/styles/base-luma/sidebar-1.json
index c09ee6102..66f778967 100644
--- a/public/r/styles/base-luma/sidebar-1.json
+++ b/public/r/styles/base-luma/sidebar-1.json
@@ -14,7 +14,6 @@
     "@fulldev/header",
     "@fulldev/icon",
     "@fulldev/kbd",
-    "@fulldev/layout",
     "@fulldev/logo",
     "@fulldev/separator",
     "@fulldev/sidebar",
@@ -23,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n}: Props = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nlet githubStars = \"Stars\"\n\ntry {\n  const response = await fetch(`https://api.github.com/repos/${githubRepo}`)\n  const data = await response.json()\n\n  if (response.ok && typeof data.stargazers_count === \"number\") {\n    githubStars = new Intl.NumberFormat().format(data.stargazers_count)\n  }\n} catch {\n  // Keep the fallback label when GitHub is unavailable.\n}\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStars}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? \"Stars\"\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/banner-2.json b/public/r/styles/base-lyra/banner-2.json
index 6e48f54fe..6ea880320 100644
--- a/public/r/styles/base-lyra/banner-2.json
+++ b/public/r/styles/base-lyra/banner-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/blocks-1.json b/public/r/styles/base-lyra/blocks-1.json
index 7c342e844..5f875b246 100644
--- a/public/r/styles/base-lyra/blocks-1.json
+++ b/public/r/styles/base-lyra/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              {openLinks.map((link) => (\n                <DropdownMenuItem\n                  href={link.href}\n                  target=\"_blank\"\n                  rel=\"noreferrer noopener\"\n                >\n                  {link.icon === \"markdown\" && (\n                    <Markdown\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"chatgpt\" && (\n                    <svg\n                      role=\"img\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"currentColor\"\n                      class=\"size-4\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                    </svg>\n                  )}\n                  {link.icon === \"claude\" && (\n                    <Claude\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"cursor\" && (\n                    <Cursor\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  <span>{link.label}</span>\n                  <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/contact-1.json b/public/r/styles/base-lyra/contact-1.json
index 5108a5643..9af391672 100644
--- a/public/r/styles/base-lyra/contact-1.json
+++ b/public/r/styles/base-lyra/contact-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/contact-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n              />\n              <FieldDescription>{form.messageDescription}</FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n                aria-describedby={`${formId}-message-description`}\n              />\n              <FieldDescription id={`${formId}-message-description`}>\n                {form.messageDescription}\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/content-1.json b/public/r/styles/base-lyra/content-1.json
index e15f48b21..9bd4e3cc6 100644
--- a/public/r/styles/base-lyra/content-1.json
+++ b/public/r/styles/base-lyra/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features?.length && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons?.length && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features && features.length > 0 && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/content-2.json b/public/r/styles/base-lyra/content-2.json
index ae71c7e37..14af2df66 100644
--- a/public/r/styles/base-lyra/content-2.json
+++ b/public/r/styles/base-lyra/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features?.length && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/content-3.json b/public/r/styles/base-lyra/content-3.json
index 1fc69b356..6ae269ebc 100644
--- a/public/r/styles/base-lyra/content-3.json
+++ b/public/r/styles/base-lyra/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/content-4.json b/public/r/styles/base-lyra/content-4.json
index def8f5ea3..09aa3dfbf 100644
--- a/public/r/styles/base-lyra/content-4.json
+++ b/public/r/styles/base-lyra/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features?.length && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons?.length && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features && features.length > 0 && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons && buttons.length > 0 && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/cta-1.json b/public/r/styles/base-lyra/cta-1.json
index ba417864c..d4b30fd2d 100644
--- a/public/r/styles/base-lyra/cta-1.json
+++ b/public/r/styles/base-lyra/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/cta-2.json b/public/r/styles/base-lyra/cta-2.json
index 783e24bb0..458de6318 100644
--- a/public/r/styles/base-lyra/cta-2.json
+++ b/public/r/styles/base-lyra/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/cta-3.json b/public/r/styles/base-lyra/cta-3.json
index 44c7a351f..dba896177 100644
--- a/public/r/styles/base-lyra/cta-3.json
+++ b/public/r/styles/base-lyra/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/cta-4.json b/public/r/styles/base-lyra/cta-4.json
index 91de3701c..244bfa2cd 100644
--- a/public/r/styles/base-lyra/cta-4.json
+++ b/public/r/styles/base-lyra/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/cta-5.json b/public/r/styles/base-lyra/cta-5.json
index 5f0fb0cb8..9c655d7ac 100644
--- a/public/r/styles/base-lyra/cta-5.json
+++ b/public/r/styles/base-lyra/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features?.length && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/cta-6.json b/public/r/styles/base-lyra/cta-6.json
index 4cf570ac1..8b4d735ee 100644
--- a/public/r/styles/base-lyra/cta-6.json
+++ b/public/r/styles/base-lyra/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/cta-7.json b/public/r/styles/base-lyra/cta-7.json
index 013a1100f..961d6855d 100644
--- a/public/r/styles/base-lyra/cta-7.json
+++ b/public/r/styles/base-lyra/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/cta-8.json b/public/r/styles/base-lyra/cta-8.json
index 2bc3031f2..4b2d77e41 100644
--- a/public/r/styles/base-lyra/cta-8.json
+++ b/public/r/styles/base-lyra/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/doc-1.json b/public/r/styles/base-lyra/doc-1.json
index 8585d22dc..4806861e6 100644
--- a/public/r/styles/base-lyra/doc-1.json
+++ b/public/r/styles/base-lyra/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              {openLinks.map((link) => (\n                <DropdownMenuItem\n                  href={link.href}\n                  target=\"_blank\"\n                  rel=\"noreferrer noopener\"\n                >\n                  {link.icon === \"markdown\" && (\n                    <Markdown\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"chatgpt\" && (\n                    <svg\n                      role=\"img\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"currentColor\"\n                      class=\"size-4\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                    </svg>\n                  )}\n                  {link.icon === \"claude\" && (\n                    <Claude\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"cursor\" && (\n                    <Cursor\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  <span>{link.label}</span>\n                  <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll(\"[data-slot='typography'] > pre\")\n      .forEach((pre) => {\n        if (pre.closest(\".docs-code-block\")) return\n        const wrapper = document.createElement(\"div\")\n        const button = document.createElement(\"button\")\n        wrapper.className = \"docs-code-block\"\n        wrapper.dataset.notTypeset = \"\"\n        button.type = \"button\"\n        button.className = \"docs-code-copy\"\n        button.ariaLabel = \"Copy code\"\n        button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n        pre.before(wrapper)\n        wrapper.append(pre, button)\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[id^='docs-copy-page-'], .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\" data-doc-content>\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document.querySelectorAll(\"[data-doc-content] > pre\").forEach((pre) => {\n      if (pre.closest(\".docs-code-block\")) return\n      const wrapper = document.createElement(\"div\")\n      const button = document.createElement(\"button\")\n      wrapper.className = \"docs-code-block\"\n      wrapper.dataset.notTypeset = \"\"\n      button.type = \"button\"\n      button.className = \"docs-code-copy\"\n      button.ariaLabel = \"Copy code\"\n      button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n      pre.before(wrapper)\n      wrapper.append(pre, button)\n    })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/faqs-1.json b/public/r/styles/base-lyra/faqs-1.json
index dd7bab930..e33726343 100644
--- a/public/r/styles/base-lyra/faqs-1.json
+++ b/public/r/styles/base-lyra/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/faqs-2.json b/public/r/styles/base-lyra/faqs-2.json
index a76c98096..5d669bafe 100644
--- a/public/r/styles/base-lyra/faqs-2.json
+++ b/public/r/styles/base-lyra/faqs-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons?.length && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/features-1.json b/public/r/styles/base-lyra/features-1.json
index fae8c3764..e4cd92254 100644
--- a/public/r/styles/base-lyra/features-1.json
+++ b/public/r/styles/base-lyra/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/features-2.json b/public/r/styles/base-lyra/features-2.json
index c2cf45f9c..51c9a088e 100644
--- a/public/r/styles/base-lyra/features-2.json
+++ b/public/r/styles/base-lyra/features-2.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/features-4.json b/public/r/styles/base-lyra/features-4.json
index 6c3870911..6210bc332 100644
--- a/public/r/styles/base-lyra/features-4.json
+++ b/public/r/styles/base-lyra/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons?.length && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/features-5.json b/public/r/styles/base-lyra/features-5.json
index 9bbc9affe..8575743db 100644
--- a/public/r/styles/base-lyra/features-5.json
+++ b/public/r/styles/base-lyra/features-5.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/features-6.json b/public/r/styles/base-lyra/features-6.json
index 248bb4563..5e729533e 100644
--- a/public/r/styles/base-lyra/features-6.json
+++ b/public/r/styles/base-lyra/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons?.length && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/header-1.json b/public/r/styles/base-lyra/header-1.json
index d4c11d61a..8baebe0f5 100644
--- a/public/r/styles/base-lyra/header-1.json
+++ b/public/r/styles/base-lyra/header-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/header-2.json b/public/r/styles/base-lyra/header-2.json
index 30a7c4e17..a1039f8b2 100644
--- a/public/r/styles/base-lyra/header-2.json
+++ b/public/r/styles/base-lyra/header-2.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/header-3.json b/public/r/styles/base-lyra/header-3.json
index 14a7fea9f..e511a92e7 100644
--- a/public/r/styles/base-lyra/header-3.json
+++ b/public/r/styles/base-lyra/header-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/header-4.json b/public/r/styles/base-lyra/header-4.json
index 94e357029..3bd445ad1 100644
--- a/public/r/styles/base-lyra/header-4.json
+++ b/public/r/styles/base-lyra/header-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links?.length && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/header-5.json b/public/r/styles/base-lyra/header-5.json
index e6cfc0b16..5f781e13c 100644
--- a/public/r/styles/base-lyra/header-5.json
+++ b/public/r/styles/base-lyra/header-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links?.length && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/links-2.json b/public/r/styles/base-lyra/links-2.json
index 5980421f0..3d1b59a93 100644
--- a/public/r/styles/base-lyra/links-2.json
+++ b/public/r/styles/base-lyra/links-2.json
@@ -2,17 +2,12 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "links-2",
   "title": "Links 2",
-  "description": "Link carousel blocks for presenting related pages, components, or resources.",
+  "description": "Link grid blocks for presenting related pages, components, or resources.",
   "dependencies": [
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/accordion",
-    "@fulldev/button",
-    "@fulldev/card",
-    "@fulldev/carousel",
-    "@fulldev/section",
-    "@fulldev/tabs"
+    "@fulldev/section"
   ],
   "files": [
     {
diff --git a/public/r/styles/base-lyra/registry.json b/public/r/styles/base-lyra/registry.json
index 503cf0db3..a70677f3a 100644
--- a/public/r/styles/base-lyra/registry.json
+++ b/public/r/styles/base-lyra/registry.json
@@ -3838,7 +3838,7 @@
       "name": "links-2",
       "type": "registry:block",
       "title": "Links 2",
-      "description": "Link carousel blocks for presenting related pages, components, or resources.",
+      "description": "Link grid blocks for presenting related pages, components, or resources.",
       "categories": [
         "links"
       ],
@@ -3847,12 +3847,7 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/accordion",
-        "@fulldev/button",
-        "@fulldev/card",
-        "@fulldev/carousel",
-        "@fulldev/section",
-        "@fulldev/tabs"
+        "@fulldev/section"
       ],
       "files": [
         {
@@ -4470,7 +4465,6 @@
         "@fulldev/header",
         "@fulldev/icon",
         "@fulldev/kbd",
-        "@fulldev/layout",
         "@fulldev/logo",
         "@fulldev/separator",
         "@fulldev/sidebar",
diff --git a/public/r/styles/base-lyra/services-1.json b/public/r/styles/base-lyra/services-1.json
index f934c1f9b..3fef88847 100644
--- a/public/r/styles/base-lyra/services-1.json
+++ b/public/r/styles/base-lyra/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/services-2.json b/public/r/styles/base-lyra/services-2.json
index 36df53f2c..22252912d 100644
--- a/public/r/styles/base-lyra/services-2.json
+++ b/public/r/styles/base-lyra/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/services-3.json b/public/r/styles/base-lyra/services-3.json
index c031f55bc..6f77bedb6 100644
--- a/public/r/styles/base-lyra/services-3.json
+++ b/public/r/styles/base-lyra/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/services-4.json b/public/r/styles/base-lyra/services-4.json
index 8319c0db0..112b8fe30 100644
--- a/public/r/styles/base-lyra/services-4.json
+++ b/public/r/styles/base-lyra/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/services-5.json b/public/r/styles/base-lyra/services-5.json
index b20aeb7ab..02476c58a 100644
--- a/public/r/styles/base-lyra/services-5.json
+++ b/public/r/styles/base-lyra/services-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/services-6.json b/public/r/styles/base-lyra/services-6.json
index d20c3c556..76d0bd582 100644
--- a/public/r/styles/base-lyra/services-6.json
+++ b/public/r/styles/base-lyra/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/services-7.json b/public/r/styles/base-lyra/services-7.json
index 9a22c4444..091def64d 100644
--- a/public/r/styles/base-lyra/services-7.json
+++ b/public/r/styles/base-lyra/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/sidebar-1.json b/public/r/styles/base-lyra/sidebar-1.json
index c09ee6102..66f778967 100644
--- a/public/r/styles/base-lyra/sidebar-1.json
+++ b/public/r/styles/base-lyra/sidebar-1.json
@@ -14,7 +14,6 @@
     "@fulldev/header",
     "@fulldev/icon",
     "@fulldev/kbd",
-    "@fulldev/layout",
     "@fulldev/logo",
     "@fulldev/separator",
     "@fulldev/sidebar",
@@ -23,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n}: Props = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nlet githubStars = \"Stars\"\n\ntry {\n  const response = await fetch(`https://api.github.com/repos/${githubRepo}`)\n  const data = await response.json()\n\n  if (response.ok && typeof data.stargazers_count === \"number\") {\n    githubStars = new Intl.NumberFormat().format(data.stargazers_count)\n  }\n} catch {\n  // Keep the fallback label when GitHub is unavailable.\n}\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStars}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? \"Stars\"\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/banner-2.json b/public/r/styles/base-maia/banner-2.json
index 6e48f54fe..6ea880320 100644
--- a/public/r/styles/base-maia/banner-2.json
+++ b/public/r/styles/base-maia/banner-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/blocks-1.json b/public/r/styles/base-maia/blocks-1.json
index 7c342e844..5f875b246 100644
--- a/public/r/styles/base-maia/blocks-1.json
+++ b/public/r/styles/base-maia/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              {openLinks.map((link) => (\n                <DropdownMenuItem\n                  href={link.href}\n                  target=\"_blank\"\n                  rel=\"noreferrer noopener\"\n                >\n                  {link.icon === \"markdown\" && (\n                    <Markdown\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"chatgpt\" && (\n                    <svg\n                      role=\"img\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"currentColor\"\n                      class=\"size-4\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                    </svg>\n                  )}\n                  {link.icon === \"claude\" && (\n                    <Claude\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"cursor\" && (\n                    <Cursor\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  <span>{link.label}</span>\n                  <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/contact-1.json b/public/r/styles/base-maia/contact-1.json
index 5108a5643..9af391672 100644
--- a/public/r/styles/base-maia/contact-1.json
+++ b/public/r/styles/base-maia/contact-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/contact-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n              />\n              <FieldDescription>{form.messageDescription}</FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n                aria-describedby={`${formId}-message-description`}\n              />\n              <FieldDescription id={`${formId}-message-description`}>\n                {form.messageDescription}\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/content-1.json b/public/r/styles/base-maia/content-1.json
index e15f48b21..9bd4e3cc6 100644
--- a/public/r/styles/base-maia/content-1.json
+++ b/public/r/styles/base-maia/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features?.length && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons?.length && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features && features.length > 0 && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/content-2.json b/public/r/styles/base-maia/content-2.json
index ae71c7e37..14af2df66 100644
--- a/public/r/styles/base-maia/content-2.json
+++ b/public/r/styles/base-maia/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features?.length && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/content-3.json b/public/r/styles/base-maia/content-3.json
index 1fc69b356..6ae269ebc 100644
--- a/public/r/styles/base-maia/content-3.json
+++ b/public/r/styles/base-maia/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/content-4.json b/public/r/styles/base-maia/content-4.json
index def8f5ea3..09aa3dfbf 100644
--- a/public/r/styles/base-maia/content-4.json
+++ b/public/r/styles/base-maia/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features?.length && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons?.length && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features && features.length > 0 && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons && buttons.length > 0 && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/cta-1.json b/public/r/styles/base-maia/cta-1.json
index ba417864c..d4b30fd2d 100644
--- a/public/r/styles/base-maia/cta-1.json
+++ b/public/r/styles/base-maia/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/cta-2.json b/public/r/styles/base-maia/cta-2.json
index 783e24bb0..458de6318 100644
--- a/public/r/styles/base-maia/cta-2.json
+++ b/public/r/styles/base-maia/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/cta-3.json b/public/r/styles/base-maia/cta-3.json
index 44c7a351f..dba896177 100644
--- a/public/r/styles/base-maia/cta-3.json
+++ b/public/r/styles/base-maia/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/cta-4.json b/public/r/styles/base-maia/cta-4.json
index 91de3701c..244bfa2cd 100644
--- a/public/r/styles/base-maia/cta-4.json
+++ b/public/r/styles/base-maia/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/cta-5.json b/public/r/styles/base-maia/cta-5.json
index 5f0fb0cb8..9c655d7ac 100644
--- a/public/r/styles/base-maia/cta-5.json
+++ b/public/r/styles/base-maia/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features?.length && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/cta-6.json b/public/r/styles/base-maia/cta-6.json
index 4cf570ac1..8b4d735ee 100644
--- a/public/r/styles/base-maia/cta-6.json
+++ b/public/r/styles/base-maia/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/cta-7.json b/public/r/styles/base-maia/cta-7.json
index 013a1100f..961d6855d 100644
--- a/public/r/styles/base-maia/cta-7.json
+++ b/public/r/styles/base-maia/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/cta-8.json b/public/r/styles/base-maia/cta-8.json
index 2bc3031f2..4b2d77e41 100644
--- a/public/r/styles/base-maia/cta-8.json
+++ b/public/r/styles/base-maia/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/doc-1.json b/public/r/styles/base-maia/doc-1.json
index 8585d22dc..4806861e6 100644
--- a/public/r/styles/base-maia/doc-1.json
+++ b/public/r/styles/base-maia/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              {openLinks.map((link) => (\n                <DropdownMenuItem\n                  href={link.href}\n                  target=\"_blank\"\n                  rel=\"noreferrer noopener\"\n                >\n                  {link.icon === \"markdown\" && (\n                    <Markdown\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"chatgpt\" && (\n                    <svg\n                      role=\"img\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"currentColor\"\n                      class=\"size-4\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                    </svg>\n                  )}\n                  {link.icon === \"claude\" && (\n                    <Claude\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"cursor\" && (\n                    <Cursor\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  <span>{link.label}</span>\n                  <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll(\"[data-slot='typography'] > pre\")\n      .forEach((pre) => {\n        if (pre.closest(\".docs-code-block\")) return\n        const wrapper = document.createElement(\"div\")\n        const button = document.createElement(\"button\")\n        wrapper.className = \"docs-code-block\"\n        wrapper.dataset.notTypeset = \"\"\n        button.type = \"button\"\n        button.className = \"docs-code-copy\"\n        button.ariaLabel = \"Copy code\"\n        button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n        pre.before(wrapper)\n        wrapper.append(pre, button)\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[id^='docs-copy-page-'], .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\" data-doc-content>\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document.querySelectorAll(\"[data-doc-content] > pre\").forEach((pre) => {\n      if (pre.closest(\".docs-code-block\")) return\n      const wrapper = document.createElement(\"div\")\n      const button = document.createElement(\"button\")\n      wrapper.className = \"docs-code-block\"\n      wrapper.dataset.notTypeset = \"\"\n      button.type = \"button\"\n      button.className = \"docs-code-copy\"\n      button.ariaLabel = \"Copy code\"\n      button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n      pre.before(wrapper)\n      wrapper.append(pre, button)\n    })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/faqs-1.json b/public/r/styles/base-maia/faqs-1.json
index dd7bab930..e33726343 100644
--- a/public/r/styles/base-maia/faqs-1.json
+++ b/public/r/styles/base-maia/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/faqs-2.json b/public/r/styles/base-maia/faqs-2.json
index a76c98096..5d669bafe 100644
--- a/public/r/styles/base-maia/faqs-2.json
+++ b/public/r/styles/base-maia/faqs-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons?.length && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/features-1.json b/public/r/styles/base-maia/features-1.json
index fae8c3764..e4cd92254 100644
--- a/public/r/styles/base-maia/features-1.json
+++ b/public/r/styles/base-maia/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/features-2.json b/public/r/styles/base-maia/features-2.json
index c2cf45f9c..51c9a088e 100644
--- a/public/r/styles/base-maia/features-2.json
+++ b/public/r/styles/base-maia/features-2.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/features-4.json b/public/r/styles/base-maia/features-4.json
index 6c3870911..6210bc332 100644
--- a/public/r/styles/base-maia/features-4.json
+++ b/public/r/styles/base-maia/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons?.length && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/features-5.json b/public/r/styles/base-maia/features-5.json
index 9bbc9affe..8575743db 100644
--- a/public/r/styles/base-maia/features-5.json
+++ b/public/r/styles/base-maia/features-5.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/features-6.json b/public/r/styles/base-maia/features-6.json
index 248bb4563..5e729533e 100644
--- a/public/r/styles/base-maia/features-6.json
+++ b/public/r/styles/base-maia/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons?.length && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/header-1.json b/public/r/styles/base-maia/header-1.json
index d4c11d61a..8baebe0f5 100644
--- a/public/r/styles/base-maia/header-1.json
+++ b/public/r/styles/base-maia/header-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/header-2.json b/public/r/styles/base-maia/header-2.json
index 30a7c4e17..a1039f8b2 100644
--- a/public/r/styles/base-maia/header-2.json
+++ b/public/r/styles/base-maia/header-2.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/header-3.json b/public/r/styles/base-maia/header-3.json
index 14a7fea9f..e511a92e7 100644
--- a/public/r/styles/base-maia/header-3.json
+++ b/public/r/styles/base-maia/header-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/header-4.json b/public/r/styles/base-maia/header-4.json
index 94e357029..3bd445ad1 100644
--- a/public/r/styles/base-maia/header-4.json
+++ b/public/r/styles/base-maia/header-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links?.length && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/header-5.json b/public/r/styles/base-maia/header-5.json
index e6cfc0b16..5f781e13c 100644
--- a/public/r/styles/base-maia/header-5.json
+++ b/public/r/styles/base-maia/header-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links?.length && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/links-2.json b/public/r/styles/base-maia/links-2.json
index 5980421f0..3d1b59a93 100644
--- a/public/r/styles/base-maia/links-2.json
+++ b/public/r/styles/base-maia/links-2.json
@@ -2,17 +2,12 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "links-2",
   "title": "Links 2",
-  "description": "Link carousel blocks for presenting related pages, components, or resources.",
+  "description": "Link grid blocks for presenting related pages, components, or resources.",
   "dependencies": [
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/accordion",
-    "@fulldev/button",
-    "@fulldev/card",
-    "@fulldev/carousel",
-    "@fulldev/section",
-    "@fulldev/tabs"
+    "@fulldev/section"
   ],
   "files": [
     {
diff --git a/public/r/styles/base-maia/registry.json b/public/r/styles/base-maia/registry.json
index 40f0121ef..404d1980d 100644
--- a/public/r/styles/base-maia/registry.json
+++ b/public/r/styles/base-maia/registry.json
@@ -3838,7 +3838,7 @@
       "name": "links-2",
       "type": "registry:block",
       "title": "Links 2",
-      "description": "Link carousel blocks for presenting related pages, components, or resources.",
+      "description": "Link grid blocks for presenting related pages, components, or resources.",
       "categories": [
         "links"
       ],
@@ -3847,12 +3847,7 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/accordion",
-        "@fulldev/button",
-        "@fulldev/card",
-        "@fulldev/carousel",
-        "@fulldev/section",
-        "@fulldev/tabs"
+        "@fulldev/section"
       ],
       "files": [
         {
@@ -4470,7 +4465,6 @@
         "@fulldev/header",
         "@fulldev/icon",
         "@fulldev/kbd",
-        "@fulldev/layout",
         "@fulldev/logo",
         "@fulldev/separator",
         "@fulldev/sidebar",
diff --git a/public/r/styles/base-maia/services-1.json b/public/r/styles/base-maia/services-1.json
index f934c1f9b..3fef88847 100644
--- a/public/r/styles/base-maia/services-1.json
+++ b/public/r/styles/base-maia/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/services-2.json b/public/r/styles/base-maia/services-2.json
index 36df53f2c..22252912d 100644
--- a/public/r/styles/base-maia/services-2.json
+++ b/public/r/styles/base-maia/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/services-3.json b/public/r/styles/base-maia/services-3.json
index c031f55bc..6f77bedb6 100644
--- a/public/r/styles/base-maia/services-3.json
+++ b/public/r/styles/base-maia/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/services-4.json b/public/r/styles/base-maia/services-4.json
index 8319c0db0..112b8fe30 100644
--- a/public/r/styles/base-maia/services-4.json
+++ b/public/r/styles/base-maia/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/services-5.json b/public/r/styles/base-maia/services-5.json
index b20aeb7ab..02476c58a 100644
--- a/public/r/styles/base-maia/services-5.json
+++ b/public/r/styles/base-maia/services-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/services-6.json b/public/r/styles/base-maia/services-6.json
index d20c3c556..76d0bd582 100644
--- a/public/r/styles/base-maia/services-6.json
+++ b/public/r/styles/base-maia/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/services-7.json b/public/r/styles/base-maia/services-7.json
index 9a22c4444..091def64d 100644
--- a/public/r/styles/base-maia/services-7.json
+++ b/public/r/styles/base-maia/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/sidebar-1.json b/public/r/styles/base-maia/sidebar-1.json
index c09ee6102..66f778967 100644
--- a/public/r/styles/base-maia/sidebar-1.json
+++ b/public/r/styles/base-maia/sidebar-1.json
@@ -14,7 +14,6 @@
     "@fulldev/header",
     "@fulldev/icon",
     "@fulldev/kbd",
-    "@fulldev/layout",
     "@fulldev/logo",
     "@fulldev/separator",
     "@fulldev/sidebar",
@@ -23,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n}: Props = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nlet githubStars = \"Stars\"\n\ntry {\n  const response = await fetch(`https://api.github.com/repos/${githubRepo}`)\n  const data = await response.json()\n\n  if (response.ok && typeof data.stargazers_count === \"number\") {\n    githubStars = new Intl.NumberFormat().format(data.stargazers_count)\n  }\n} catch {\n  // Keep the fallback label when GitHub is unavailable.\n}\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStars}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? \"Stars\"\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/banner-2.json b/public/r/styles/base-mira/banner-2.json
index 6e48f54fe..6ea880320 100644
--- a/public/r/styles/base-mira/banner-2.json
+++ b/public/r/styles/base-mira/banner-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/blocks-1.json b/public/r/styles/base-mira/blocks-1.json
index 7c342e844..5f875b246 100644
--- a/public/r/styles/base-mira/blocks-1.json
+++ b/public/r/styles/base-mira/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              {openLinks.map((link) => (\n                <DropdownMenuItem\n                  href={link.href}\n                  target=\"_blank\"\n                  rel=\"noreferrer noopener\"\n                >\n                  {link.icon === \"markdown\" && (\n                    <Markdown\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"chatgpt\" && (\n                    <svg\n                      role=\"img\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"currentColor\"\n                      class=\"size-4\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                    </svg>\n                  )}\n                  {link.icon === \"claude\" && (\n                    <Claude\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"cursor\" && (\n                    <Cursor\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  <span>{link.label}</span>\n                  <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/contact-1.json b/public/r/styles/base-mira/contact-1.json
index 5108a5643..9af391672 100644
--- a/public/r/styles/base-mira/contact-1.json
+++ b/public/r/styles/base-mira/contact-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/contact-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n              />\n              <FieldDescription>{form.messageDescription}</FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n                aria-describedby={`${formId}-message-description`}\n              />\n              <FieldDescription id={`${formId}-message-description`}>\n                {form.messageDescription}\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/content-1.json b/public/r/styles/base-mira/content-1.json
index e15f48b21..9bd4e3cc6 100644
--- a/public/r/styles/base-mira/content-1.json
+++ b/public/r/styles/base-mira/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features?.length && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons?.length && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features && features.length > 0 && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/content-2.json b/public/r/styles/base-mira/content-2.json
index ae71c7e37..14af2df66 100644
--- a/public/r/styles/base-mira/content-2.json
+++ b/public/r/styles/base-mira/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features?.length && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/content-3.json b/public/r/styles/base-mira/content-3.json
index 1fc69b356..6ae269ebc 100644
--- a/public/r/styles/base-mira/content-3.json
+++ b/public/r/styles/base-mira/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/content-4.json b/public/r/styles/base-mira/content-4.json
index def8f5ea3..09aa3dfbf 100644
--- a/public/r/styles/base-mira/content-4.json
+++ b/public/r/styles/base-mira/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features?.length && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons?.length && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features && features.length > 0 && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons && buttons.length > 0 && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/cta-1.json b/public/r/styles/base-mira/cta-1.json
index ba417864c..d4b30fd2d 100644
--- a/public/r/styles/base-mira/cta-1.json
+++ b/public/r/styles/base-mira/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/cta-2.json b/public/r/styles/base-mira/cta-2.json
index 783e24bb0..458de6318 100644
--- a/public/r/styles/base-mira/cta-2.json
+++ b/public/r/styles/base-mira/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/cta-3.json b/public/r/styles/base-mira/cta-3.json
index 44c7a351f..dba896177 100644
--- a/public/r/styles/base-mira/cta-3.json
+++ b/public/r/styles/base-mira/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/cta-4.json b/public/r/styles/base-mira/cta-4.json
index 91de3701c..244bfa2cd 100644
--- a/public/r/styles/base-mira/cta-4.json
+++ b/public/r/styles/base-mira/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/cta-5.json b/public/r/styles/base-mira/cta-5.json
index 5f0fb0cb8..9c655d7ac 100644
--- a/public/r/styles/base-mira/cta-5.json
+++ b/public/r/styles/base-mira/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features?.length && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/cta-6.json b/public/r/styles/base-mira/cta-6.json
index 4cf570ac1..8b4d735ee 100644
--- a/public/r/styles/base-mira/cta-6.json
+++ b/public/r/styles/base-mira/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/cta-7.json b/public/r/styles/base-mira/cta-7.json
index 013a1100f..961d6855d 100644
--- a/public/r/styles/base-mira/cta-7.json
+++ b/public/r/styles/base-mira/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/cta-8.json b/public/r/styles/base-mira/cta-8.json
index 2bc3031f2..4b2d77e41 100644
--- a/public/r/styles/base-mira/cta-8.json
+++ b/public/r/styles/base-mira/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/doc-1.json b/public/r/styles/base-mira/doc-1.json
index 8585d22dc..4806861e6 100644
--- a/public/r/styles/base-mira/doc-1.json
+++ b/public/r/styles/base-mira/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              {openLinks.map((link) => (\n                <DropdownMenuItem\n                  href={link.href}\n                  target=\"_blank\"\n                  rel=\"noreferrer noopener\"\n                >\n                  {link.icon === \"markdown\" && (\n                    <Markdown\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"chatgpt\" && (\n                    <svg\n                      role=\"img\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"currentColor\"\n                      class=\"size-4\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                    </svg>\n                  )}\n                  {link.icon === \"claude\" && (\n                    <Claude\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"cursor\" && (\n                    <Cursor\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  <span>{link.label}</span>\n                  <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll(\"[data-slot='typography'] > pre\")\n      .forEach((pre) => {\n        if (pre.closest(\".docs-code-block\")) return\n        const wrapper = document.createElement(\"div\")\n        const button = document.createElement(\"button\")\n        wrapper.className = \"docs-code-block\"\n        wrapper.dataset.notTypeset = \"\"\n        button.type = \"button\"\n        button.className = \"docs-code-copy\"\n        button.ariaLabel = \"Copy code\"\n        button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n        pre.before(wrapper)\n        wrapper.append(pre, button)\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[id^='docs-copy-page-'], .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\" data-doc-content>\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document.querySelectorAll(\"[data-doc-content] > pre\").forEach((pre) => {\n      if (pre.closest(\".docs-code-block\")) return\n      const wrapper = document.createElement(\"div\")\n      const button = document.createElement(\"button\")\n      wrapper.className = \"docs-code-block\"\n      wrapper.dataset.notTypeset = \"\"\n      button.type = \"button\"\n      button.className = \"docs-code-copy\"\n      button.ariaLabel = \"Copy code\"\n      button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n      pre.before(wrapper)\n      wrapper.append(pre, button)\n    })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/faqs-1.json b/public/r/styles/base-mira/faqs-1.json
index dd7bab930..e33726343 100644
--- a/public/r/styles/base-mira/faqs-1.json
+++ b/public/r/styles/base-mira/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/faqs-2.json b/public/r/styles/base-mira/faqs-2.json
index a76c98096..5d669bafe 100644
--- a/public/r/styles/base-mira/faqs-2.json
+++ b/public/r/styles/base-mira/faqs-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons?.length && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/features-1.json b/public/r/styles/base-mira/features-1.json
index fae8c3764..e4cd92254 100644
--- a/public/r/styles/base-mira/features-1.json
+++ b/public/r/styles/base-mira/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/features-2.json b/public/r/styles/base-mira/features-2.json
index c2cf45f9c..51c9a088e 100644
--- a/public/r/styles/base-mira/features-2.json
+++ b/public/r/styles/base-mira/features-2.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/features-4.json b/public/r/styles/base-mira/features-4.json
index 6c3870911..6210bc332 100644
--- a/public/r/styles/base-mira/features-4.json
+++ b/public/r/styles/base-mira/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons?.length && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/features-5.json b/public/r/styles/base-mira/features-5.json
index 9bbc9affe..8575743db 100644
--- a/public/r/styles/base-mira/features-5.json
+++ b/public/r/styles/base-mira/features-5.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/features-6.json b/public/r/styles/base-mira/features-6.json
index 248bb4563..5e729533e 100644
--- a/public/r/styles/base-mira/features-6.json
+++ b/public/r/styles/base-mira/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons?.length && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/header-1.json b/public/r/styles/base-mira/header-1.json
index d4c11d61a..8baebe0f5 100644
--- a/public/r/styles/base-mira/header-1.json
+++ b/public/r/styles/base-mira/header-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/header-2.json b/public/r/styles/base-mira/header-2.json
index 30a7c4e17..a1039f8b2 100644
--- a/public/r/styles/base-mira/header-2.json
+++ b/public/r/styles/base-mira/header-2.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/header-3.json b/public/r/styles/base-mira/header-3.json
index 14a7fea9f..e511a92e7 100644
--- a/public/r/styles/base-mira/header-3.json
+++ b/public/r/styles/base-mira/header-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/header-4.json b/public/r/styles/base-mira/header-4.json
index 94e357029..3bd445ad1 100644
--- a/public/r/styles/base-mira/header-4.json
+++ b/public/r/styles/base-mira/header-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links?.length && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/header-5.json b/public/r/styles/base-mira/header-5.json
index e6cfc0b16..5f781e13c 100644
--- a/public/r/styles/base-mira/header-5.json
+++ b/public/r/styles/base-mira/header-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links?.length && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/links-2.json b/public/r/styles/base-mira/links-2.json
index 5980421f0..3d1b59a93 100644
--- a/public/r/styles/base-mira/links-2.json
+++ b/public/r/styles/base-mira/links-2.json
@@ -2,17 +2,12 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "links-2",
   "title": "Links 2",
-  "description": "Link carousel blocks for presenting related pages, components, or resources.",
+  "description": "Link grid blocks for presenting related pages, components, or resources.",
   "dependencies": [
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/accordion",
-    "@fulldev/button",
-    "@fulldev/card",
-    "@fulldev/carousel",
-    "@fulldev/section",
-    "@fulldev/tabs"
+    "@fulldev/section"
   ],
   "files": [
     {
diff --git a/public/r/styles/base-mira/registry.json b/public/r/styles/base-mira/registry.json
index 837118524..bc676ec63 100644
--- a/public/r/styles/base-mira/registry.json
+++ b/public/r/styles/base-mira/registry.json
@@ -3838,7 +3838,7 @@
       "name": "links-2",
       "type": "registry:block",
       "title": "Links 2",
-      "description": "Link carousel blocks for presenting related pages, components, or resources.",
+      "description": "Link grid blocks for presenting related pages, components, or resources.",
       "categories": [
         "links"
       ],
@@ -3847,12 +3847,7 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/accordion",
-        "@fulldev/button",
-        "@fulldev/card",
-        "@fulldev/carousel",
-        "@fulldev/section",
-        "@fulldev/tabs"
+        "@fulldev/section"
       ],
       "files": [
         {
@@ -4470,7 +4465,6 @@
         "@fulldev/header",
         "@fulldev/icon",
         "@fulldev/kbd",
-        "@fulldev/layout",
         "@fulldev/logo",
         "@fulldev/separator",
         "@fulldev/sidebar",
diff --git a/public/r/styles/base-mira/services-1.json b/public/r/styles/base-mira/services-1.json
index f934c1f9b..3fef88847 100644
--- a/public/r/styles/base-mira/services-1.json
+++ b/public/r/styles/base-mira/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/services-2.json b/public/r/styles/base-mira/services-2.json
index 36df53f2c..22252912d 100644
--- a/public/r/styles/base-mira/services-2.json
+++ b/public/r/styles/base-mira/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/services-3.json b/public/r/styles/base-mira/services-3.json
index c031f55bc..6f77bedb6 100644
--- a/public/r/styles/base-mira/services-3.json
+++ b/public/r/styles/base-mira/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/services-4.json b/public/r/styles/base-mira/services-4.json
index 8319c0db0..112b8fe30 100644
--- a/public/r/styles/base-mira/services-4.json
+++ b/public/r/styles/base-mira/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/services-5.json b/public/r/styles/base-mira/services-5.json
index b20aeb7ab..02476c58a 100644
--- a/public/r/styles/base-mira/services-5.json
+++ b/public/r/styles/base-mira/services-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/services-6.json b/public/r/styles/base-mira/services-6.json
index d20c3c556..76d0bd582 100644
--- a/public/r/styles/base-mira/services-6.json
+++ b/public/r/styles/base-mira/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/services-7.json b/public/r/styles/base-mira/services-7.json
index 9a22c4444..091def64d 100644
--- a/public/r/styles/base-mira/services-7.json
+++ b/public/r/styles/base-mira/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/sidebar-1.json b/public/r/styles/base-mira/sidebar-1.json
index c09ee6102..66f778967 100644
--- a/public/r/styles/base-mira/sidebar-1.json
+++ b/public/r/styles/base-mira/sidebar-1.json
@@ -14,7 +14,6 @@
     "@fulldev/header",
     "@fulldev/icon",
     "@fulldev/kbd",
-    "@fulldev/layout",
     "@fulldev/logo",
     "@fulldev/separator",
     "@fulldev/sidebar",
@@ -23,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n}: Props = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nlet githubStars = \"Stars\"\n\ntry {\n  const response = await fetch(`https://api.github.com/repos/${githubRepo}`)\n  const data = await response.json()\n\n  if (response.ok && typeof data.stargazers_count === \"number\") {\n    githubStars = new Intl.NumberFormat().format(data.stargazers_count)\n  }\n} catch {\n  // Keep the fallback label when GitHub is unavailable.\n}\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStars}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? \"Stars\"\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/banner-2.json b/public/r/styles/base-nova/banner-2.json
index 6e48f54fe..6ea880320 100644
--- a/public/r/styles/base-nova/banner-2.json
+++ b/public/r/styles/base-nova/banner-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/blocks-1.json b/public/r/styles/base-nova/blocks-1.json
index 7c342e844..5f875b246 100644
--- a/public/r/styles/base-nova/blocks-1.json
+++ b/public/r/styles/base-nova/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              {openLinks.map((link) => (\n                <DropdownMenuItem\n                  href={link.href}\n                  target=\"_blank\"\n                  rel=\"noreferrer noopener\"\n                >\n                  {link.icon === \"markdown\" && (\n                    <Markdown\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"chatgpt\" && (\n                    <svg\n                      role=\"img\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"currentColor\"\n                      class=\"size-4\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                    </svg>\n                  )}\n                  {link.icon === \"claude\" && (\n                    <Claude\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"cursor\" && (\n                    <Cursor\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  <span>{link.label}</span>\n                  <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/contact-1.json b/public/r/styles/base-nova/contact-1.json
index 5108a5643..9af391672 100644
--- a/public/r/styles/base-nova/contact-1.json
+++ b/public/r/styles/base-nova/contact-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/contact-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n              />\n              <FieldDescription>{form.messageDescription}</FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n                aria-describedby={`${formId}-message-description`}\n              />\n              <FieldDescription id={`${formId}-message-description`}>\n                {form.messageDescription}\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/content-1.json b/public/r/styles/base-nova/content-1.json
index e15f48b21..9bd4e3cc6 100644
--- a/public/r/styles/base-nova/content-1.json
+++ b/public/r/styles/base-nova/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features?.length && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons?.length && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features && features.length > 0 && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/content-2.json b/public/r/styles/base-nova/content-2.json
index ae71c7e37..14af2df66 100644
--- a/public/r/styles/base-nova/content-2.json
+++ b/public/r/styles/base-nova/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features?.length && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/content-3.json b/public/r/styles/base-nova/content-3.json
index 1fc69b356..6ae269ebc 100644
--- a/public/r/styles/base-nova/content-3.json
+++ b/public/r/styles/base-nova/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/content-4.json b/public/r/styles/base-nova/content-4.json
index def8f5ea3..09aa3dfbf 100644
--- a/public/r/styles/base-nova/content-4.json
+++ b/public/r/styles/base-nova/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features?.length && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons?.length && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features && features.length > 0 && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons && buttons.length > 0 && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/cta-1.json b/public/r/styles/base-nova/cta-1.json
index ba417864c..d4b30fd2d 100644
--- a/public/r/styles/base-nova/cta-1.json
+++ b/public/r/styles/base-nova/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/cta-2.json b/public/r/styles/base-nova/cta-2.json
index 783e24bb0..458de6318 100644
--- a/public/r/styles/base-nova/cta-2.json
+++ b/public/r/styles/base-nova/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/cta-3.json b/public/r/styles/base-nova/cta-3.json
index 44c7a351f..dba896177 100644
--- a/public/r/styles/base-nova/cta-3.json
+++ b/public/r/styles/base-nova/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/cta-4.json b/public/r/styles/base-nova/cta-4.json
index 91de3701c..244bfa2cd 100644
--- a/public/r/styles/base-nova/cta-4.json
+++ b/public/r/styles/base-nova/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/cta-5.json b/public/r/styles/base-nova/cta-5.json
index 5f0fb0cb8..9c655d7ac 100644
--- a/public/r/styles/base-nova/cta-5.json
+++ b/public/r/styles/base-nova/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features?.length && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/cta-6.json b/public/r/styles/base-nova/cta-6.json
index 4cf570ac1..8b4d735ee 100644
--- a/public/r/styles/base-nova/cta-6.json
+++ b/public/r/styles/base-nova/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/cta-7.json b/public/r/styles/base-nova/cta-7.json
index 013a1100f..961d6855d 100644
--- a/public/r/styles/base-nova/cta-7.json
+++ b/public/r/styles/base-nova/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/cta-8.json b/public/r/styles/base-nova/cta-8.json
index 2bc3031f2..4b2d77e41 100644
--- a/public/r/styles/base-nova/cta-8.json
+++ b/public/r/styles/base-nova/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/doc-1.json b/public/r/styles/base-nova/doc-1.json
index 8585d22dc..4806861e6 100644
--- a/public/r/styles/base-nova/doc-1.json
+++ b/public/r/styles/base-nova/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              {openLinks.map((link) => (\n                <DropdownMenuItem\n                  href={link.href}\n                  target=\"_blank\"\n                  rel=\"noreferrer noopener\"\n                >\n                  {link.icon === \"markdown\" && (\n                    <Markdown\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"chatgpt\" && (\n                    <svg\n                      role=\"img\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"currentColor\"\n                      class=\"size-4\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                    </svg>\n                  )}\n                  {link.icon === \"claude\" && (\n                    <Claude\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"cursor\" && (\n                    <Cursor\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  <span>{link.label}</span>\n                  <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll(\"[data-slot='typography'] > pre\")\n      .forEach((pre) => {\n        if (pre.closest(\".docs-code-block\")) return\n        const wrapper = document.createElement(\"div\")\n        const button = document.createElement(\"button\")\n        wrapper.className = \"docs-code-block\"\n        wrapper.dataset.notTypeset = \"\"\n        button.type = \"button\"\n        button.className = \"docs-code-copy\"\n        button.ariaLabel = \"Copy code\"\n        button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n        pre.before(wrapper)\n        wrapper.append(pre, button)\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[id^='docs-copy-page-'], .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\" data-doc-content>\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document.querySelectorAll(\"[data-doc-content] > pre\").forEach((pre) => {\n      if (pre.closest(\".docs-code-block\")) return\n      const wrapper = document.createElement(\"div\")\n      const button = document.createElement(\"button\")\n      wrapper.className = \"docs-code-block\"\n      wrapper.dataset.notTypeset = \"\"\n      button.type = \"button\"\n      button.className = \"docs-code-copy\"\n      button.ariaLabel = \"Copy code\"\n      button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n      pre.before(wrapper)\n      wrapper.append(pre, button)\n    })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/faqs-1.json b/public/r/styles/base-nova/faqs-1.json
index dd7bab930..e33726343 100644
--- a/public/r/styles/base-nova/faqs-1.json
+++ b/public/r/styles/base-nova/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/faqs-2.json b/public/r/styles/base-nova/faqs-2.json
index a76c98096..5d669bafe 100644
--- a/public/r/styles/base-nova/faqs-2.json
+++ b/public/r/styles/base-nova/faqs-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons?.length && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/features-1.json b/public/r/styles/base-nova/features-1.json
index fae8c3764..e4cd92254 100644
--- a/public/r/styles/base-nova/features-1.json
+++ b/public/r/styles/base-nova/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/features-2.json b/public/r/styles/base-nova/features-2.json
index c2cf45f9c..51c9a088e 100644
--- a/public/r/styles/base-nova/features-2.json
+++ b/public/r/styles/base-nova/features-2.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/features-4.json b/public/r/styles/base-nova/features-4.json
index 6c3870911..6210bc332 100644
--- a/public/r/styles/base-nova/features-4.json
+++ b/public/r/styles/base-nova/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons?.length && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/features-5.json b/public/r/styles/base-nova/features-5.json
index 9bbc9affe..8575743db 100644
--- a/public/r/styles/base-nova/features-5.json
+++ b/public/r/styles/base-nova/features-5.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/features-6.json b/public/r/styles/base-nova/features-6.json
index 248bb4563..5e729533e 100644
--- a/public/r/styles/base-nova/features-6.json
+++ b/public/r/styles/base-nova/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons?.length && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/header-1.json b/public/r/styles/base-nova/header-1.json
index d4c11d61a..8baebe0f5 100644
--- a/public/r/styles/base-nova/header-1.json
+++ b/public/r/styles/base-nova/header-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/header-2.json b/public/r/styles/base-nova/header-2.json
index 30a7c4e17..a1039f8b2 100644
--- a/public/r/styles/base-nova/header-2.json
+++ b/public/r/styles/base-nova/header-2.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/header-3.json b/public/r/styles/base-nova/header-3.json
index 14a7fea9f..e511a92e7 100644
--- a/public/r/styles/base-nova/header-3.json
+++ b/public/r/styles/base-nova/header-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/header-4.json b/public/r/styles/base-nova/header-4.json
index 94e357029..3bd445ad1 100644
--- a/public/r/styles/base-nova/header-4.json
+++ b/public/r/styles/base-nova/header-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links?.length && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/header-5.json b/public/r/styles/base-nova/header-5.json
index e6cfc0b16..5f781e13c 100644
--- a/public/r/styles/base-nova/header-5.json
+++ b/public/r/styles/base-nova/header-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links?.length && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/links-2.json b/public/r/styles/base-nova/links-2.json
index 5980421f0..3d1b59a93 100644
--- a/public/r/styles/base-nova/links-2.json
+++ b/public/r/styles/base-nova/links-2.json
@@ -2,17 +2,12 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "links-2",
   "title": "Links 2",
-  "description": "Link carousel blocks for presenting related pages, components, or resources.",
+  "description": "Link grid blocks for presenting related pages, components, or resources.",
   "dependencies": [
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/accordion",
-    "@fulldev/button",
-    "@fulldev/card",
-    "@fulldev/carousel",
-    "@fulldev/section",
-    "@fulldev/tabs"
+    "@fulldev/section"
   ],
   "files": [
     {
diff --git a/public/r/styles/base-nova/registry.json b/public/r/styles/base-nova/registry.json
index 76c5aa49b..18971b7ed 100644
--- a/public/r/styles/base-nova/registry.json
+++ b/public/r/styles/base-nova/registry.json
@@ -3838,7 +3838,7 @@
       "name": "links-2",
       "type": "registry:block",
       "title": "Links 2",
-      "description": "Link carousel blocks for presenting related pages, components, or resources.",
+      "description": "Link grid blocks for presenting related pages, components, or resources.",
       "categories": [
         "links"
       ],
@@ -3847,12 +3847,7 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/accordion",
-        "@fulldev/button",
-        "@fulldev/card",
-        "@fulldev/carousel",
-        "@fulldev/section",
-        "@fulldev/tabs"
+        "@fulldev/section"
       ],
       "files": [
         {
@@ -4470,7 +4465,6 @@
         "@fulldev/header",
         "@fulldev/icon",
         "@fulldev/kbd",
-        "@fulldev/layout",
         "@fulldev/logo",
         "@fulldev/separator",
         "@fulldev/sidebar",
diff --git a/public/r/styles/base-nova/services-1.json b/public/r/styles/base-nova/services-1.json
index f934c1f9b..3fef88847 100644
--- a/public/r/styles/base-nova/services-1.json
+++ b/public/r/styles/base-nova/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/services-2.json b/public/r/styles/base-nova/services-2.json
index 36df53f2c..22252912d 100644
--- a/public/r/styles/base-nova/services-2.json
+++ b/public/r/styles/base-nova/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/services-3.json b/public/r/styles/base-nova/services-3.json
index c031f55bc..6f77bedb6 100644
--- a/public/r/styles/base-nova/services-3.json
+++ b/public/r/styles/base-nova/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/services-4.json b/public/r/styles/base-nova/services-4.json
index 8319c0db0..112b8fe30 100644
--- a/public/r/styles/base-nova/services-4.json
+++ b/public/r/styles/base-nova/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/services-5.json b/public/r/styles/base-nova/services-5.json
index b20aeb7ab..02476c58a 100644
--- a/public/r/styles/base-nova/services-5.json
+++ b/public/r/styles/base-nova/services-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/services-6.json b/public/r/styles/base-nova/services-6.json
index d20c3c556..76d0bd582 100644
--- a/public/r/styles/base-nova/services-6.json
+++ b/public/r/styles/base-nova/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/services-7.json b/public/r/styles/base-nova/services-7.json
index 9a22c4444..091def64d 100644
--- a/public/r/styles/base-nova/services-7.json
+++ b/public/r/styles/base-nova/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/sidebar-1.json b/public/r/styles/base-nova/sidebar-1.json
index c09ee6102..66f778967 100644
--- a/public/r/styles/base-nova/sidebar-1.json
+++ b/public/r/styles/base-nova/sidebar-1.json
@@ -14,7 +14,6 @@
     "@fulldev/header",
     "@fulldev/icon",
     "@fulldev/kbd",
-    "@fulldev/layout",
     "@fulldev/logo",
     "@fulldev/separator",
     "@fulldev/sidebar",
@@ -23,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n}: Props = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nlet githubStars = \"Stars\"\n\ntry {\n  const response = await fetch(`https://api.github.com/repos/${githubRepo}`)\n  const data = await response.json()\n\n  if (response.ok && typeof data.stargazers_count === \"number\") {\n    githubStars = new Intl.NumberFormat().format(data.stargazers_count)\n  }\n} catch {\n  // Keep the fallback label when GitHub is unavailable.\n}\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStars}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? \"Stars\"\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/banner-2.json b/public/r/styles/base-rhea/banner-2.json
index 6e48f54fe..6ea880320 100644
--- a/public/r/styles/base-rhea/banner-2.json
+++ b/public/r/styles/base-rhea/banner-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/blocks-1.json b/public/r/styles/base-rhea/blocks-1.json
index 7c342e844..5f875b246 100644
--- a/public/r/styles/base-rhea/blocks-1.json
+++ b/public/r/styles/base-rhea/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              {openLinks.map((link) => (\n                <DropdownMenuItem\n                  href={link.href}\n                  target=\"_blank\"\n                  rel=\"noreferrer noopener\"\n                >\n                  {link.icon === \"markdown\" && (\n                    <Markdown\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"chatgpt\" && (\n                    <svg\n                      role=\"img\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"currentColor\"\n                      class=\"size-4\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                    </svg>\n                  )}\n                  {link.icon === \"claude\" && (\n                    <Claude\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"cursor\" && (\n                    <Cursor\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  <span>{link.label}</span>\n                  <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/contact-1.json b/public/r/styles/base-rhea/contact-1.json
index 5108a5643..9af391672 100644
--- a/public/r/styles/base-rhea/contact-1.json
+++ b/public/r/styles/base-rhea/contact-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/contact-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n              />\n              <FieldDescription>{form.messageDescription}</FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n                aria-describedby={`${formId}-message-description`}\n              />\n              <FieldDescription id={`${formId}-message-description`}>\n                {form.messageDescription}\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/content-1.json b/public/r/styles/base-rhea/content-1.json
index e15f48b21..9bd4e3cc6 100644
--- a/public/r/styles/base-rhea/content-1.json
+++ b/public/r/styles/base-rhea/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features?.length && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons?.length && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features && features.length > 0 && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/content-2.json b/public/r/styles/base-rhea/content-2.json
index ae71c7e37..14af2df66 100644
--- a/public/r/styles/base-rhea/content-2.json
+++ b/public/r/styles/base-rhea/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features?.length && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/content-3.json b/public/r/styles/base-rhea/content-3.json
index 1fc69b356..6ae269ebc 100644
--- a/public/r/styles/base-rhea/content-3.json
+++ b/public/r/styles/base-rhea/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/content-4.json b/public/r/styles/base-rhea/content-4.json
index def8f5ea3..09aa3dfbf 100644
--- a/public/r/styles/base-rhea/content-4.json
+++ b/public/r/styles/base-rhea/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features?.length && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons?.length && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features && features.length > 0 && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons && buttons.length > 0 && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/cta-1.json b/public/r/styles/base-rhea/cta-1.json
index ba417864c..d4b30fd2d 100644
--- a/public/r/styles/base-rhea/cta-1.json
+++ b/public/r/styles/base-rhea/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/cta-2.json b/public/r/styles/base-rhea/cta-2.json
index 783e24bb0..458de6318 100644
--- a/public/r/styles/base-rhea/cta-2.json
+++ b/public/r/styles/base-rhea/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/cta-3.json b/public/r/styles/base-rhea/cta-3.json
index 44c7a351f..dba896177 100644
--- a/public/r/styles/base-rhea/cta-3.json
+++ b/public/r/styles/base-rhea/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/cta-4.json b/public/r/styles/base-rhea/cta-4.json
index 91de3701c..244bfa2cd 100644
--- a/public/r/styles/base-rhea/cta-4.json
+++ b/public/r/styles/base-rhea/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/cta-5.json b/public/r/styles/base-rhea/cta-5.json
index 5f0fb0cb8..9c655d7ac 100644
--- a/public/r/styles/base-rhea/cta-5.json
+++ b/public/r/styles/base-rhea/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features?.length && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/cta-6.json b/public/r/styles/base-rhea/cta-6.json
index 4cf570ac1..8b4d735ee 100644
--- a/public/r/styles/base-rhea/cta-6.json
+++ b/public/r/styles/base-rhea/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/cta-7.json b/public/r/styles/base-rhea/cta-7.json
index 013a1100f..961d6855d 100644
--- a/public/r/styles/base-rhea/cta-7.json
+++ b/public/r/styles/base-rhea/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/cta-8.json b/public/r/styles/base-rhea/cta-8.json
index 2bc3031f2..4b2d77e41 100644
--- a/public/r/styles/base-rhea/cta-8.json
+++ b/public/r/styles/base-rhea/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/doc-1.json b/public/r/styles/base-rhea/doc-1.json
index 8585d22dc..4806861e6 100644
--- a/public/r/styles/base-rhea/doc-1.json
+++ b/public/r/styles/base-rhea/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              {openLinks.map((link) => (\n                <DropdownMenuItem\n                  href={link.href}\n                  target=\"_blank\"\n                  rel=\"noreferrer noopener\"\n                >\n                  {link.icon === \"markdown\" && (\n                    <Markdown\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"chatgpt\" && (\n                    <svg\n                      role=\"img\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"currentColor\"\n                      class=\"size-4\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                    </svg>\n                  )}\n                  {link.icon === \"claude\" && (\n                    <Claude\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"cursor\" && (\n                    <Cursor\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  <span>{link.label}</span>\n                  <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll(\"[data-slot='typography'] > pre\")\n      .forEach((pre) => {\n        if (pre.closest(\".docs-code-block\")) return\n        const wrapper = document.createElement(\"div\")\n        const button = document.createElement(\"button\")\n        wrapper.className = \"docs-code-block\"\n        wrapper.dataset.notTypeset = \"\"\n        button.type = \"button\"\n        button.className = \"docs-code-copy\"\n        button.ariaLabel = \"Copy code\"\n        button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n        pre.before(wrapper)\n        wrapper.append(pre, button)\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[id^='docs-copy-page-'], .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\" data-doc-content>\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document.querySelectorAll(\"[data-doc-content] > pre\").forEach((pre) => {\n      if (pre.closest(\".docs-code-block\")) return\n      const wrapper = document.createElement(\"div\")\n      const button = document.createElement(\"button\")\n      wrapper.className = \"docs-code-block\"\n      wrapper.dataset.notTypeset = \"\"\n      button.type = \"button\"\n      button.className = \"docs-code-copy\"\n      button.ariaLabel = \"Copy code\"\n      button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n      pre.before(wrapper)\n      wrapper.append(pre, button)\n    })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/faqs-1.json b/public/r/styles/base-rhea/faqs-1.json
index dd7bab930..e33726343 100644
--- a/public/r/styles/base-rhea/faqs-1.json
+++ b/public/r/styles/base-rhea/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/faqs-2.json b/public/r/styles/base-rhea/faqs-2.json
index a76c98096..5d669bafe 100644
--- a/public/r/styles/base-rhea/faqs-2.json
+++ b/public/r/styles/base-rhea/faqs-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons?.length && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/features-1.json b/public/r/styles/base-rhea/features-1.json
index fae8c3764..e4cd92254 100644
--- a/public/r/styles/base-rhea/features-1.json
+++ b/public/r/styles/base-rhea/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/features-2.json b/public/r/styles/base-rhea/features-2.json
index c2cf45f9c..51c9a088e 100644
--- a/public/r/styles/base-rhea/features-2.json
+++ b/public/r/styles/base-rhea/features-2.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/features-4.json b/public/r/styles/base-rhea/features-4.json
index 6c3870911..6210bc332 100644
--- a/public/r/styles/base-rhea/features-4.json
+++ b/public/r/styles/base-rhea/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons?.length && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/features-5.json b/public/r/styles/base-rhea/features-5.json
index 9bbc9affe..8575743db 100644
--- a/public/r/styles/base-rhea/features-5.json
+++ b/public/r/styles/base-rhea/features-5.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/features-6.json b/public/r/styles/base-rhea/features-6.json
index 248bb4563..5e729533e 100644
--- a/public/r/styles/base-rhea/features-6.json
+++ b/public/r/styles/base-rhea/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons?.length && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/header-1.json b/public/r/styles/base-rhea/header-1.json
index d4c11d61a..8baebe0f5 100644
--- a/public/r/styles/base-rhea/header-1.json
+++ b/public/r/styles/base-rhea/header-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/header-2.json b/public/r/styles/base-rhea/header-2.json
index 30a7c4e17..a1039f8b2 100644
--- a/public/r/styles/base-rhea/header-2.json
+++ b/public/r/styles/base-rhea/header-2.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/header-3.json b/public/r/styles/base-rhea/header-3.json
index 14a7fea9f..e511a92e7 100644
--- a/public/r/styles/base-rhea/header-3.json
+++ b/public/r/styles/base-rhea/header-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/header-4.json b/public/r/styles/base-rhea/header-4.json
index 94e357029..3bd445ad1 100644
--- a/public/r/styles/base-rhea/header-4.json
+++ b/public/r/styles/base-rhea/header-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links?.length && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/header-5.json b/public/r/styles/base-rhea/header-5.json
index e6cfc0b16..5f781e13c 100644
--- a/public/r/styles/base-rhea/header-5.json
+++ b/public/r/styles/base-rhea/header-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links?.length && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/links-2.json b/public/r/styles/base-rhea/links-2.json
index 5980421f0..3d1b59a93 100644
--- a/public/r/styles/base-rhea/links-2.json
+++ b/public/r/styles/base-rhea/links-2.json
@@ -2,17 +2,12 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "links-2",
   "title": "Links 2",
-  "description": "Link carousel blocks for presenting related pages, components, or resources.",
+  "description": "Link grid blocks for presenting related pages, components, or resources.",
   "dependencies": [
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/accordion",
-    "@fulldev/button",
-    "@fulldev/card",
-    "@fulldev/carousel",
-    "@fulldev/section",
-    "@fulldev/tabs"
+    "@fulldev/section"
   ],
   "files": [
     {
diff --git a/public/r/styles/base-rhea/registry.json b/public/r/styles/base-rhea/registry.json
index f4f1328df..9906c3899 100644
--- a/public/r/styles/base-rhea/registry.json
+++ b/public/r/styles/base-rhea/registry.json
@@ -3838,7 +3838,7 @@
       "name": "links-2",
       "type": "registry:block",
       "title": "Links 2",
-      "description": "Link carousel blocks for presenting related pages, components, or resources.",
+      "description": "Link grid blocks for presenting related pages, components, or resources.",
       "categories": [
         "links"
       ],
@@ -3847,12 +3847,7 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/accordion",
-        "@fulldev/button",
-        "@fulldev/card",
-        "@fulldev/carousel",
-        "@fulldev/section",
-        "@fulldev/tabs"
+        "@fulldev/section"
       ],
       "files": [
         {
@@ -4470,7 +4465,6 @@
         "@fulldev/header",
         "@fulldev/icon",
         "@fulldev/kbd",
-        "@fulldev/layout",
         "@fulldev/logo",
         "@fulldev/separator",
         "@fulldev/sidebar",
diff --git a/public/r/styles/base-rhea/services-1.json b/public/r/styles/base-rhea/services-1.json
index f934c1f9b..3fef88847 100644
--- a/public/r/styles/base-rhea/services-1.json
+++ b/public/r/styles/base-rhea/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/services-2.json b/public/r/styles/base-rhea/services-2.json
index 36df53f2c..22252912d 100644
--- a/public/r/styles/base-rhea/services-2.json
+++ b/public/r/styles/base-rhea/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/services-3.json b/public/r/styles/base-rhea/services-3.json
index c031f55bc..6f77bedb6 100644
--- a/public/r/styles/base-rhea/services-3.json
+++ b/public/r/styles/base-rhea/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/services-4.json b/public/r/styles/base-rhea/services-4.json
index 8319c0db0..112b8fe30 100644
--- a/public/r/styles/base-rhea/services-4.json
+++ b/public/r/styles/base-rhea/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/services-5.json b/public/r/styles/base-rhea/services-5.json
index b20aeb7ab..02476c58a 100644
--- a/public/r/styles/base-rhea/services-5.json
+++ b/public/r/styles/base-rhea/services-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/services-6.json b/public/r/styles/base-rhea/services-6.json
index d20c3c556..76d0bd582 100644
--- a/public/r/styles/base-rhea/services-6.json
+++ b/public/r/styles/base-rhea/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/services-7.json b/public/r/styles/base-rhea/services-7.json
index 9a22c4444..091def64d 100644
--- a/public/r/styles/base-rhea/services-7.json
+++ b/public/r/styles/base-rhea/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/sidebar-1.json b/public/r/styles/base-rhea/sidebar-1.json
index c09ee6102..66f778967 100644
--- a/public/r/styles/base-rhea/sidebar-1.json
+++ b/public/r/styles/base-rhea/sidebar-1.json
@@ -14,7 +14,6 @@
     "@fulldev/header",
     "@fulldev/icon",
     "@fulldev/kbd",
-    "@fulldev/layout",
     "@fulldev/logo",
     "@fulldev/separator",
     "@fulldev/sidebar",
@@ -23,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n}: Props = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nlet githubStars = \"Stars\"\n\ntry {\n  const response = await fetch(`https://api.github.com/repos/${githubRepo}`)\n  const data = await response.json()\n\n  if (response.ok && typeof data.stargazers_count === \"number\") {\n    githubStars = new Intl.NumberFormat().format(data.stargazers_count)\n  }\n} catch {\n  // Keep the fallback label when GitHub is unavailable.\n}\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStars}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? \"Stars\"\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/banner-2.json b/public/r/styles/base-sera/banner-2.json
index 6e48f54fe..6ea880320 100644
--- a/public/r/styles/base-sera/banner-2.json
+++ b/public/r/styles/base-sera/banner-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/blocks-1.json b/public/r/styles/base-sera/blocks-1.json
index 7c342e844..5f875b246 100644
--- a/public/r/styles/base-sera/blocks-1.json
+++ b/public/r/styles/base-sera/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              {openLinks.map((link) => (\n                <DropdownMenuItem\n                  href={link.href}\n                  target=\"_blank\"\n                  rel=\"noreferrer noopener\"\n                >\n                  {link.icon === \"markdown\" && (\n                    <Markdown\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"chatgpt\" && (\n                    <svg\n                      role=\"img\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"currentColor\"\n                      class=\"size-4\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                    </svg>\n                  )}\n                  {link.icon === \"claude\" && (\n                    <Claude\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"cursor\" && (\n                    <Cursor\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  <span>{link.label}</span>\n                  <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/contact-1.json b/public/r/styles/base-sera/contact-1.json
index 5108a5643..9af391672 100644
--- a/public/r/styles/base-sera/contact-1.json
+++ b/public/r/styles/base-sera/contact-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/contact-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n              />\n              <FieldDescription>{form.messageDescription}</FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n                aria-describedby={`${formId}-message-description`}\n              />\n              <FieldDescription id={`${formId}-message-description`}>\n                {form.messageDescription}\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/content-1.json b/public/r/styles/base-sera/content-1.json
index e15f48b21..9bd4e3cc6 100644
--- a/public/r/styles/base-sera/content-1.json
+++ b/public/r/styles/base-sera/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features?.length && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons?.length && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features && features.length > 0 && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/content-2.json b/public/r/styles/base-sera/content-2.json
index ae71c7e37..14af2df66 100644
--- a/public/r/styles/base-sera/content-2.json
+++ b/public/r/styles/base-sera/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features?.length && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/content-3.json b/public/r/styles/base-sera/content-3.json
index 1fc69b356..6ae269ebc 100644
--- a/public/r/styles/base-sera/content-3.json
+++ b/public/r/styles/base-sera/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/content-4.json b/public/r/styles/base-sera/content-4.json
index def8f5ea3..09aa3dfbf 100644
--- a/public/r/styles/base-sera/content-4.json
+++ b/public/r/styles/base-sera/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features?.length && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons?.length && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features && features.length > 0 && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons && buttons.length > 0 && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/cta-1.json b/public/r/styles/base-sera/cta-1.json
index ba417864c..d4b30fd2d 100644
--- a/public/r/styles/base-sera/cta-1.json
+++ b/public/r/styles/base-sera/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/cta-2.json b/public/r/styles/base-sera/cta-2.json
index 783e24bb0..458de6318 100644
--- a/public/r/styles/base-sera/cta-2.json
+++ b/public/r/styles/base-sera/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/cta-3.json b/public/r/styles/base-sera/cta-3.json
index 44c7a351f..dba896177 100644
--- a/public/r/styles/base-sera/cta-3.json
+++ b/public/r/styles/base-sera/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/cta-4.json b/public/r/styles/base-sera/cta-4.json
index 91de3701c..244bfa2cd 100644
--- a/public/r/styles/base-sera/cta-4.json
+++ b/public/r/styles/base-sera/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/cta-5.json b/public/r/styles/base-sera/cta-5.json
index 5f0fb0cb8..9c655d7ac 100644
--- a/public/r/styles/base-sera/cta-5.json
+++ b/public/r/styles/base-sera/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features?.length && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/cta-6.json b/public/r/styles/base-sera/cta-6.json
index 4cf570ac1..8b4d735ee 100644
--- a/public/r/styles/base-sera/cta-6.json
+++ b/public/r/styles/base-sera/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/cta-7.json b/public/r/styles/base-sera/cta-7.json
index 013a1100f..961d6855d 100644
--- a/public/r/styles/base-sera/cta-7.json
+++ b/public/r/styles/base-sera/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/cta-8.json b/public/r/styles/base-sera/cta-8.json
index 2bc3031f2..4b2d77e41 100644
--- a/public/r/styles/base-sera/cta-8.json
+++ b/public/r/styles/base-sera/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/doc-1.json b/public/r/styles/base-sera/doc-1.json
index 8585d22dc..4806861e6 100644
--- a/public/r/styles/base-sera/doc-1.json
+++ b/public/r/styles/base-sera/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              {openLinks.map((link) => (\n                <DropdownMenuItem\n                  href={link.href}\n                  target=\"_blank\"\n                  rel=\"noreferrer noopener\"\n                >\n                  {link.icon === \"markdown\" && (\n                    <Markdown\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"chatgpt\" && (\n                    <svg\n                      role=\"img\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"currentColor\"\n                      class=\"size-4\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                    </svg>\n                  )}\n                  {link.icon === \"claude\" && (\n                    <Claude\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"cursor\" && (\n                    <Cursor\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  <span>{link.label}</span>\n                  <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll(\"[data-slot='typography'] > pre\")\n      .forEach((pre) => {\n        if (pre.closest(\".docs-code-block\")) return\n        const wrapper = document.createElement(\"div\")\n        const button = document.createElement(\"button\")\n        wrapper.className = \"docs-code-block\"\n        wrapper.dataset.notTypeset = \"\"\n        button.type = \"button\"\n        button.className = \"docs-code-copy\"\n        button.ariaLabel = \"Copy code\"\n        button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n        pre.before(wrapper)\n        wrapper.append(pre, button)\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[id^='docs-copy-page-'], .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\" data-doc-content>\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document.querySelectorAll(\"[data-doc-content] > pre\").forEach((pre) => {\n      if (pre.closest(\".docs-code-block\")) return\n      const wrapper = document.createElement(\"div\")\n      const button = document.createElement(\"button\")\n      wrapper.className = \"docs-code-block\"\n      wrapper.dataset.notTypeset = \"\"\n      button.type = \"button\"\n      button.className = \"docs-code-copy\"\n      button.ariaLabel = \"Copy code\"\n      button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n      pre.before(wrapper)\n      wrapper.append(pre, button)\n    })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/faqs-1.json b/public/r/styles/base-sera/faqs-1.json
index dd7bab930..e33726343 100644
--- a/public/r/styles/base-sera/faqs-1.json
+++ b/public/r/styles/base-sera/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/faqs-2.json b/public/r/styles/base-sera/faqs-2.json
index a76c98096..5d669bafe 100644
--- a/public/r/styles/base-sera/faqs-2.json
+++ b/public/r/styles/base-sera/faqs-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons?.length && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/features-1.json b/public/r/styles/base-sera/features-1.json
index fae8c3764..e4cd92254 100644
--- a/public/r/styles/base-sera/features-1.json
+++ b/public/r/styles/base-sera/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/features-2.json b/public/r/styles/base-sera/features-2.json
index c2cf45f9c..51c9a088e 100644
--- a/public/r/styles/base-sera/features-2.json
+++ b/public/r/styles/base-sera/features-2.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/features-4.json b/public/r/styles/base-sera/features-4.json
index 6c3870911..6210bc332 100644
--- a/public/r/styles/base-sera/features-4.json
+++ b/public/r/styles/base-sera/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons?.length && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/features-5.json b/public/r/styles/base-sera/features-5.json
index 9bbc9affe..8575743db 100644
--- a/public/r/styles/base-sera/features-5.json
+++ b/public/r/styles/base-sera/features-5.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/features-6.json b/public/r/styles/base-sera/features-6.json
index 248bb4563..5e729533e 100644
--- a/public/r/styles/base-sera/features-6.json
+++ b/public/r/styles/base-sera/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons?.length && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/header-1.json b/public/r/styles/base-sera/header-1.json
index d4c11d61a..8baebe0f5 100644
--- a/public/r/styles/base-sera/header-1.json
+++ b/public/r/styles/base-sera/header-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/header-2.json b/public/r/styles/base-sera/header-2.json
index 30a7c4e17..a1039f8b2 100644
--- a/public/r/styles/base-sera/header-2.json
+++ b/public/r/styles/base-sera/header-2.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/header-3.json b/public/r/styles/base-sera/header-3.json
index 14a7fea9f..e511a92e7 100644
--- a/public/r/styles/base-sera/header-3.json
+++ b/public/r/styles/base-sera/header-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/header-4.json b/public/r/styles/base-sera/header-4.json
index 94e357029..3bd445ad1 100644
--- a/public/r/styles/base-sera/header-4.json
+++ b/public/r/styles/base-sera/header-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links?.length && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/header-5.json b/public/r/styles/base-sera/header-5.json
index e6cfc0b16..5f781e13c 100644
--- a/public/r/styles/base-sera/header-5.json
+++ b/public/r/styles/base-sera/header-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links?.length && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/links-2.json b/public/r/styles/base-sera/links-2.json
index 5980421f0..3d1b59a93 100644
--- a/public/r/styles/base-sera/links-2.json
+++ b/public/r/styles/base-sera/links-2.json
@@ -2,17 +2,12 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "links-2",
   "title": "Links 2",
-  "description": "Link carousel blocks for presenting related pages, components, or resources.",
+  "description": "Link grid blocks for presenting related pages, components, or resources.",
   "dependencies": [
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/accordion",
-    "@fulldev/button",
-    "@fulldev/card",
-    "@fulldev/carousel",
-    "@fulldev/section",
-    "@fulldev/tabs"
+    "@fulldev/section"
   ],
   "files": [
     {
diff --git a/public/r/styles/base-sera/registry.json b/public/r/styles/base-sera/registry.json
index 1a1e5620b..781efe275 100644
--- a/public/r/styles/base-sera/registry.json
+++ b/public/r/styles/base-sera/registry.json
@@ -3838,7 +3838,7 @@
       "name": "links-2",
       "type": "registry:block",
       "title": "Links 2",
-      "description": "Link carousel blocks for presenting related pages, components, or resources.",
+      "description": "Link grid blocks for presenting related pages, components, or resources.",
       "categories": [
         "links"
       ],
@@ -3847,12 +3847,7 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/accordion",
-        "@fulldev/button",
-        "@fulldev/card",
-        "@fulldev/carousel",
-        "@fulldev/section",
-        "@fulldev/tabs"
+        "@fulldev/section"
       ],
       "files": [
         {
@@ -4470,7 +4465,6 @@
         "@fulldev/header",
         "@fulldev/icon",
         "@fulldev/kbd",
-        "@fulldev/layout",
         "@fulldev/logo",
         "@fulldev/separator",
         "@fulldev/sidebar",
diff --git a/public/r/styles/base-sera/services-1.json b/public/r/styles/base-sera/services-1.json
index f934c1f9b..3fef88847 100644
--- a/public/r/styles/base-sera/services-1.json
+++ b/public/r/styles/base-sera/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/services-2.json b/public/r/styles/base-sera/services-2.json
index 36df53f2c..22252912d 100644
--- a/public/r/styles/base-sera/services-2.json
+++ b/public/r/styles/base-sera/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/services-3.json b/public/r/styles/base-sera/services-3.json
index c031f55bc..6f77bedb6 100644
--- a/public/r/styles/base-sera/services-3.json
+++ b/public/r/styles/base-sera/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/services-4.json b/public/r/styles/base-sera/services-4.json
index 8319c0db0..112b8fe30 100644
--- a/public/r/styles/base-sera/services-4.json
+++ b/public/r/styles/base-sera/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/services-5.json b/public/r/styles/base-sera/services-5.json
index b20aeb7ab..02476c58a 100644
--- a/public/r/styles/base-sera/services-5.json
+++ b/public/r/styles/base-sera/services-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/services-6.json b/public/r/styles/base-sera/services-6.json
index d20c3c556..76d0bd582 100644
--- a/public/r/styles/base-sera/services-6.json
+++ b/public/r/styles/base-sera/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/services-7.json b/public/r/styles/base-sera/services-7.json
index 9a22c4444..091def64d 100644
--- a/public/r/styles/base-sera/services-7.json
+++ b/public/r/styles/base-sera/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/sidebar-1.json b/public/r/styles/base-sera/sidebar-1.json
index c09ee6102..66f778967 100644
--- a/public/r/styles/base-sera/sidebar-1.json
+++ b/public/r/styles/base-sera/sidebar-1.json
@@ -14,7 +14,6 @@
     "@fulldev/header",
     "@fulldev/icon",
     "@fulldev/kbd",
-    "@fulldev/layout",
     "@fulldev/logo",
     "@fulldev/separator",
     "@fulldev/sidebar",
@@ -23,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n}: Props = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nlet githubStars = \"Stars\"\n\ntry {\n  const response = await fetch(`https://api.github.com/repos/${githubRepo}`)\n  const data = await response.json()\n\n  if (response.ok && typeof data.stargazers_count === \"number\") {\n    githubStars = new Intl.NumberFormat().format(data.stargazers_count)\n  }\n} catch {\n  // Keep the fallback label when GitHub is unavailable.\n}\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStars}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? \"Stars\"\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/banner-2.json b/public/r/styles/base-vega/banner-2.json
index 6e48f54fe..6ea880320 100644
--- a/public/r/styles/base-vega/banner-2.json
+++ b/public/r/styles/base-vega/banner-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/blocks-1.json b/public/r/styles/base-vega/blocks-1.json
index 7c342e844..5f875b246 100644
--- a/public/r/styles/base-vega/blocks-1.json
+++ b/public/r/styles/base-vega/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              {openLinks.map((link) => (\n                <DropdownMenuItem\n                  href={link.href}\n                  target=\"_blank\"\n                  rel=\"noreferrer noopener\"\n                >\n                  {link.icon === \"markdown\" && (\n                    <Markdown\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"chatgpt\" && (\n                    <svg\n                      role=\"img\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"currentColor\"\n                      class=\"size-4\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                    </svg>\n                  )}\n                  {link.icon === \"claude\" && (\n                    <Claude\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"cursor\" && (\n                    <Cursor\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  <span>{link.label}</span>\n                  <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/contact-1.json b/public/r/styles/base-vega/contact-1.json
index 5108a5643..9af391672 100644
--- a/public/r/styles/base-vega/contact-1.json
+++ b/public/r/styles/base-vega/contact-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/contact-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n              />\n              <FieldDescription>{form.messageDescription}</FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n                aria-describedby={`${formId}-message-description`}\n              />\n              <FieldDescription id={`${formId}-message-description`}>\n                {form.messageDescription}\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/content-1.json b/public/r/styles/base-vega/content-1.json
index e15f48b21..9bd4e3cc6 100644
--- a/public/r/styles/base-vega/content-1.json
+++ b/public/r/styles/base-vega/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features?.length && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons?.length && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features && features.length > 0 && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/content-2.json b/public/r/styles/base-vega/content-2.json
index ae71c7e37..14af2df66 100644
--- a/public/r/styles/base-vega/content-2.json
+++ b/public/r/styles/base-vega/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features?.length && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/content-3.json b/public/r/styles/base-vega/content-3.json
index 1fc69b356..6ae269ebc 100644
--- a/public/r/styles/base-vega/content-3.json
+++ b/public/r/styles/base-vega/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/content-4.json b/public/r/styles/base-vega/content-4.json
index def8f5ea3..09aa3dfbf 100644
--- a/public/r/styles/base-vega/content-4.json
+++ b/public/r/styles/base-vega/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features?.length && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons?.length && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features && features.length > 0 && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons && buttons.length > 0 && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/cta-1.json b/public/r/styles/base-vega/cta-1.json
index ba417864c..d4b30fd2d 100644
--- a/public/r/styles/base-vega/cta-1.json
+++ b/public/r/styles/base-vega/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/cta-2.json b/public/r/styles/base-vega/cta-2.json
index 783e24bb0..458de6318 100644
--- a/public/r/styles/base-vega/cta-2.json
+++ b/public/r/styles/base-vega/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/cta-3.json b/public/r/styles/base-vega/cta-3.json
index 44c7a351f..dba896177 100644
--- a/public/r/styles/base-vega/cta-3.json
+++ b/public/r/styles/base-vega/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/cta-4.json b/public/r/styles/base-vega/cta-4.json
index 91de3701c..244bfa2cd 100644
--- a/public/r/styles/base-vega/cta-4.json
+++ b/public/r/styles/base-vega/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/cta-5.json b/public/r/styles/base-vega/cta-5.json
index 5f0fb0cb8..9c655d7ac 100644
--- a/public/r/styles/base-vega/cta-5.json
+++ b/public/r/styles/base-vega/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features?.length && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/cta-6.json b/public/r/styles/base-vega/cta-6.json
index 4cf570ac1..8b4d735ee 100644
--- a/public/r/styles/base-vega/cta-6.json
+++ b/public/r/styles/base-vega/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/cta-7.json b/public/r/styles/base-vega/cta-7.json
index 013a1100f..961d6855d 100644
--- a/public/r/styles/base-vega/cta-7.json
+++ b/public/r/styles/base-vega/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/cta-8.json b/public/r/styles/base-vega/cta-8.json
index 2bc3031f2..4b2d77e41 100644
--- a/public/r/styles/base-vega/cta-8.json
+++ b/public/r/styles/base-vega/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/doc-1.json b/public/r/styles/base-vega/doc-1.json
index 8585d22dc..4806861e6 100644
--- a/public/r/styles/base-vega/doc-1.json
+++ b/public/r/styles/base-vega/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              {openLinks.map((link) => (\n                <DropdownMenuItem\n                  href={link.href}\n                  target=\"_blank\"\n                  rel=\"noreferrer noopener\"\n                >\n                  {link.icon === \"markdown\" && (\n                    <Markdown\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"chatgpt\" && (\n                    <svg\n                      role=\"img\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"currentColor\"\n                      class=\"size-4\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                    </svg>\n                  )}\n                  {link.icon === \"claude\" && (\n                    <Claude\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {link.icon === \"cursor\" && (\n                    <Cursor\n                      class=\"size-4\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  <span>{link.label}</span>\n                  <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll(\"[data-slot='typography'] > pre\")\n      .forEach((pre) => {\n        if (pre.closest(\".docs-code-block\")) return\n        const wrapper = document.createElement(\"div\")\n        const button = document.createElement(\"button\")\n        wrapper.className = \"docs-code-block\"\n        wrapper.dataset.notTypeset = \"\"\n        button.type = \"button\"\n        button.className = \"docs-code-copy\"\n        button.ariaLabel = \"Copy code\"\n        button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n        pre.before(wrapper)\n        wrapper.append(pre, button)\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[id^='docs-copy-page-'], .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\" data-doc-content>\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document.querySelectorAll(\"[data-doc-content] > pre\").forEach((pre) => {\n      if (pre.closest(\".docs-code-block\")) return\n      const wrapper = document.createElement(\"div\")\n      const button = document.createElement(\"button\")\n      wrapper.className = \"docs-code-block\"\n      wrapper.dataset.notTypeset = \"\"\n      button.type = \"button\"\n      button.className = \"docs-code-copy\"\n      button.ariaLabel = \"Copy code\"\n      button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n      pre.before(wrapper)\n      wrapper.append(pre, button)\n    })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/faqs-1.json b/public/r/styles/base-vega/faqs-1.json
index dd7bab930..e33726343 100644
--- a/public/r/styles/base-vega/faqs-1.json
+++ b/public/r/styles/base-vega/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/faqs-2.json b/public/r/styles/base-vega/faqs-2.json
index a76c98096..5d669bafe 100644
--- a/public/r/styles/base-vega/faqs-2.json
+++ b/public/r/styles/base-vega/faqs-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons?.length && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/features-1.json b/public/r/styles/base-vega/features-1.json
index fae8c3764..e4cd92254 100644
--- a/public/r/styles/base-vega/features-1.json
+++ b/public/r/styles/base-vega/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/features-2.json b/public/r/styles/base-vega/features-2.json
index c2cf45f9c..51c9a088e 100644
--- a/public/r/styles/base-vega/features-2.json
+++ b/public/r/styles/base-vega/features-2.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/features-4.json b/public/r/styles/base-vega/features-4.json
index 6c3870911..6210bc332 100644
--- a/public/r/styles/base-vega/features-4.json
+++ b/public/r/styles/base-vega/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons?.length && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/features-5.json b/public/r/styles/base-vega/features-5.json
index 9bbc9affe..8575743db 100644
--- a/public/r/styles/base-vega/features-5.json
+++ b/public/r/styles/base-vega/features-5.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons?.length && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/features-6.json b/public/r/styles/base-vega/features-6.json
index 248bb4563..5e729533e 100644
--- a/public/r/styles/base-vega/features-6.json
+++ b/public/r/styles/base-vega/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons?.length && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/header-1.json b/public/r/styles/base-vega/header-1.json
index d4c11d61a..8baebe0f5 100644
--- a/public/r/styles/base-vega/header-1.json
+++ b/public/r/styles/base-vega/header-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/header-2.json b/public/r/styles/base-vega/header-2.json
index 30a7c4e17..a1039f8b2 100644
--- a/public/r/styles/base-vega/header-2.json
+++ b/public/r/styles/base-vega/header-2.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/header-3.json b/public/r/styles/base-vega/header-3.json
index 14a7fea9f..e511a92e7 100644
--- a/public/r/styles/base-vega/header-3.json
+++ b/public/r/styles/base-vega/header-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/header-4.json b/public/r/styles/base-vega/header-4.json
index 94e357029..3bd445ad1 100644
--- a/public/r/styles/base-vega/header-4.json
+++ b/public/r/styles/base-vega/header-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links?.length && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/header-5.json b/public/r/styles/base-vega/header-5.json
index e6cfc0b16..5f781e13c 100644
--- a/public/r/styles/base-vega/header-5.json
+++ b/public/r/styles/base-vega/header-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links?.length && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/links-2.json b/public/r/styles/base-vega/links-2.json
index 5980421f0..3d1b59a93 100644
--- a/public/r/styles/base-vega/links-2.json
+++ b/public/r/styles/base-vega/links-2.json
@@ -2,17 +2,12 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "links-2",
   "title": "Links 2",
-  "description": "Link carousel blocks for presenting related pages, components, or resources.",
+  "description": "Link grid blocks for presenting related pages, components, or resources.",
   "dependencies": [
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/accordion",
-    "@fulldev/button",
-    "@fulldev/card",
-    "@fulldev/carousel",
-    "@fulldev/section",
-    "@fulldev/tabs"
+    "@fulldev/section"
   ],
   "files": [
     {
diff --git a/public/r/styles/base-vega/registry.json b/public/r/styles/base-vega/registry.json
index 7d74eff2f..ea0465cff 100644
--- a/public/r/styles/base-vega/registry.json
+++ b/public/r/styles/base-vega/registry.json
@@ -3838,7 +3838,7 @@
       "name": "links-2",
       "type": "registry:block",
       "title": "Links 2",
-      "description": "Link carousel blocks for presenting related pages, components, or resources.",
+      "description": "Link grid blocks for presenting related pages, components, or resources.",
       "categories": [
         "links"
       ],
@@ -3847,12 +3847,7 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/accordion",
-        "@fulldev/button",
-        "@fulldev/card",
-        "@fulldev/carousel",
-        "@fulldev/section",
-        "@fulldev/tabs"
+        "@fulldev/section"
       ],
       "files": [
         {
@@ -4470,7 +4465,6 @@
         "@fulldev/header",
         "@fulldev/icon",
         "@fulldev/kbd",
-        "@fulldev/layout",
         "@fulldev/logo",
         "@fulldev/separator",
         "@fulldev/sidebar",
diff --git a/public/r/styles/base-vega/services-1.json b/public/r/styles/base-vega/services-1.json
index f934c1f9b..3fef88847 100644
--- a/public/r/styles/base-vega/services-1.json
+++ b/public/r/styles/base-vega/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/services-2.json b/public/r/styles/base-vega/services-2.json
index 36df53f2c..22252912d 100644
--- a/public/r/styles/base-vega/services-2.json
+++ b/public/r/styles/base-vega/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/services-3.json b/public/r/styles/base-vega/services-3.json
index c031f55bc..6f77bedb6 100644
--- a/public/r/styles/base-vega/services-3.json
+++ b/public/r/styles/base-vega/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/services-4.json b/public/r/styles/base-vega/services-4.json
index 8319c0db0..112b8fe30 100644
--- a/public/r/styles/base-vega/services-4.json
+++ b/public/r/styles/base-vega/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/services-5.json b/public/r/styles/base-vega/services-5.json
index b20aeb7ab..02476c58a 100644
--- a/public/r/styles/base-vega/services-5.json
+++ b/public/r/styles/base-vega/services-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/services-6.json b/public/r/styles/base-vega/services-6.json
index d20c3c556..76d0bd582 100644
--- a/public/r/styles/base-vega/services-6.json
+++ b/public/r/styles/base-vega/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons?.length && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/services-7.json b/public/r/styles/base-vega/services-7.json
index 9a22c4444..091def64d 100644
--- a/public/r/styles/base-vega/services-7.json
+++ b/public/r/styles/base-vega/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons?.length && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/sidebar-1.json b/public/r/styles/base-vega/sidebar-1.json
index c09ee6102..66f778967 100644
--- a/public/r/styles/base-vega/sidebar-1.json
+++ b/public/r/styles/base-vega/sidebar-1.json
@@ -14,7 +14,6 @@
     "@fulldev/header",
     "@fulldev/icon",
     "@fulldev/kbd",
-    "@fulldev/layout",
     "@fulldev/logo",
     "@fulldev/separator",
     "@fulldev/sidebar",
@@ -23,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n}: Props = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nlet githubStars = \"Stars\"\n\ntry {\n  const response = await fetch(`https://api.github.com/repos/${githubRepo}`)\n  const data = await response.json()\n\n  if (response.ok && typeof data.stargazers_count === \"number\") {\n    githubStars = new Intl.NumberFormat().format(data.stargazers_count)\n  }\n} catch {\n  // Keep the fallback label when GitHub is unavailable.\n}\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStars}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? \"Stars\"\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/registry.json b/registry.json
index 1ce80aa32..ed9a86d5f 100644
--- a/registry.json
+++ b/registry.json
@@ -3412,7 +3412,7 @@
       "name": "links-2",
       "type": "registry:block",
       "title": "Links 2",
-      "description": "Link carousel blocks for presenting related pages, components, or resources.",
+      "description": "Link grid blocks for presenting related pages, components, or resources.",
       "categories": ["links"],
       "docs": "https://ui.full.dev/blocks/links/",
       "dependencies": ["@lucide/astro"],

From 3255b9e02b2e85847d31cd4c45460b18a5860832 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 15:53:55 +0200
Subject: [PATCH 17/60] Remove dead Links2, CTA7, header and doc pagination
 fields

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/blocks/blocks-1.astro | 8 ++------
 src/components/blocks/cta-7.astro    | 1 -
 src/components/blocks/doc-1.astro    | 8 ++------
 src/components/blocks/header-1.astro | 4 ----
 src/components/blocks/header-2.astro | 4 ----
 src/components/blocks/header-3.astro | 4 ----
 src/components/blocks/links-2.astro  | 1 -
 src/content/pages/blocks/cta.mdx     | 1 -
 src/content/pages/blocks/doc.mdx     | 6 +-----
 src/content/pages/blocks/links.mdx   | 4 ----
 src/layouts/block.astro              | 6 +-----
 src/layouts/doc.astro                | 6 +-----
 12 files changed, 7 insertions(+), 46 deletions(-)

diff --git a/src/components/blocks/blocks-1.astro b/src/components/blocks/blocks-1.astro
index 9646f96ce..6f223e22c 100644
--- a/src/components/blocks/blocks-1.astro
+++ b/src/components/blocks/blocks-1.astro
@@ -49,11 +49,7 @@ type Props = HTMLAttributes<"div"> & {
     openInChatGPT: string
     openInClaude: string
     openInCursor: string
-    pagination: {
-      previous: string
-      next: string
-      ariaLabel: string
-    }
+    pagination: string
   }
 }
 
@@ -199,7 +195,7 @@ const openLinks = markdownUrl
     {showPagination && (
       <nav
         class="flex items-center justify-between gap-3"
-        aria-label={labels.pagination.ariaLabel}
+        aria-label={labels.pagination}
       >
         {previousPage ? (
           <Button
diff --git a/src/components/blocks/cta-7.astro b/src/components/blocks/cta-7.astro
index 0ec9e7683..d9e372112 100644
--- a/src/components/blocks/cta-7.astro
+++ b/src/components/blocks/cta-7.astro
@@ -33,7 +33,6 @@ type Props = HTMLAttributes<"section"> & {
       name?: string
     }[]
     count?: string | number
-    rating?: number
     text: string
   }
 }
diff --git a/src/components/blocks/doc-1.astro b/src/components/blocks/doc-1.astro
index 47ba86c4a..2695076c6 100644
--- a/src/components/blocks/doc-1.astro
+++ b/src/components/blocks/doc-1.astro
@@ -75,11 +75,7 @@ type Props = HTMLAttributes<"div"> & {
     openInChatGPT: string
     openInClaude: string
     openInCursor: string
-    pagination: {
-      previous: string
-      next: string
-      ariaLabel: string
-    }
+    pagination: string
     toc: string
   }
 }
@@ -233,7 +229,7 @@ const openLinks = markdownUrl
     {showPagination && (
       <nav
         class="flex items-center justify-between gap-3"
-        aria-label={labels.pagination.ariaLabel}
+        aria-label={labels.pagination}
       >
         {previousPage ? (
           <Button
diff --git a/src/components/blocks/header-1.astro b/src/components/blocks/header-1.astro
index 6046968b5..4231710bd 100644
--- a/src/components/blocks/header-1.astro
+++ b/src/components/blocks/header-1.astro
@@ -35,10 +35,6 @@ type Props = HTMLAttributes<"header"> & {
     label: string
     href: string
     active?: boolean
-    links?: {
-      label: string
-      href: string
-    }[]
   }[]
   buttons: {
     label: string
diff --git a/src/components/blocks/header-2.astro b/src/components/blocks/header-2.astro
index 713c21947..667fab50c 100644
--- a/src/components/blocks/header-2.astro
+++ b/src/components/blocks/header-2.astro
@@ -35,10 +35,6 @@ type Props = HTMLAttributes<"header"> & {
     label: string
     href: string
     active?: boolean
-    links?: {
-      label: string
-      href: string
-    }[]
   }[]
   buttons: {
     label: string
diff --git a/src/components/blocks/header-3.astro b/src/components/blocks/header-3.astro
index ab21ee4ff..d908b256d 100644
--- a/src/components/blocks/header-3.astro
+++ b/src/components/blocks/header-3.astro
@@ -36,10 +36,6 @@ type Props = HTMLAttributes<"header"> & {
     label: string
     href: string
     active?: boolean
-    links?: {
-      label: string
-      href: string
-    }[]
   }[]
   buttons: {
     label: string
diff --git a/src/components/blocks/links-2.astro b/src/components/blocks/links-2.astro
index a9c872b05..71633b050 100644
--- a/src/components/blocks/links-2.astro
+++ b/src/components/blocks/links-2.astro
@@ -12,7 +12,6 @@ type Props = HTMLAttributes<"section"> & {
     href: string
     title: string
     description: string
-    preview?: string
   }[]
 }
 
diff --git a/src/content/pages/blocks/cta.mdx b/src/content/pages/blocks/cta.mdx
index 5d2c6786f..8fde35cb8 100644
--- a/src/content/pages/blocks/cta.mdx
+++ b/src/content/pages/blocks/cta.mdx
@@ -199,7 +199,6 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
       { image: avatarSil, initials: "MK", name: "Sil Veltman" },
       { image: avatarSil, initials: "AR", name: "Sil Veltman" },
     ],
-    rating: 5,
     text: "Best for design teams",
   }}
 />
diff --git a/src/content/pages/blocks/doc.mdx b/src/content/pages/blocks/doc.mdx
index 3cd05d7ef..49140a5e4 100644
--- a/src/content/pages/blocks/doc.mdx
+++ b/src/content/pages/blocks/doc.mdx
@@ -42,11 +42,7 @@ import Doc1Block from "@/components/blocks/doc-1.astro"
     openInChatGPT: "Open in ChatGPT",
     openInClaude: "Open in Claude",
     openInCursor: "Open in Cursor",
-    pagination: {
-      previous: "Previous",
-      next: "Next",
-      ariaLabel: "Docs pagination",
-    },
+    pagination: "Docs pagination",
     toc: "On this page",
   }}
 >
diff --git a/src/content/pages/blocks/links.mdx b/src/content/pages/blocks/links.mdx
index 3d43aa8fe..c9f74930e 100644
--- a/src/content/pages/blocks/links.mdx
+++ b/src/content/pages/blocks/links.mdx
@@ -17,25 +17,21 @@ import Links2Block from "@/components/blocks/links-2.astro"
       href: "/components/section/",
       title: "Section",
       description: "Structure page sections with consistent spacing.",
-      preview: "section",
     },
     {
       href: "/components/card/",
       title: "Card",
       description: "Group related content and actions.",
-      preview: "card",
     },
     {
       href: "/components/accordion/",
       title: "Accordion",
       description: "Collapse secondary content into stacked panels.",
-      preview: "accordion",
     },
     {
       href: "/components/tabs/",
       title: "Tabs",
       description: "Switch between related panels of content.",
-      preview: "tabs",
     },
   ]}
 />
diff --git a/src/layouts/block.astro b/src/layouts/block.astro
index 630ddc6a5..dba914d73 100644
--- a/src/layouts/block.astro
+++ b/src/layouts/block.astro
@@ -61,11 +61,7 @@ const copyButton = copySource
       openInChatGPT: "Open in ChatGPT",
       openInClaude: "Open in Claude",
       openInCursor: "Open in Cursor",
-      pagination: {
-        previous: "Previous",
-        next: "Next",
-        ariaLabel: "Blocks pagination",
-      },
+      pagination: "Blocks pagination",
     }}
   >
     <slot />
diff --git a/src/layouts/doc.astro b/src/layouts/doc.astro
index bb81de7ed..ffefe8e53 100644
--- a/src/layouts/doc.astro
+++ b/src/layouts/doc.astro
@@ -90,11 +90,7 @@ const tocItems = props.headings
       openInChatGPT: "Open in ChatGPT",
       openInClaude: "Open in Claude",
       openInCursor: "Open in Cursor",
-      pagination: {
-        previous: "Previous",
-        next: "Next",
-        ariaLabel: "Document pagination",
-      },
+      pagination: "Document pagination",
       toc: "On This Page",
     }}
   >

From a729e595f5de6d4ae6863cb3f48d4c893c165dd3 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 15:55:10 +0200
Subject: [PATCH 18/60] Fix button styles in block code instead of caller
 variants

Blocks keep their index, featured and position based styles and map
button data explicitly, so caller data can no longer override them.
The docs callout button becomes a plain link in the global schema.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/blocks/banner-2.astro   |  6 ++--
 src/components/blocks/content-1.astro  |  6 ++--
 src/components/blocks/content-2.astro  |  8 ++---
 src/components/blocks/content-3.astro  |  8 ++---
 src/components/blocks/content-4.astro  |  8 ++---
 src/components/blocks/cta-1.astro      |  6 ++--
 src/components/blocks/cta-2.astro      |  6 ++--
 src/components/blocks/cta-3.astro      |  8 ++---
 src/components/blocks/cta-4.astro      |  6 ++--
 src/components/blocks/cta-5.astro      |  6 ++--
 src/components/blocks/cta-6.astro      |  6 ++--
 src/components/blocks/cta-7.astro      |  6 ++--
 src/components/blocks/cta-8.astro      |  6 ++--
 src/components/blocks/doc-1.astro      |  3 +-
 src/components/blocks/faqs-1.astro     |  6 ++--
 src/components/blocks/faqs-2.astro     |  8 ++---
 src/components/blocks/features-1.astro |  6 ++--
 src/components/blocks/features-2.astro |  6 ++--
 src/components/blocks/features-4.astro |  8 ++---
 src/components/blocks/features-5.astro |  6 ++--
 src/components/blocks/features-6.astro |  6 ++--
 src/components/blocks/header-1.astro   | 10 +++---
 src/components/blocks/header-2.astro   | 10 +++---
 src/components/blocks/header-3.astro   | 10 +++---
 src/components/blocks/header-4.astro   | 10 +++---
 src/components/blocks/header-5.astro   | 10 +++---
 src/components/blocks/hero-1.astro     |  6 ++--
 src/components/blocks/hero-10.astro    |  6 ++--
 src/components/blocks/hero-11.astro    |  6 ++--
 src/components/blocks/hero-12.astro    |  6 ++--
 src/components/blocks/hero-13.astro    |  6 ++--
 src/components/blocks/hero-2.astro     |  6 ++--
 src/components/blocks/hero-3.astro     |  6 ++--
 src/components/blocks/hero-4.astro     |  6 ++--
 src/components/blocks/hero-5.astro     |  6 ++--
 src/components/blocks/hero-6.astro     |  6 ++--
 src/components/blocks/hero-7.astro     |  6 ++--
 src/components/blocks/hero-8.astro     |  6 ++--
 src/components/blocks/hero-9.astro     |  6 ++--
 src/components/blocks/pricing-1.astro  |  5 +--
 src/components/blocks/pricing-2.astro  |  5 +--
 src/components/blocks/pricing-3.astro  |  8 +----
 src/components/blocks/product-1.astro  |  9 +++--
 src/components/blocks/products-4.astro |  5 ++-
 src/components/blocks/products-5.astro |  5 ++-
 src/components/blocks/services-1.astro |  5 ++-
 src/components/blocks/services-2.astro |  9 +++--
 src/components/blocks/services-3.astro |  9 +++--
 src/components/blocks/services-4.astro |  9 +++--
 src/components/blocks/services-5.astro |  9 +++--
 src/components/blocks/services-6.astro |  9 +++--
 src/components/blocks/services-7.astro |  9 +++--
 src/content/globals/en.yaml            |  1 -
 src/content/pages/blocks/banner.mdx    |  2 +-
 src/content/pages/blocks/content.mdx   |  8 ++---
 src/content/pages/blocks/cta.mdx       | 48 +++++---------------------
 src/content/pages/blocks/doc.mdx       |  6 +---
 src/content/pages/blocks/faqs.mdx      |  8 ++---
 src/content/pages/blocks/features.mdx  |  6 ++--
 src/content/pages/blocks/header.mdx    | 22 ++++++------
 src/content/pages/blocks/hero.mdx      | 48 ++++++++++++--------------
 src/content/pages/blocks/index.mdx     | 20 ++++-------
 src/content/pages/blocks/pricing.mdx   |  6 ++--
 src/content/pages/blocks/product.mdx   |  4 +--
 src/content/pages/blocks/products.mdx  | 20 ++---------
 src/content/pages/blocks/services.mdx  | 16 ++++-----
 src/content/pages/index.mdx            |  6 +---
 src/schemas/global.ts                  |  4 +--
 src/schemas/shared.ts                  |  7 ----
 69 files changed, 221 insertions(+), 370 deletions(-)

diff --git a/src/components/blocks/banner-2.astro b/src/components/blocks/banner-2.astro
index e0bf98b6e..08f263728 100644
--- a/src/components/blocks/banner-2.astro
+++ b/src/components/blocks/banner-2.astro
@@ -11,7 +11,6 @@ type Props = HTMLAttributes<"aside"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
 }
 
@@ -34,13 +33,12 @@ const { class: className, title, description, buttons, ...props } = Astro.props
     </div>
     {buttons && buttons.length > 0 && (
       <div class="flex flex-wrap items-center gap-2">
-        {buttons.map(({ href, label, ...button }, index) => (
+        {buttons.map(({ href, label }, index) => (
           <Button
             as="a"
             href={href}
             size="sm"
-            variant={button.variant ?? (index === 0 ? "default" : "outline")}
-            {...button}
+            variant={index === 0 ? "default" : "outline"}
           >
             {label}
           </Button>
diff --git a/src/components/blocks/content-1.astro b/src/components/blocks/content-1.astro
index 63af0a13c..489696942 100644
--- a/src/components/blocks/content-1.astro
+++ b/src/components/blocks/content-1.astro
@@ -21,7 +21,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   image?: {
     src: ImageMetadata
@@ -58,13 +57,12 @@ const {
     )}
     {buttons && buttons.length > 0 && (
       <div class="flex flex-wrap gap-3">
-        {buttons.map(({ href, label, ...button }, index) => (
+        {buttons.map(({ href, label }, index) => (
           <Button
             as="a"
             href={href}
             size="lg"
-            variant={button.variant ?? (index === 0 ? "default" : "secondary")}
-            {...button}
+            variant={index === 0 ? "default" : "secondary"}
           >
             {label}
           </Button>
diff --git a/src/components/blocks/content-2.astro b/src/components/blocks/content-2.astro
index dd6c11c91..b763f241a 100644
--- a/src/components/blocks/content-2.astro
+++ b/src/components/blocks/content-2.astro
@@ -21,7 +21,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   image?: {
     src: ImageMetadata
@@ -59,15 +58,12 @@ const {
       )}
       {buttons && buttons.length > 0 && (
         <div class="flex flex-wrap gap-3">
-          {buttons.map(({ href, label, ...button }, index) => (
+          {buttons.map(({ href, label }, index) => (
             <Button
               as="a"
               href={href}
               size="lg"
-              variant={
-                button.variant ?? (index === 0 ? "default" : "secondary")
-              }
-              {...button}
+              variant={index === 0 ? "default" : "secondary"}
             >
               {label}
             </Button>
diff --git a/src/components/blocks/content-3.astro b/src/components/blocks/content-3.astro
index c3dda8844..a4d69a78a 100644
--- a/src/components/blocks/content-3.astro
+++ b/src/components/blocks/content-3.astro
@@ -19,7 +19,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   image?: {
     src: ImageMetadata
@@ -46,15 +45,12 @@ const {
       </div>
       {buttons && buttons.length > 0 && (
         <div class="flex flex-wrap gap-3">
-          {buttons.map(({ href, label, ...button }, index) => (
+          {buttons.map(({ href, label }, index) => (
             <Button
               as="a"
               href={href}
               size="lg"
-              variant={
-                button.variant ?? (index === 0 ? "default" : "secondary")
-              }
-              {...button}
+              variant={index === 0 ? "default" : "secondary"}
             >
               {label}
             </Button>
diff --git a/src/components/blocks/content-4.astro b/src/components/blocks/content-4.astro
index 128642a33..a298165f1 100644
--- a/src/components/blocks/content-4.astro
+++ b/src/components/blocks/content-4.astro
@@ -21,7 +21,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   image?: {
     src: ImageMetadata
@@ -60,15 +59,12 @@ const {
         )}
         {buttons && buttons.length > 0 && (
           <div class="flex flex-wrap gap-3">
-            {buttons.map(({ href, label, ...button }, index) => (
+            {buttons.map(({ href, label }, index) => (
               <Button
                 as="a"
                 href={href}
                 size="lg"
-                variant={
-                  button.variant ?? (index === 0 ? "default" : "secondary")
-                }
-                {...button}
+                variant={index === 0 ? "default" : "secondary"}
               >
                 {label}
               </Button>
diff --git a/src/components/blocks/cta-1.astro b/src/components/blocks/cta-1.astro
index 848c2e8b9..e7a017c2d 100644
--- a/src/components/blocks/cta-1.astro
+++ b/src/components/blocks/cta-1.astro
@@ -24,7 +24,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   socialProof?: {
     avatars: {
@@ -74,13 +73,12 @@ const {
     </div>
     {buttons && buttons.length > 0 && (
       <div class="flex flex-wrap justify-center gap-3">
-        {buttons.map(({ href, label, ...button }, index) => (
+        {buttons.map(({ href, label }, index) => (
           <Button
             as="a"
             href={href}
             size="lg"
-            variant={button.variant ?? (index === 0 ? "default" : "secondary")}
-            {...button}
+            variant={index === 0 ? "default" : "secondary"}
           >
             {label}
           </Button>
diff --git a/src/components/blocks/cta-2.astro b/src/components/blocks/cta-2.astro
index 08b7c21e9..deb488fca 100644
--- a/src/components/blocks/cta-2.astro
+++ b/src/components/blocks/cta-2.astro
@@ -25,7 +25,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   socialProof?: {
     avatars: {
@@ -64,13 +63,12 @@ const {
       </div>
       {buttons && buttons.length > 0 && (
         <div class="flex flex-wrap gap-3">
-          {buttons.map(({ href, label, ...button }, index) => (
+          {buttons.map(({ href, label }, index) => (
             <Button
               as="a"
               href={href}
               size="lg"
-              variant={button.variant ?? (index === 0 ? "default" : "outline")}
-              {...button}
+              variant={index === 0 ? "default" : "outline"}
             >
               {label}
             </Button>
diff --git a/src/components/blocks/cta-3.astro b/src/components/blocks/cta-3.astro
index 98dc4f0c7..e2e53725c 100644
--- a/src/components/blocks/cta-3.astro
+++ b/src/components/blocks/cta-3.astro
@@ -23,7 +23,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   socialProof?: {
     avatars: {
@@ -61,15 +60,12 @@ const {
     <div class="flex flex-col gap-6 lg:items-end">
       {buttons && buttons.length > 0 && (
         <div class="flex flex-wrap gap-3">
-          {buttons.map(({ href, label, ...button }, index) => (
+          {buttons.map(({ href, label }, index) => (
             <Button
               as="a"
               href={href}
               size="lg"
-              variant={
-                button.variant ?? (index === 0 ? "default" : "secondary")
-              }
-              {...button}
+              variant={index === 0 ? "default" : "secondary"}
             >
               {label}
             </Button>
diff --git a/src/components/blocks/cta-4.astro b/src/components/blocks/cta-4.astro
index 23157dd70..0ddfb8475 100644
--- a/src/components/blocks/cta-4.astro
+++ b/src/components/blocks/cta-4.astro
@@ -26,7 +26,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   socialProof?: {
     avatars: {
@@ -73,13 +72,12 @@ const {
     </div>
     {buttons && buttons.length > 0 && (
       <div class="flex flex-wrap justify-center gap-3">
-        {buttons.map(({ href, label, ...button }, index) => (
+        {buttons.map(({ href, label }, index) => (
           <Button
             as="a"
             href={href}
             size="lg"
-            variant={button.variant ?? (index === 0 ? "default" : "outline")}
-            {...button}
+            variant={index === 0 ? "default" : "outline"}
           >
             {label}
           </Button>
diff --git a/src/components/blocks/cta-5.astro b/src/components/blocks/cta-5.astro
index 043e5bd32..f6dc74867 100644
--- a/src/components/blocks/cta-5.astro
+++ b/src/components/blocks/cta-5.astro
@@ -20,7 +20,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   image?: {
     src: ImageMetadata
@@ -60,13 +59,12 @@ const {
       )}
       {buttons && buttons.length > 0 && (
         <div class="flex flex-wrap gap-3">
-          {buttons.map(({ href, label, ...button }, index) => (
+          {buttons.map(({ href, label }, index) => (
             <Button
               as="a"
               href={href}
               size="lg"
-              variant={button.variant ?? (index === 0 ? "default" : "outline")}
-              {...button}
+              variant={index === 0 ? "default" : "outline"}
             >
               {label}
             </Button>
diff --git a/src/components/blocks/cta-6.astro b/src/components/blocks/cta-6.astro
index 67d8819cc..6b8fa5f7c 100644
--- a/src/components/blocks/cta-6.astro
+++ b/src/components/blocks/cta-6.astro
@@ -25,7 +25,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   socialProof?: {
     avatars: {
@@ -71,13 +70,12 @@ const {
       </div>
       {buttons && buttons.length > 0 && (
         <div class="flex flex-wrap gap-3">
-          {buttons.map(({ href, label, ...button }, index) => (
+          {buttons.map(({ href, label }, index) => (
             <Button
               as="a"
               href={href}
               size="lg"
-              variant={button.variant ?? (index === 0 ? "default" : "outline")}
-              {...button}
+              variant={index === 0 ? "default" : "outline"}
             >
               {label}
             </Button>
diff --git a/src/components/blocks/cta-7.astro b/src/components/blocks/cta-7.astro
index d9e372112..79d2f2c85 100644
--- a/src/components/blocks/cta-7.astro
+++ b/src/components/blocks/cta-7.astro
@@ -24,7 +24,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   socialProof?: {
     avatars: {
@@ -58,13 +57,12 @@ const {
     </div>
     {buttons && buttons.length > 0 && (
       <div class="flex flex-wrap justify-center gap-3">
-        {buttons.map(({ href, label, ...button }, index) => (
+        {buttons.map(({ href, label }, index) => (
           <Button
             as="a"
             href={href}
             size="lg"
-            variant={button.variant ?? (index === 0 ? "default" : "secondary")}
-            {...button}
+            variant={index === 0 ? "default" : "secondary"}
           >
             {label}
           </Button>
diff --git a/src/components/blocks/cta-8.astro b/src/components/blocks/cta-8.astro
index 204ff414c..4fa2a9333 100644
--- a/src/components/blocks/cta-8.astro
+++ b/src/components/blocks/cta-8.astro
@@ -16,7 +16,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
 }
 
@@ -35,13 +34,12 @@ const { class: className, title, description, buttons, ...props } = Astro.props
     </div>
     {buttons && buttons.length > 0 && (
       <div class="flex flex-wrap justify-center gap-3">
-        {buttons.map(({ href, label, ...button }, index) => (
+        {buttons.map(({ href, label }, index) => (
           <Button
             as="a"
             href={href}
             size="lg"
-            variant={button.variant ?? (index === 0 ? "default" : "outline")}
-            {...button}
+            variant={index === 0 ? "default" : "outline"}
           >
             {label}
           </Button>
diff --git a/src/components/blocks/doc-1.astro b/src/components/blocks/doc-1.astro
index 2695076c6..ea7555360 100644
--- a/src/components/blocks/doc-1.astro
+++ b/src/components/blocks/doc-1.astro
@@ -57,7 +57,6 @@ type Props = HTMLAttributes<"div"> & {
     button: {
       label: string
       href: string
-      variant?: "default" | "outline" | "secondary" | "ghost"
     }
   }
   previousPage?: {
@@ -291,7 +290,7 @@ const openLinks = markdownUrl
               <Button
                 as="a"
                 href={callout.button.href}
-                variant={callout.button.variant}
+                variant="outline"
                 size="sm"
                 target="_blank"
                 rel="noreferrer"
diff --git a/src/components/blocks/faqs-1.astro b/src/components/blocks/faqs-1.astro
index 512b6ae4b..5e8c0a435 100644
--- a/src/components/blocks/faqs-1.astro
+++ b/src/components/blocks/faqs-1.astro
@@ -28,7 +28,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
 }
 
@@ -51,13 +50,12 @@ const {
     </div>
     {buttons && buttons.length > 0 && (
       <div class="flex flex-wrap justify-center gap-3">
-        {buttons.map(({ href, label, ...button }, index) => (
+        {buttons.map(({ href, label }, index) => (
           <Button
             as="a"
             href={href}
             size="lg"
-            variant={button.variant ?? (index === 0 ? "default" : "secondary")}
-            {...button}
+            variant={index === 0 ? "default" : "secondary"}
           >
             {label}
           </Button>
diff --git a/src/components/blocks/faqs-2.astro b/src/components/blocks/faqs-2.astro
index 5ea2bfd8f..94a3b7f1b 100644
--- a/src/components/blocks/faqs-2.astro
+++ b/src/components/blocks/faqs-2.astro
@@ -26,7 +26,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
 }
 
@@ -50,15 +49,12 @@ const {
         </p>
         {buttons && buttons.length > 0 && (
           <div class="mt-8 flex flex-wrap gap-3">
-            {buttons.map(({ href, label, ...button }, index) => (
+            {buttons.map(({ href, label }, index) => (
               <Button
                 as="a"
                 href={href}
                 size="lg"
-                variant={
-                  button.variant ?? (index === 0 ? "default" : "secondary")
-                }
-                {...button}
+                variant={index === 0 ? "default" : "secondary"}
               >
                 {label}
               </Button>
diff --git a/src/components/blocks/features-1.astro b/src/components/blocks/features-1.astro
index 89cfbeafd..9cd0e2952 100644
--- a/src/components/blocks/features-1.astro
+++ b/src/components/blocks/features-1.astro
@@ -18,7 +18,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   features: {
     title: string
@@ -47,12 +46,11 @@ const {
     </div>
     {buttons && buttons.length > 0 && (
       <div class="flex flex-wrap justify-center gap-3">
-        {buttons.map(({ href, label, ...button }, index) => (
+        {buttons.map(({ href, label }, index) => (
           <Button
             as="a"
             href={href}
-            variant={button.variant ?? (index === 0 ? "default" : "outline")}
-            {...button}
+            variant={index === 0 ? "default" : "outline"}
           >
             {label}
           </Button>
diff --git a/src/components/blocks/features-2.astro b/src/components/blocks/features-2.astro
index 249417238..784d9e337 100644
--- a/src/components/blocks/features-2.astro
+++ b/src/components/blocks/features-2.astro
@@ -17,7 +17,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   features: {
     title: string
@@ -44,12 +43,11 @@ const {
     </div>
     {buttons && buttons.length > 0 && (
       <div class="flex flex-wrap justify-center gap-3">
-        {buttons.map(({ href, label, ...button }, index) => (
+        {buttons.map(({ href, label }, index) => (
           <Button
             as="a"
             href={href}
-            variant={button.variant ?? (index === 0 ? "default" : "outline")}
-            {...button}
+            variant={index === 0 ? "default" : "outline"}
           >
             {label}
           </Button>
diff --git a/src/components/blocks/features-4.astro b/src/components/blocks/features-4.astro
index c059a31e5..81cca8f42 100644
--- a/src/components/blocks/features-4.astro
+++ b/src/components/blocks/features-4.astro
@@ -17,7 +17,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   features: {
     title: string
@@ -48,14 +47,11 @@ const {
         </p>
         {buttons && buttons.length > 0 && (
           <div class="mt-6 flex flex-wrap gap-3">
-            {buttons.map(({ href, label, ...button }, index) => (
+            {buttons.map(({ href, label }, index) => (
               <Button
                 as="a"
                 href={href}
-                variant={
-                  button.variant ?? (index === 0 ? "default" : "outline")
-                }
-                {...button}
+                variant={index === 0 ? "default" : "outline"}
               >
                 {label}
               </Button>
diff --git a/src/components/blocks/features-5.astro b/src/components/blocks/features-5.astro
index 2fd9aa775..f22d0cbb4 100644
--- a/src/components/blocks/features-5.astro
+++ b/src/components/blocks/features-5.astro
@@ -17,7 +17,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   features: {
     title: string
@@ -44,12 +43,11 @@ const {
     </div>
     {buttons && buttons.length > 0 && (
       <div class="flex flex-wrap justify-center gap-3">
-        {buttons.map(({ href, label, ...button }, index) => (
+        {buttons.map(({ href, label }, index) => (
           <Button
             as="a"
             href={href}
-            variant={button.variant ?? (index === 0 ? "default" : "outline")}
-            {...button}
+            variant={index === 0 ? "default" : "outline"}
           >
             {label}
           </Button>
diff --git a/src/components/blocks/features-6.astro b/src/components/blocks/features-6.astro
index 1b6d686aa..3ed2c72e7 100644
--- a/src/components/blocks/features-6.astro
+++ b/src/components/blocks/features-6.astro
@@ -16,7 +16,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   features: {
     title: string
@@ -43,12 +42,11 @@ const {
       </p>
       {buttons && buttons.length > 0 && (
         <div class="mt-2 flex flex-wrap gap-3">
-          {buttons.map(({ href, label, ...button }, index) => (
+          {buttons.map(({ href, label }, index) => (
             <Button
               as="a"
               href={href}
-              variant={button.variant ?? (index === 0 ? "default" : "outline")}
-              {...button}
+              variant={index === 0 ? "default" : "outline"}
             >
               {label}
             </Button>
diff --git a/src/components/blocks/header-1.astro b/src/components/blocks/header-1.astro
index 4231710bd..17e1e2379 100644
--- a/src/components/blocks/header-1.astro
+++ b/src/components/blocks/header-1.astro
@@ -40,7 +40,6 @@ type Props = HTMLAttributes<"header"> & {
     label: string
     href: string
     icon?: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   navigationLabel?: string
   menu?: {
@@ -94,14 +93,15 @@ const {
     </NavigationMenu>
     <HeaderGroup class="ml-auto hidden flex-1 justify-end lg:flex">
       <slot />
-      {buttons.map(({ label, icon, ...button }) => (
+      {buttons.map(({ label, href, icon }, index) => (
         <Button
           as="a"
+          href={href}
           size={icon && !label ? "icon-sm" : "sm"}
+          variant={index === buttons.length - 1 ? "default" : "ghost"}
           aria-label={label}
-          target={button.href.startsWith("http") ? "_blank" : undefined}
-          rel={button.href.startsWith("http") ? "noreferrer" : undefined}
-          {...button}
+          target={href.startsWith("http") ? "_blank" : undefined}
+          rel={href.startsWith("http") ? "noreferrer" : undefined}
         >
           {icon && <Icon name={icon} />}
           {label}
diff --git a/src/components/blocks/header-2.astro b/src/components/blocks/header-2.astro
index 667fab50c..71943b808 100644
--- a/src/components/blocks/header-2.astro
+++ b/src/components/blocks/header-2.astro
@@ -40,7 +40,6 @@ type Props = HTMLAttributes<"header"> & {
     label: string
     href: string
     icon?: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   navigationLabel?: string
   menu?: {
@@ -94,14 +93,15 @@ const {
     </NavigationMenu>
     <HeaderGroup class="ml-auto hidden justify-end lg:flex">
       <slot />
-      {buttons.map(({ label, icon, ...button }) => (
+      {buttons.map(({ label, href, icon }, index) => (
         <Button
           as="a"
+          href={href}
           size={icon && !label ? "icon-sm" : "sm"}
+          variant={index === buttons.length - 1 ? "default" : "ghost"}
           aria-label={label}
-          target={button.href.startsWith("http") ? "_blank" : undefined}
-          rel={button.href.startsWith("http") ? "noreferrer" : undefined}
-          {...button}
+          target={href.startsWith("http") ? "_blank" : undefined}
+          rel={href.startsWith("http") ? "noreferrer" : undefined}
         >
           {icon && <Icon name={icon} />}
           {label}
diff --git a/src/components/blocks/header-3.astro b/src/components/blocks/header-3.astro
index d908b256d..3136b54f9 100644
--- a/src/components/blocks/header-3.astro
+++ b/src/components/blocks/header-3.astro
@@ -41,7 +41,6 @@ type Props = HTMLAttributes<"header"> & {
     label: string
     href: string
     icon?: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   navigationLabel?: string
   menu?: {
@@ -99,14 +98,15 @@ const {
         class="mx-1 hidden h-5 self-center lg:block"
       />
       <slot />
-      {buttons.map(({ label, icon, ...button }) => (
+      {buttons.map(({ label, href, icon }, index) => (
         <Button
           as="a"
+          href={href}
           size={icon && !label ? "icon-sm" : "sm"}
+          variant={index === buttons.length - 1 ? "default" : "ghost"}
           aria-label={label}
-          target={button.href.startsWith("http") ? "_blank" : undefined}
-          rel={button.href.startsWith("http") ? "noreferrer" : undefined}
-          {...button}
+          target={href.startsWith("http") ? "_blank" : undefined}
+          rel={href.startsWith("http") ? "noreferrer" : undefined}
         >
           {icon && <Icon name={icon} />}
           {label}
diff --git a/src/components/blocks/header-4.astro b/src/components/blocks/header-4.astro
index 7cd575304..514455d6a 100644
--- a/src/components/blocks/header-4.astro
+++ b/src/components/blocks/header-4.astro
@@ -57,7 +57,6 @@ type Props = HTMLAttributes<"header"> & {
     label: string
     href: string
     icon?: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   navigationLabel?: string
   menu?: {
@@ -171,14 +170,15 @@ const {
     </NavigationMenu>
     <HeaderGroup class="ml-auto hidden justify-end lg:flex">
       <slot />
-      {buttons.map(({ label, icon, ...button }) => (
+      {buttons.map(({ label, href, icon }, index) => (
         <Button
           as="a"
+          href={href}
           size={icon && !label ? "icon-sm" : "sm"}
+          variant={index === buttons.length - 1 ? "default" : "ghost"}
           aria-label={label}
-          target={button.href.startsWith("http") ? "_blank" : undefined}
-          rel={button.href.startsWith("http") ? "noreferrer" : undefined}
-          {...button}
+          target={href.startsWith("http") ? "_blank" : undefined}
+          rel={href.startsWith("http") ? "noreferrer" : undefined}
         >
           {icon && <Icon name={icon} />}
           {label}
diff --git a/src/components/blocks/header-5.astro b/src/components/blocks/header-5.astro
index dee4d2b26..8a80a0301 100644
--- a/src/components/blocks/header-5.astro
+++ b/src/components/blocks/header-5.astro
@@ -58,7 +58,6 @@ type Props = HTMLAttributes<"header"> & {
     label: string
     href: string
     icon?: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   navigationLabel?: string
   menu?: {
@@ -101,14 +100,15 @@ const {
     </HeaderGroup>
     <HeaderGroup class="ml-auto hidden justify-end lg:flex">
       <slot />
-      {buttons.map(({ label, icon, ...button }) => (
+      {buttons.map(({ label, href, icon }, index) => (
         <Button
           as="a"
+          href={href}
           size={icon && !label ? "icon-sm" : "sm"}
+          variant={index === buttons.length - 1 ? "default" : "ghost"}
           aria-label={label}
-          target={button.href.startsWith("http") ? "_blank" : undefined}
-          rel={button.href.startsWith("http") ? "noreferrer" : undefined}
-          {...button}
+          target={href.startsWith("http") ? "_blank" : undefined}
+          rel={href.startsWith("http") ? "noreferrer" : undefined}
         >
           {icon && <Icon name={icon} />}
           {label}
diff --git a/src/components/blocks/hero-1.astro b/src/components/blocks/hero-1.astro
index 0eec8444e..c523acb28 100644
--- a/src/components/blocks/hero-1.astro
+++ b/src/components/blocks/hero-1.astro
@@ -22,7 +22,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   image: {
     src: ImageMetadata
@@ -53,13 +52,12 @@ const {
     </h1>
     <SectionDescription class="max-w-2xl">{description}</SectionDescription>
     <div class="flex flex-wrap justify-center gap-3">
-      {buttons.map(({ href, label, ...button }, index) => (
+      {buttons.map(({ href, label }, index) => (
         <Button
           as="a"
           href={href}
           size="lg"
-          variant={button.variant ?? (index === 0 ? "default" : "secondary")}
-          {...button}
+          variant={index === 0 ? "default" : "secondary"}
         >
           {label}
         </Button>
diff --git a/src/components/blocks/hero-10.astro b/src/components/blocks/hero-10.astro
index a9be3164c..34cd9ee6e 100644
--- a/src/components/blocks/hero-10.astro
+++ b/src/components/blocks/hero-10.astro
@@ -20,7 +20,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   socialProof: {
     avatars: {
@@ -63,14 +62,13 @@ const {
     </div>
     <div class="flex shrink-0 flex-col gap-5">
       <div class="flex flex-wrap gap-3">
-        {buttons.map(({ href, label, ...button }, index) => (
+        {buttons.map(({ href, label }, index) => (
           <Button
             as="a"
             href={href}
             size="lg"
             class="w-full"
-            variant={button.variant ?? (index === 0 ? "default" : "secondary")}
-            {...button}
+            variant={index === 0 ? "default" : "secondary"}
           >
             {label}
           </Button>
diff --git a/src/components/blocks/hero-11.astro b/src/components/blocks/hero-11.astro
index 377b3fd0c..c733749f7 100644
--- a/src/components/blocks/hero-11.astro
+++ b/src/components/blocks/hero-11.astro
@@ -20,7 +20,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   socialProof: {
     avatars: {
@@ -60,13 +59,12 @@ const {
       {description}
     </p>
     <div class="flex flex-wrap justify-center gap-3">
-      {buttons.map(({ href, label, ...button }, index) => (
+      {buttons.map(({ href, label }, index) => (
         <Button
           as="a"
           href={href}
           size="lg"
-          variant={button.variant ?? (index === 0 ? "default" : "secondary")}
-          {...button}
+          variant={index === 0 ? "default" : "secondary"}
         >
           {label}
         </Button>
diff --git a/src/components/blocks/hero-12.astro b/src/components/blocks/hero-12.astro
index a958f5d3a..2f21e0aff 100644
--- a/src/components/blocks/hero-12.astro
+++ b/src/components/blocks/hero-12.astro
@@ -13,7 +13,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   image: {
     src: ImageMetadata
@@ -41,12 +40,11 @@ const {
         {description}
       </p>
       <div class="flex flex-wrap gap-3">
-        {buttons.map(({ href, label, ...button }, index) => (
+        {buttons.map(({ href, label }, index) => (
           <Button
             as="a"
             href={href}
-            variant={button.variant ?? (index === 0 ? "default" : "secondary")}
-            {...button}
+            variant={index === 0 ? "default" : "secondary"}
           >
             {label}
           </Button>
diff --git a/src/components/blocks/hero-13.astro b/src/components/blocks/hero-13.astro
index d9837830a..448a6e69e 100644
--- a/src/components/blocks/hero-13.astro
+++ b/src/components/blocks/hero-13.astro
@@ -13,7 +13,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   image: {
     src: ImageMetadata
@@ -43,12 +42,11 @@ const {
         </p>
       </div>
       <div class="flex flex-wrap gap-3">
-        {buttons.map(({ href, label, ...button }, index) => (
+        {buttons.map(({ href, label }, index) => (
           <Button
             as="a"
             href={href}
-            variant={button.variant ?? (index === 0 ? "default" : "secondary")}
-            {...button}
+            variant={index === 0 ? "default" : "secondary"}
           >
             {label}
           </Button>
diff --git a/src/components/blocks/hero-2.astro b/src/components/blocks/hero-2.astro
index 9f9161e3a..77b97f6b1 100644
--- a/src/components/blocks/hero-2.astro
+++ b/src/components/blocks/hero-2.astro
@@ -24,7 +24,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   socialProof: {
     avatars: {
@@ -76,13 +75,12 @@ const {
     </h1>
     <SectionDescription class="max-w-2xl">{description}</SectionDescription>
     <div class="flex flex-wrap justify-center gap-3">
-      {buttons.map(({ href, label, ...button }, index) => (
+      {buttons.map(({ href, label }, index) => (
         <Button
           as="a"
           href={href}
           size="lg"
-          variant={button.variant ?? (index === 0 ? "default" : "secondary")}
-          {...button}
+          variant={index === 0 ? "default" : "secondary"}
         >
           {label}
         </Button>
diff --git a/src/components/blocks/hero-3.astro b/src/components/blocks/hero-3.astro
index 3edda36ea..ed272d8f6 100644
--- a/src/components/blocks/hero-3.astro
+++ b/src/components/blocks/hero-3.astro
@@ -13,7 +13,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   image: {
     src: ImageMetadata
@@ -43,13 +42,12 @@ const {
       {description}
     </p>
     <div class="flex flex-wrap justify-center gap-3">
-      {buttons.map(({ href, label, ...button }, index) => (
+      {buttons.map(({ href, label }, index) => (
         <Button
           as="a"
           href={href}
           size="lg"
-          variant={button.variant ?? (index === 0 ? "default" : "secondary")}
-          {...button}
+          variant={index === 0 ? "default" : "secondary"}
         >
           {label}
         </Button>
diff --git a/src/components/blocks/hero-4.astro b/src/components/blocks/hero-4.astro
index f0b975968..0a0ad5ff8 100644
--- a/src/components/blocks/hero-4.astro
+++ b/src/components/blocks/hero-4.astro
@@ -15,7 +15,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   image: {
     src: ImageMetadata
@@ -54,13 +53,12 @@ const {
       ))}
     </ul>
     <div class="flex flex-wrap justify-center gap-3">
-      {buttons.map(({ href, label, ...button }, index) => (
+      {buttons.map(({ href, label }, index) => (
         <Button
           as="a"
           href={href}
           size="lg"
-          variant={button.variant ?? (index === 0 ? "default" : "secondary")}
-          {...button}
+          variant={index === 0 ? "default" : "secondary"}
         >
           {label}
         </Button>
diff --git a/src/components/blocks/hero-5.astro b/src/components/blocks/hero-5.astro
index 3020509c3..e34d9fbfb 100644
--- a/src/components/blocks/hero-5.astro
+++ b/src/components/blocks/hero-5.astro
@@ -22,7 +22,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   socialProof: {
     avatars: {
@@ -71,13 +70,12 @@ const {
         ))}
       </ul>
       <div class="flex flex-wrap gap-3">
-        {buttons.map(({ href, label, ...button }, index) => (
+        {buttons.map(({ href, label }, index) => (
           <Button
             as="a"
             href={href}
             size="lg"
-            variant={button.variant ?? (index === 0 ? "default" : "secondary")}
-            {...button}
+            variant={index === 0 ? "default" : "secondary"}
           >
             {label}
           </Button>
diff --git a/src/components/blocks/hero-6.astro b/src/components/blocks/hero-6.astro
index 0aba0b64e..4601e6755 100644
--- a/src/components/blocks/hero-6.astro
+++ b/src/components/blocks/hero-6.astro
@@ -22,7 +22,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   socialProof: {
     avatars: {
@@ -80,13 +79,12 @@ const {
         ))}
       </ul>
       <div class="flex flex-wrap gap-3">
-        {buttons.map(({ href, label, ...button }, index) => (
+        {buttons.map(({ href, label }, index) => (
           <Button
             as="a"
             href={href}
             size="lg"
-            variant={button.variant ?? (index === 0 ? "default" : "secondary")}
-            {...button}
+            variant={index === 0 ? "default" : "secondary"}
           >
             {label}
           </Button>
diff --git a/src/components/blocks/hero-7.astro b/src/components/blocks/hero-7.astro
index 8cd1605b8..8fc8a8fa9 100644
--- a/src/components/blocks/hero-7.astro
+++ b/src/components/blocks/hero-7.astro
@@ -22,7 +22,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   socialProof: {
     avatars: {
@@ -71,13 +70,12 @@ const {
         ))}
       </ul>
       <div class="flex flex-wrap gap-3">
-        {buttons.map(({ href, label, ...button }, index) => (
+        {buttons.map(({ href, label }, index) => (
           <Button
             as="a"
             href={href}
             size="lg"
-            variant={button.variant ?? (index === 0 ? "default" : "secondary")}
-            {...button}
+            variant={index === 0 ? "default" : "secondary"}
           >
             {label}
           </Button>
diff --git a/src/components/blocks/hero-8.astro b/src/components/blocks/hero-8.astro
index 4bf858ae5..ed44a1908 100644
--- a/src/components/blocks/hero-8.astro
+++ b/src/components/blocks/hero-8.astro
@@ -13,7 +13,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   image: {
     src: ImageMetadata
@@ -43,13 +42,12 @@ const {
         </p>
       </div>
       <div class="flex flex-wrap gap-3">
-        {buttons.map(({ href, label, ...button }, index) => (
+        {buttons.map(({ href, label }, index) => (
           <Button
             as="a"
             href={href}
             size="lg"
-            variant={button.variant ?? (index === 0 ? "default" : "secondary")}
-            {...button}
+            variant={index === 0 ? "default" : "secondary"}
           >
             {label}
           </Button>
diff --git a/src/components/blocks/hero-9.astro b/src/components/blocks/hero-9.astro
index cd0166fc7..832682606 100644
--- a/src/components/blocks/hero-9.astro
+++ b/src/components/blocks/hero-9.astro
@@ -22,7 +22,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   socialProof: {
     avatars: {
@@ -69,13 +68,12 @@ const {
         ))}
       </ul>
       <div class="flex flex-wrap gap-3">
-        {buttons.map(({ href, label, ...button }, index) => (
+        {buttons.map(({ href, label }, index) => (
           <Button
             as="a"
             href={href}
             size="lg"
-            variant={button.variant ?? (index === 0 ? "default" : "secondary")}
-            {...button}
+            variant={index === 0 ? "default" : "secondary"}
           >
             {label}
           </Button>
diff --git a/src/components/blocks/pricing-1.astro b/src/components/blocks/pricing-1.astro
index 73d4978d7..9a0388d29 100644
--- a/src/components/blocks/pricing-1.astro
+++ b/src/components/blocks/pricing-1.astro
@@ -36,7 +36,6 @@ type Props = HTMLAttributes<"section"> & {
     button: {
       label: string
       href: string
-      variant?: "default" | "outline" | "secondary" | "ghost"
     }
   }[]
 }
@@ -83,9 +82,7 @@ const { class: className, title, description, plans, ...props } = Astro.props
             <Button
               as="a"
               href={plan.button.href}
-              variant={
-                plan.button.variant ?? (plan.featured ? "default" : "outline")
-              }
+              variant={plan.featured ? "default" : "outline"}
               class="w-full"
             >
               {plan.button.label}
diff --git a/src/components/blocks/pricing-2.astro b/src/components/blocks/pricing-2.astro
index fcf9bea9c..1545f9a47 100644
--- a/src/components/blocks/pricing-2.astro
+++ b/src/components/blocks/pricing-2.astro
@@ -35,7 +35,6 @@ type Props = HTMLAttributes<"section"> & {
     button: {
       label: string
       href: string
-      variant?: "default" | "outline" | "secondary" | "ghost"
     }
   }[]
 }
@@ -79,9 +78,7 @@ const { class: className, title, description, plans, ...props } = Astro.props
             <Button
               as="a"
               href={plan.button.href}
-              variant={
-                plan.button.variant ?? (index === 0 ? "outline" : "default")
-              }
+              variant={index === 0 ? "outline" : "default"}
               class="w-full"
             >
               {plan.button.label}
diff --git a/src/components/blocks/pricing-3.astro b/src/components/blocks/pricing-3.astro
index ee079985f..6bd95de12 100644
--- a/src/components/blocks/pricing-3.astro
+++ b/src/components/blocks/pricing-3.astro
@@ -36,7 +36,6 @@ type Props = HTMLAttributes<"section"> & {
     button: {
       label: string
       href: string
-      variant?: "default" | "outline" | "secondary" | "ghost"
     }
   }
 }
@@ -79,12 +78,7 @@ const {
         </ul>
       </CardContent>
       <CardFooter>
-        <Button
-          as="a"
-          href={offer.button.href}
-          variant={offer.button.variant ?? "default"}
-          class="w-full"
-        >
+        <Button as="a" href={offer.button.href} class="w-full">
           {offer.button.label}
         </Button>
       </CardFooter>
diff --git a/src/components/blocks/product-1.astro b/src/components/blocks/product-1.astro
index 91cfb863e..80b39aad3 100644
--- a/src/components/blocks/product-1.astro
+++ b/src/components/blocks/product-1.astro
@@ -26,7 +26,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
 }
 
@@ -64,8 +63,12 @@ const {
       </Price>
       <p class="border-y py-4 text-sm leading-7">{note}</p>
       <div class="flex flex-wrap gap-3">
-        {buttons.map(({ href, label, ...button }) => (
-          <Button as="a" href={href} variant={button.variant}>
+        {buttons.map(({ href, label }, index) => (
+          <Button
+            as="a"
+            href={href}
+            variant={index === 0 ? "default" : "outline"}
+          >
             {label}
           </Button>
         ))}
diff --git a/src/components/blocks/products-4.astro b/src/components/blocks/products-4.astro
index 5a32af371..f98c3ec7e 100644
--- a/src/components/blocks/products-4.astro
+++ b/src/components/blocks/products-4.astro
@@ -25,7 +25,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   products: {
     image: {
@@ -62,8 +61,8 @@ const {
         </p>
       </div>
       <div class="flex flex-shrink-0 flex-wrap gap-3">
-        {buttons.map(({ href, label, ...button }) => (
-          <Button as="a" href={href} variant={button.variant}>
+        {buttons.map(({ href, label }) => (
+          <Button as="a" href={href}>
             {label}
           </Button>
         ))}
diff --git a/src/components/blocks/products-5.astro b/src/components/blocks/products-5.astro
index 42a8c15f8..2ec35a152 100644
--- a/src/components/blocks/products-5.astro
+++ b/src/components/blocks/products-5.astro
@@ -26,7 +26,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   products: {
     image: {
@@ -59,8 +58,8 @@ const {
       <Badge variant="secondary">{badge}</Badge>
       <SectionTitle class="mt-4">{title}</SectionTitle>
       <div class="mt-4 flex flex-wrap justify-center gap-3">
-        {buttons.map(({ href, label, ...button }) => (
-          <Button as="a" href={href} variant={button.variant}>
+        {buttons.map(({ href, label }) => (
+          <Button as="a" href={href}>
             {label}
           </Button>
         ))}
diff --git a/src/components/blocks/services-1.astro b/src/components/blocks/services-1.astro
index 347130e6c..33c30684e 100644
--- a/src/components/blocks/services-1.astro
+++ b/src/components/blocks/services-1.astro
@@ -20,7 +20,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   services: {
     image?: {
@@ -53,8 +52,8 @@ const {
       </div>
       {buttons && buttons.length > 0 && (
         <div class="flex flex-wrap gap-3">
-          {buttons.map(({ href, label, ...button }) => (
-            <Button as="a" href={href} variant={button.variant}>
+          {buttons.map(({ href, label }) => (
+            <Button as="a" href={href} variant="outline">
               {label}
             </Button>
           ))}
diff --git a/src/components/blocks/services-2.astro b/src/components/blocks/services-2.astro
index ba99aa695..94611c9b1 100644
--- a/src/components/blocks/services-2.astro
+++ b/src/components/blocks/services-2.astro
@@ -20,7 +20,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   services: {
     image?: {
@@ -60,8 +59,12 @@ const {
       )}
       {buttons && buttons.length > 0 && (
         <div class="mt-6 flex flex-wrap justify-center gap-3">
-          {buttons.map(({ href, label, ...button }) => (
-            <Button as="a" href={href} variant={button.variant}>
+          {buttons.map(({ href, label }, index) => (
+            <Button
+              as="a"
+              href={href}
+              variant={index === 0 ? "default" : "outline"}
+            >
               {label}
             </Button>
           ))}
diff --git a/src/components/blocks/services-3.astro b/src/components/blocks/services-3.astro
index c9fbd6641..8a9d773ce 100644
--- a/src/components/blocks/services-3.astro
+++ b/src/components/blocks/services-3.astro
@@ -20,7 +20,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   services: {
     image?: {
@@ -59,8 +58,12 @@ const {
       )}
       {buttons && buttons.length > 0 && (
         <div class="mt-6 flex flex-wrap justify-center gap-3">
-          {buttons.map(({ href, label, ...button }) => (
-            <Button as="a" href={href} variant={button.variant}>
+          {buttons.map(({ href, label }, index) => (
+            <Button
+              as="a"
+              href={href}
+              variant={index === 0 ? "default" : "outline"}
+            >
               {label}
             </Button>
           ))}
diff --git a/src/components/blocks/services-4.astro b/src/components/blocks/services-4.astro
index c533b2013..5535a8145 100644
--- a/src/components/blocks/services-4.astro
+++ b/src/components/blocks/services-4.astro
@@ -19,7 +19,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   services: {
     image?: {
@@ -55,8 +54,12 @@ const {
       </div>
       {buttons && buttons.length > 0 && (
         <div class="flex flex-wrap gap-3">
-          {buttons.map(({ href, label, ...button }) => (
-            <Button as="a" href={href} variant={button.variant}>
+          {buttons.map(({ href, label }, index) => (
+            <Button
+              as="a"
+              href={href}
+              variant={index === 0 ? "default" : "outline"}
+            >
               {label}
             </Button>
           ))}
diff --git a/src/components/blocks/services-5.astro b/src/components/blocks/services-5.astro
index cd133ee85..4e2ddd6dc 100644
--- a/src/components/blocks/services-5.astro
+++ b/src/components/blocks/services-5.astro
@@ -19,7 +19,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   services: {
     icon?: string
@@ -52,8 +51,12 @@ const {
       )}
       {buttons && buttons.length > 0 && (
         <div class="mt-6 flex flex-wrap justify-center gap-3">
-          {buttons.map(({ href, label, ...button }) => (
-            <Button as="a" href={href} variant={button.variant}>
+          {buttons.map(({ href, label }, index) => (
+            <Button
+              as="a"
+              href={href}
+              variant={index === 0 ? "default" : "outline"}
+            >
               {label}
             </Button>
           ))}
diff --git a/src/components/blocks/services-6.astro b/src/components/blocks/services-6.astro
index 34c6705cb..318d70306 100644
--- a/src/components/blocks/services-6.astro
+++ b/src/components/blocks/services-6.astro
@@ -17,7 +17,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   services: {
     image?: {
@@ -55,8 +54,12 @@ const {
       )}
       {buttons && buttons.length > 0 && (
         <div class="mt-6 flex flex-wrap gap-3">
-          {buttons.map(({ href, label, ...button }) => (
-            <Button as="a" href={href} variant={button.variant}>
+          {buttons.map(({ href, label }, index) => (
+            <Button
+              as="a"
+              href={href}
+              variant={index === 0 ? "default" : "outline"}
+            >
               {label}
             </Button>
           ))}
diff --git a/src/components/blocks/services-7.astro b/src/components/blocks/services-7.astro
index a918c9dde..c1224cabd 100644
--- a/src/components/blocks/services-7.astro
+++ b/src/components/blocks/services-7.astro
@@ -21,7 +21,6 @@ type Props = HTMLAttributes<"section"> & {
   buttons?: {
     label: string
     href: string
-    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
   services: {
     image?: {
@@ -60,8 +59,12 @@ const {
       </div>
       {buttons && buttons.length > 0 && (
         <div class="flex flex-wrap gap-3">
-          {buttons.map(({ href, label, ...button }) => (
-            <Button as="a" href={href} variant={button.variant}>
+          {buttons.map(({ href, label }, index) => (
+            <Button
+              as="a"
+              href={href}
+              variant={index === 0 ? "default" : "outline"}
+            >
               {label}
             </Button>
           ))}
diff --git a/src/content/globals/en.yaml b/src/content/globals/en.yaml
index cdafc8ef9..a31c94711 100644
--- a/src/content/globals/en.yaml
+++ b/src/content/globals/en.yaml
@@ -212,4 +212,3 @@ docs:
     button:
       label: Star on GitHub
       href: https://github.com/fulldotdev/ui
-      variant: outline
diff --git a/src/content/pages/blocks/banner.mdx b/src/content/pages/blocks/banner.mdx
index 436de9480..33f70c4de 100644
--- a/src/content/pages/blocks/banner.mdx
+++ b/src/content/pages/blocks/banner.mdx
@@ -26,7 +26,7 @@ import Banner2Block from "@/components/blocks/banner-2.astro"
   description="Floating banners work well for launch moments, limited promos, and product announcements."
   buttons={[
     { label: "Get started", href: "#" },
-    { label: "Learn more", href: "#", variant: "outline" },
+    { label: "Learn more", href: "#" },
   ]}
 />
 ```
diff --git a/src/content/pages/blocks/content.mdx b/src/content/pages/blocks/content.mdx
index e93f1df17..0d4a2c87a 100644
--- a/src/content/pages/blocks/content.mdx
+++ b/src/content/pages/blocks/content.mdx
@@ -20,7 +20,7 @@ import Content1Block from "@/components/blocks/content-1.astro"
   ]}
   buttons={[
     { label: "Get started", href: "#" },
-    { label: "Learn more", href: "#", variant: "secondary" },
+    { label: "Learn more", href: "#" },
   ]}
 />
 ```
@@ -40,7 +40,7 @@ import Content2Block from "@/components/blocks/content-2.astro"
   ]}
   buttons={[
     { label: "Get started", href: "#" },
-    { label: "Learn more", href: "#", variant: "secondary" },
+    { label: "Learn more", href: "#" },
   ]}
 />
 ```
@@ -55,7 +55,7 @@ import Content3Block from "@/components/blocks/content-3.astro"
   description="This variation uses a spread layout with title and description on the left, action buttons on the right, and a prominent full-width image below."
   buttons={[
     { label: "Get started", href: "#" },
-    { label: "Learn more", href: "#", variant: "secondary" },
+    { label: "Learn more", href: "#" },
   ]}
 />
 ```
@@ -75,7 +75,7 @@ import Content4Block from "@/components/blocks/content-4.astro"
   ]}
   buttons={[
     { label: "Get started", href: "#" },
-    { label: "Learn more", href: "#", variant: "secondary" },
+    { label: "Learn more", href: "#" },
   ]}
 />
 ```
diff --git a/src/content/pages/blocks/cta.mdx b/src/content/pages/blocks/cta.mdx
index 8fde35cb8..ede57c9b2 100644
--- a/src/content/pages/blocks/cta.mdx
+++ b/src/content/pages/blocks/cta.mdx
@@ -15,11 +15,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
   description="Use a centered CTA when the rest of the page already did the explaining and the final section needs one clear invitation."
   buttons={[
     { label: "Start project", href: "/docs/" },
-    {
-      label: "Browse components",
-      href: "/components/",
-      variant: "secondary",
-    },
+    { label: "Browse components", href: "/components/" },
   ]}
   socialProof={{
     avatars: [
@@ -45,11 +41,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
   description="A split CTA works well when the message needs a little more narrative and the actions should stay visually distinct."
   buttons={[
     { label: "See block library", href: "/blocks/" },
-    {
-      label: "Install primitives",
-      href: "/docs/installation/",
-      variant: "outline",
-    },
+    { label: "Install primitives", href: "/docs/installation/" },
   ]}
   socialProof={{
     avatars: [
@@ -74,11 +66,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
   description="This spread CTA is useful at the end of feature sections or product comparisons where the surface should feel contained yet spacious."
   buttons={[
     { label: "Use Section", href: "/components/section/" },
-    {
-      label: "Inspect Card",
-      href: "/components/card/",
-      variant: "secondary",
-    },
+    { label: "Inspect Card", href: "/components/card/" },
   ]}
   socialProof={{
     avatars: [
@@ -104,11 +92,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
   description="A background-image CTA helps the final section feel like a real destination instead of just another block in the stack."
   buttons={[
     { label: "Explore blocks", href: "/blocks/" },
-    {
-      label: "Button API",
-      href: "/components/button/",
-      variant: "outline",
-    },
+    { label: "Button API", href: "/components/button/" },
   ]}
   socialProof={{
     avatars: [
@@ -137,11 +121,7 @@ import Cta5Block from "@/components/blocks/cta-5.astro"
   ]}
   buttons={[
     { label: "Read the docs", href: "/docs/" },
-    {
-      label: "Feature examples",
-      href: "/blocks/features/",
-      variant: "outline",
-    },
+    { label: "Feature examples", href: "/blocks/features/" },
   ]}
 />
 ```
@@ -157,11 +137,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
   description="Use this version when the page needs a different rhythm. The image leads, giving the text a supporting role."
   buttons={[
     { label: "Browse blocks", href: "/blocks/" },
-    {
-      label: "Component docs",
-      href: "/components/",
-      variant: "outline",
-    },
+    { label: "Component docs", href: "/components/" },
   ]}
   socialProof={{
     avatars: [
@@ -186,11 +162,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
   description="This centered CTA with a tinted background works when the section needs to feel distinct from the surrounding content without being too bold."
   buttons={[
     { label: "Layout docs", href: "/components/layout/" },
-    {
-      label: "Sidebar docs",
-      href: "/components/sidebar/",
-      variant: "secondary",
-    },
+    { label: "Sidebar docs", href: "/components/sidebar/" },
   ]}
   socialProof={{
     avatars: [
@@ -214,11 +186,7 @@ import Cta8Block from "@/components/blocks/cta-8.astro"
   description="Some pages need a bold final section. Others only need a quiet nudge. This minimal version with a subtle glow works for the latter."
   buttons={[
     { label: "Hero variants", href: "/blocks/hero/" },
-    {
-      label: "Pricing variants",
-      href: "/blocks/pricing/",
-      variant: "outline",
-    },
+    { label: "Pricing variants", href: "/blocks/pricing/" },
   ]}
 />
 ```
diff --git a/src/content/pages/blocks/doc.mdx b/src/content/pages/blocks/doc.mdx
index 49140a5e4..c83b7f670 100644
--- a/src/content/pages/blocks/doc.mdx
+++ b/src/content/pages/blocks/doc.mdx
@@ -21,11 +21,7 @@ import Doc1Block from "@/components/blocks/doc-1.astro"
   callout={{
     description:
       "Command menus work best when actions use short labels and predictable grouping.",
-    button: {
-      label: "View examples",
-      href: "/components/command/",
-      variant: "outline",
-    },
+    button: { label: "View examples", href: "/components/command/" },
   }}
   previousPage={{
     href: "/components/combobox/",
diff --git a/src/content/pages/blocks/faqs.mdx b/src/content/pages/blocks/faqs.mdx
index b119ceb90..7041794cf 100644
--- a/src/content/pages/blocks/faqs.mdx
+++ b/src/content/pages/blocks/faqs.mdx
@@ -13,8 +13,8 @@ import FaqBlock from "@/components/blocks/faqs-1.astro"
   title="Frequently asked questions"
   description="Everything you need to know about our product. Can't find the answer you're looking for? Reach out to our support team."
   buttons={[
-    { label: "Contact support", href: "#", variant: "default" },
-    { label: "Documentation", href: "#", variant: "outline" },
+    { label: "Contact support", href: "#" },
+    { label: "Documentation", href: "#" },
   ]}
   faqs={[
     {
@@ -54,8 +54,8 @@ import Faqs2Block from "@/components/blocks/faqs-2.astro"
   title="Questions & answers"
   description="Find quick answers to the questions we hear most from teams evaluating the product."
   buttons={[
-    { label: "Get started", href: "#", variant: "default" },
-    { label: "Talk to sales", href: "#", variant: "outline" },
+    { label: "Get started", href: "#" },
+    { label: "Talk to sales", href: "#" },
   ]}
   faqs={[
     {
diff --git a/src/content/pages/blocks/features.mdx b/src/content/pages/blocks/features.mdx
index 0f15402b6..5cc9e2d33 100644
--- a/src/content/pages/blocks/features.mdx
+++ b/src/content/pages/blocks/features.mdx
@@ -14,7 +14,7 @@ import Features1Block from "@/components/blocks/features-1.astro"
   description="A complete set of tools designed to streamline your workflow and help your team ship with confidence."
   buttons={[
     { label: "Get started", href: "#" },
-    { label: "Learn more", href: "#", variant: "outline" },
+    { label: "Learn more", href: "#" },
   ]}
   features={[
     {
@@ -150,7 +150,7 @@ import Features4Block from "@/components/blocks/features-4.astro"
   description="A sticky sidebar layout that keeps your headline visible while users explore feature cards at their own pace."
   buttons={[
     { label: "Get started", href: "#" },
-    { label: "View docs", href: "#", variant: "outline" },
+    { label: "View docs", href: "#" },
   ]}
   features={[
     {
@@ -248,7 +248,7 @@ import Features6Block from "@/components/blocks/features-6.astro"
   description="A clean text-only layout when features need to speak for themselves without icons or images."
   buttons={[
     { label: "Get started", href: "#" },
-    { label: "Learn more", href: "#", variant: "outline" },
+    { label: "Learn more", href: "#" },
   ]}
   features={[
     {
diff --git a/src/content/pages/blocks/header.mdx b/src/content/pages/blocks/header.mdx
index 9b2843f3a..9d47b594c 100644
--- a/src/content/pages/blocks/header.mdx
+++ b/src/content/pages/blocks/header.mdx
@@ -41,10 +41,9 @@ import HeaderBlock from "@/components/blocks/header-1.astro"
       label: "2.4k",
       href: "https://github.com/fulldotdev/ui",
       icon: "github",
-      variant: "ghost",
     },
-    { label: "Sign in", href: "#", variant: "ghost" },
-    { label: "Get started", href: "#", variant: "default" },
+    { label: "Sign in", href: "#" },
+    { label: "Get started", href: "#" },
   ]}
 />
 ```
@@ -66,8 +65,8 @@ import Header2Block from "@/components/blocks/header-2.astro"
     { label: "Blog", href: "#" },
   ]}
   buttons={[
-    { label: "Sign in", href: "#", variant: "ghost" },
-    { label: "Get started", href: "#", variant: "default" },
+    { label: "Sign in", href: "#" },
+    { label: "Get started", href: "#" },
   ]}
 />
 ```
@@ -92,10 +91,9 @@ import Header3Block from "@/components/blocks/header-3.astro"
       label: "GitHub",
       href: "https://github.com/fulldotdev/ui",
       icon: "github",
-      variant: "ghost",
     },
-    { label: "Roadmap", href: "#", variant: "ghost" },
-    { label: "Browse blocks", href: "#", variant: "default" },
+    { label: "Roadmap", href: "#" },
+    { label: "Browse blocks", href: "#" },
   ]}
 />
 ```
@@ -161,8 +159,8 @@ import placeholderImage from "@/assets/placeholder.svg"
     { label: "Customers", href: "#" },
   ]}
   buttons={[
-    { label: "Sign in", href: "#", variant: "ghost" },
-    { label: "Start trial", href: "#", variant: "default" },
+    { label: "Sign in", href: "#" },
+    { label: "Start trial", href: "#" },
   ]}
 />
 ```
@@ -234,8 +232,8 @@ import placeholderImage from "@/assets/placeholder.svg"
     { label: "Pricing", href: "#" },
   ]}
   buttons={[
-    { label: "Contact sales", href: "#", variant: "ghost" },
-    { label: "Get started", href: "#", variant: "default" },
+    { label: "Contact sales", href: "#" },
+    { label: "Get started", href: "#" },
   ]}
 />
 ```
diff --git a/src/content/pages/blocks/hero.mdx b/src/content/pages/blocks/hero.mdx
index d6984ce03..9b76e26db 100644
--- a/src/content/pages/blocks/hero.mdx
+++ b/src/content/pages/blocks/hero.mdx
@@ -15,12 +15,8 @@ import placeholderImage from "@/assets/placeholder.svg"
   description="Production-ready hero blocks, feature grids, and pricing layouts that drop into any Astro project."
   badge={{ label: "New in v0.9", href: "/docs/" }}
   buttons={[
-    { label: "Browse docs", href: "/docs/", variant: "default" },
-    {
-      label: "See components",
-      href: "/components/",
-      variant: "secondary",
-    },
+    { label: "Browse docs", href: "/docs/" },
+    { label: "See components", href: "/components/" },
   ]}
   image={{ src: placeholderImage, alt: "Product screenshot" }}
 />
@@ -46,8 +42,8 @@ import placeholderImage from "@/assets/placeholder.svg"
     text: "4.9 from 2,400+ developers",
   }}
   buttons={[
-    { label: "Get started", href: "/docs/", variant: "default" },
-    { label: "View blocks", href: "/blocks/", variant: "secondary" },
+    { label: "Get started", href: "/docs/" },
+    { label: "View blocks", href: "/blocks/" },
   ]}
   image={{ src: placeholderImage, alt: "Product screenshot" }}
 />
@@ -63,8 +59,8 @@ import placeholderImage from "@/assets/placeholder.svg"
   title="Ship landing pages in hours, not weeks"
   description="A bold hero with text centered over a full background image. Ideal for launches, events, and product announcements."
   buttons={[
-    { label: "Start building", href: "/docs/", variant: "default" },
-    { label: "See examples", href: "/blocks/", variant: "secondary" },
+    { label: "Start building", href: "/docs/" },
+    { label: "See examples", href: "/blocks/" },
   ]}
   image={{ src: placeholderImage, alt: "Abstract background" }}
 />
@@ -85,8 +81,8 @@ import placeholderImage from "@/assets/placeholder.svg"
     "Dark mode included",
   ]}
   buttons={[
-    { label: "Learn more", href: "/docs/", variant: "default" },
-    { label: "Contact sales", href: "#", variant: "secondary" },
+    { label: "Learn more", href: "/docs/" },
+    { label: "Contact sales", href: "#" },
   ]}
   image={{ src: placeholderImage, alt: "Abstract background" }}
 />
@@ -109,8 +105,8 @@ import placeholderImage from "@/assets/placeholder.svg"
     "Fully accessible and keyboard-navigable",
   ]}
   buttons={[
-    { label: "Get started", href: "/docs/", variant: "default" },
-    { label: "Components", href: "/components/", variant: "secondary" },
+    { label: "Get started", href: "/docs/" },
+    { label: "Components", href: "/components/" },
   ]}
   socialProof={{
     avatars: [
@@ -141,8 +137,8 @@ import placeholderImage from "@/assets/placeholder.svg"
     "Dark mode included",
   ]}
   buttons={[
-    { label: "Browse blocks", href: "/blocks/", variant: "default" },
-    { label: "Documentation", href: "/docs/", variant: "secondary" },
+    { label: "Browse blocks", href: "/blocks/" },
+    { label: "Documentation", href: "/docs/" },
   ]}
   socialProof={{
     avatars: [
@@ -173,8 +169,8 @@ import placeholderImage from "@/assets/placeholder.svg"
     "Image bleeds to the edge on desktop",
   ]}
   buttons={[
-    { label: "View demo", href: "#", variant: "default" },
-    { label: "Documentation", href: "/docs/", variant: "secondary" },
+    { label: "View demo", href: "#" },
+    { label: "Documentation", href: "/docs/" },
   ]}
   socialProof={{
     avatars: [
@@ -199,8 +195,8 @@ import placeholderImage from "@/assets/placeholder.svg"
   title="Let the image do the talking"
   description="Minimal text with maximum image. A 1:3 split where the product screenshot dominates and the message stays compact."
   buttons={[
-    { label: "Get started", href: "/docs/", variant: "default" },
-    { label: "Learn more", href: "#", variant: "secondary" },
+    { label: "Get started", href: "/docs/" },
+    { label: "Learn more", href: "#" },
   ]}
   image={{ src: placeholderImage, alt: "App screenshot" }}
 />
@@ -223,8 +219,8 @@ import placeholderImage from "@/assets/placeholder.svg"
     "Ideal for atmospheric pages",
   ]}
   buttons={[
-    { label: "Explore", href: "/docs/", variant: "default" },
-    { label: "View source", href: "#", variant: "secondary" },
+    { label: "Explore", href: "/docs/" },
+    { label: "View source", href: "#" },
   ]}
   socialProof={{
     avatars: [
@@ -250,8 +246,8 @@ import placeholderImage from "@/assets/placeholder.svg"
   title="A full-bleed background image hero with overlaid content"
   description="Content and actions spread across the top, with a full background image visible underneath through gradient masks."
   buttons={[
-    { label: "Start free", href: "/docs/", variant: "default" },
-    { label: "Book a demo", href: "#", variant: "secondary" },
+    { label: "Start free", href: "/docs/" },
+    { label: "Book a demo", href: "#" },
   ]}
   socialProof={{
     avatars: [
@@ -277,8 +273,8 @@ import placeholderImage from "@/assets/placeholder.svg"
   title="Centered content over a full background image"
   description="Content, buttons, and social proof centered vertically over a full-bleed background image with gradient masks."
   buttons={[
-    { label: "Get started", href: "/docs/", variant: "default" },
-    { label: "View pricing", href: "#", variant: "secondary" },
+    { label: "Get started", href: "/docs/" },
+    { label: "View pricing", href: "#" },
   ]}
   socialProof={{
     avatars: [
diff --git a/src/content/pages/blocks/index.mdx b/src/content/pages/blocks/index.mdx
index 472b8291f..87b768757 100644
--- a/src/content/pages/blocks/index.mdx
+++ b/src/content/pages/blocks/index.mdx
@@ -67,8 +67,8 @@ import HeaderBlock from "@/components/blocks/header-4.astro"
     { label: "Customers", href: "#" },
   ]}
   buttons={[
-    { label: "Sign in", href: "#", variant: "ghost" },
-    { label: "Start trial", href: "#", variant: "default" },
+    { label: "Sign in", href: "#" },
+    { label: "Start trial", href: "#" },
   ]}
 />
 ```
@@ -86,12 +86,8 @@ import placeholderImage from "@/assets/placeholder.svg"
   description="Use the Fulldev block library when you want a complete hero, FAQ, or CTA section with layout, rhythm, and visual structure already solved."
   badge={{ label: "Blocks", href: "/blocks/" }}
   buttons={[
-    { label: "Browse docs", href: "/docs/", variant: "default" },
-    {
-      label: "See components",
-      href: "/components/",
-      variant: "outline",
-    },
+    { label: "Browse docs", href: "/docs/" },
+    { label: "See components", href: "/components/" },
   ]}
   image={{ src: placeholderImage, alt: "Fulldev block preview" }}
 />
@@ -193,12 +189,8 @@ import CallToActionBlock from "@/components/blocks/cta-1.astro"
   title="Ship fuller page sections without switching patterns"
   description="The new Blocks layout keeps the docs authoring model, but the presentation is tuned for complete sections and larger visual slices."
   buttons={[
-    { label: "Start with docs", href: "/docs/", variant: "default" },
-    {
-      label: "View components",
-      href: "/components/",
-      variant: "outline",
-    },
+    { label: "Start with docs", href: "/docs/" },
+    { label: "View components", href: "/components/" },
   ]}
 />
 ```
diff --git a/src/content/pages/blocks/pricing.mdx b/src/content/pages/blocks/pricing.mdx
index a3bb7ecad..db12701ac 100644
--- a/src/content/pages/blocks/pricing.mdx
+++ b/src/content/pages/blocks/pricing.mdx
@@ -25,7 +25,7 @@ import Pricing1Block from "@/components/blocks/pricing-1.astro"
         "Community support",
         "1 GB storage",
       ],
-      button: { label: "Get started", href: "/docs/", variant: "outline" },
+      button: { label: "Get started", href: "/docs/" },
     },
     {
       name: "Team",
@@ -56,7 +56,7 @@ import Pricing1Block from "@/components/blocks/pricing-1.astro"
         "Unlimited storage",
         "SSO and audit logs",
       ],
-      button: { label: "Contact sales", href: "/docs/", variant: "outline" },
+      button: { label: "Contact sales", href: "/docs/" },
     },
   ]}
 />
@@ -83,7 +83,7 @@ import Pricing2Block from "@/components/blocks/pricing-2.astro"
         "Email support",
         "2 GB storage",
       ],
-      button: { label: "Start free trial", href: "/docs/", variant: "outline" },
+      button: { label: "Start free trial", href: "/docs/" },
     },
     {
       name: "Pro",
diff --git a/src/content/pages/blocks/product.mdx b/src/content/pages/blocks/product.mdx
index 83a4716b8..ccaa33cec 100644
--- a/src/content/pages/blocks/product.mdx
+++ b/src/content/pages/blocks/product.mdx
@@ -25,8 +25,8 @@ import placeholderImage from "@/assets/placeholder.svg"
   }}
   note="Includes reusable launch sections, content layouts, and shared visual rules for docs and marketing pages."
   buttons={[
-    { label: "Pricing", href: "/blocks/pricing/", variant: "default" },
-    { label: "Reviews", href: "/blocks/reviews/", variant: "outline" },
+    { label: "Pricing", href: "/blocks/pricing/" },
+    { label: "Reviews", href: "/blocks/reviews/" },
   ]}
 />
 ```
diff --git a/src/content/pages/blocks/products.mdx b/src/content/pages/blocks/products.mdx
index 7b315aea7..0fac61a5b 100644
--- a/src/content/pages/blocks/products.mdx
+++ b/src/content/pages/blocks/products.mdx
@@ -136,16 +136,8 @@ import placeholderImage from "@/assets/placeholder.svg"
   title="A product row with room for a collection-wide action"
   description="Each card can link to a deeper product page or serve as a compact collection overview."
   buttons={[
-    {
-      label: "View all products",
-      href: "/blocks/product/",
-      variant: "default",
-    },
-    {
-      label: "Compare plans",
-      href: "/blocks/pricing/",
-      variant: "outline",
-    },
+    { label: "View all products", href: "/blocks/product/" },
+    { label: "Compare plans", href: "/blocks/pricing/" },
   ]}
   products={[
     {
@@ -191,13 +183,7 @@ import placeholderImage from "@/assets/placeholder.svg"
 <Products5Block
   badge="Featured"
   title="Image-centric product grid with hover effects"
-  buttons={[
-    {
-      label: "Featured product",
-      href: "/blocks/product/",
-      variant: "default",
-    },
-  ]}
+  buttons={[{ label: "Featured product", href: "/blocks/product/" }]}
   products={[
     {
       image: {
diff --git a/src/content/pages/blocks/services.mdx b/src/content/pages/blocks/services.mdx
index c1d7179eb..ad2b4590e 100644
--- a/src/content/pages/blocks/services.mdx
+++ b/src/content/pages/blocks/services.mdx
@@ -13,7 +13,7 @@ import PlaceholderImage from "@/assets/placeholder.svg"
 <Services1Block
   badge="What we do"
   title="A simple services section for agencies and internal platform teams"
-  buttons={[{ label: "View all services", href: "#", variant: "outline" }]}
+  buttons={[{ label: "View all services", href: "#" }]}
   services={[
     {
       image: { src: PlaceholderImage, alt: "Page strategy" },
@@ -101,8 +101,8 @@ import PlaceholderImage from "@/assets/placeholder.svg"
   title="Bold image overlays for when positioning matters"
   description="This style is useful for advisory or studio work where the offer should feel premium and deliberate."
   buttons={[
-    { label: "Start a project", href: "#", variant: "default" },
-    { label: "View case studies", href: "#", variant: "outline" },
+    { label: "Start a project", href: "#" },
+    { label: "View case studies", href: "#" },
   ]}
   services={[
     {
@@ -146,7 +146,7 @@ import PlaceholderImage from "@/assets/placeholder.svg"
 <Services4Block
   title="Clean cards when each service speaks for itself"
   description="A minimal approach where the image and title do the heavy lifting."
-  buttons={[{ label: "Get started", href: "#", variant: "default" }]}
+  buttons={[{ label: "Get started", href: "#" }]}
   services={[
     {
       image: { src: PlaceholderImage, alt: "Research" },
@@ -229,8 +229,8 @@ import PlaceholderImage from "@/assets/placeholder.svg"
   title="Use a side description with overlay cards when the offer should feel premium"
   description="A sticky sidebar provides context while the service cards scroll into view."
   buttons={[
-    { label: "Start a project", href: "#", variant: "default" },
-    { label: "View work", href: "#", variant: "outline" },
+    { label: "Start a project", href: "#" },
+    { label: "View work", href: "#" },
   ]}
   services={[
     {
@@ -275,8 +275,8 @@ import PlaceholderImage from "@/assets/placeholder.svg"
   title="A featured layout where the first service takes center stage"
   description="This layout uses a larger featured card alongside smaller cards for a hierarchy-driven grid."
   buttons={[
-    { label: "Start conversation", href: "#", variant: "default" },
-    { label: "Read reviews", href: "#", variant: "outline" },
+    { label: "Start conversation", href: "#" },
+    { label: "Read reviews", href: "#" },
   ]}
   services={[
     {
diff --git a/src/content/pages/index.mdx b/src/content/pages/index.mdx
index 1433b25a1..93c8c8d2e 100644
--- a/src/content/pages/index.mdx
+++ b/src/content/pages/index.mdx
@@ -259,11 +259,7 @@ import avatarSpjpgrd from "@/assets/avatar-contributor-spjpgrd.webp"
   description="Install source-owned primitives, compose complete sections, and adapt every file in your project."
   buttons={[
     { label: "Read the docs", href: "/docs/" },
-    {
-      label: "Browse components",
-      href: "/components/",
-      variant: "outline",
-    },
+    { label: "Browse components", href: "/components/" },
   ]}
   socialProof={{
     avatars: [
diff --git a/src/schemas/global.ts b/src/schemas/global.ts
index a6e1a121f..e6a24bcad 100644
--- a/src/schemas/global.ts
+++ b/src/schemas/global.ts
@@ -1,7 +1,7 @@
 import { type SchemaContext } from "astro:content"
 import { z } from "astro/zod"
 
-import { buttonSchema, linkSchema } from "@/schemas/shared"
+import { linkSchema } from "@/schemas/shared"
 
 const nestedLinkSchema = linkSchema.extend({
   links: linkSchema.array().optional(),
@@ -37,7 +37,7 @@ export const globalSchema = ({ image }: SchemaContext) =>
       .object({
         callout: z.object({
           description: z.string(),
-          button: buttonSchema,
+          button: linkSchema,
         }),
       })
       .optional(),
diff --git a/src/schemas/shared.ts b/src/schemas/shared.ts
index 7b68a0db1..c80af111f 100644
--- a/src/schemas/shared.ts
+++ b/src/schemas/shared.ts
@@ -6,13 +6,6 @@ export const linkSchema = z.object({
   href: z.string(),
 })
 
-export const buttonSchema = z.object({
-  label: z.string(),
-  href: z.string(),
-  icon: z.string().optional(),
-  variant: z.enum(["default", "outline", "secondary", "ghost"]).optional(),
-})
-
 export const imageSchema = ({ image }: SchemaContext) =>
   z.object({
     src: image(),

From d5d7e0e8852e9a58d55deeb6e41d3e6dd7d9a979 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 15:56:23 +0200
Subject: [PATCH 19/60] Require fixed block sections and drop props no caller
 uses

Badges, headings, descriptions, social proof, feature lists, button
rows and item labels that belong to each block's design are now
required and render directly. Article badges and the Features2/5 and
Services2/5 button rows had no caller and are removed. CTA1 social
proof and FAQ1 buttons stay optional because real callers omit them.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/blocks/article-1.astro  |  8 ---
 src/components/blocks/article-2.astro  |  4 --
 src/components/blocks/articles-1.astro | 16 +-----
 src/components/blocks/articles-2.astro | 11 +---
 src/components/blocks/articles-3.astro |  9 +---
 src/components/blocks/articles-4.astro | 19 +------
 src/components/blocks/banner-1.astro   | 18 +++----
 src/components/blocks/banner-2.astro   | 28 +++++-----
 src/components/blocks/blocks-1.astro   | 10 ++--
 src/components/blocks/content-1.astro  | 48 ++++++++---------
 src/components/blocks/content-2.astro  | 48 ++++++++---------
 src/components/blocks/content-3.astro  | 28 +++++-----
 src/components/blocks/content-4.astro  | 48 ++++++++---------
 src/components/blocks/cta-1.astro      | 28 +++++-----
 src/components/blocks/cta-2.astro      | 64 +++++++++++------------
 src/components/blocks/cta-3.astro      | 64 +++++++++++------------
 src/components/blocks/cta-4.astro      | 62 +++++++++++-----------
 src/components/blocks/cta-5.astro      | 48 ++++++++---------
 src/components/blocks/cta-6.astro      | 64 +++++++++++------------
 src/components/blocks/cta-7.astro      | 72 ++++++++++++--------------
 src/components/blocks/cta-8.astro      | 28 +++++-----
 src/components/blocks/doc-1.astro      | 10 ++--
 src/components/blocks/faqs-2.astro     | 28 +++++-----
 src/components/blocks/faqs-3.astro     |  4 +-
 src/components/blocks/features-1.astro | 26 +++++-----
 src/components/blocks/features-2.astro | 27 +---------
 src/components/blocks/features-4.astro | 26 +++++-----
 src/components/blocks/features-5.astro | 27 +---------
 src/components/blocks/features-6.astro | 26 +++++-----
 src/components/blocks/footer-1.astro   | 30 +++++------
 src/components/blocks/footer-2.astro   | 60 ++++++++++-----------
 src/components/blocks/footer-3.astro   | 60 ++++++++++-----------
 src/components/blocks/hero-1.astro     | 10 ++--
 src/components/blocks/logos-1.astro    |  4 +-
 src/components/blocks/logos-2.astro    | 16 +++---
 src/components/blocks/pricing-1.astro  |  4 +-
 src/components/blocks/pricing-3.astro  |  8 +--
 src/components/blocks/reviews-1.astro  | 16 +++---
 src/components/blocks/reviews-3.astro  | 16 +++---
 src/components/blocks/reviews-4.astro  | 16 +++---
 src/components/blocks/reviews-5.astro  | 16 +++---
 src/components/blocks/services-1.astro | 32 +++++-------
 src/components/blocks/services-2.astro | 62 +++++++---------------
 src/components/blocks/services-3.astro | 60 ++++++++++-----------
 src/components/blocks/services-4.astro | 36 ++++++-------
 src/components/blocks/services-5.astro | 37 +++----------
 src/components/blocks/services-6.astro | 40 +++++++-------
 src/components/blocks/services-7.astro | 50 ++++++++----------
 48 files changed, 600 insertions(+), 872 deletions(-)

diff --git a/src/components/blocks/article-1.astro b/src/components/blocks/article-1.astro
index 7a34cb513..4fe85c629 100644
--- a/src/components/blocks/article-1.astro
+++ b/src/components/blocks/article-1.astro
@@ -5,11 +5,9 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Badge } from "@/components/ui/badge"
 import { Section, SectionContainer } from "@/components/ui/section"
 
 type Props = HTMLAttributes<"section"> & {
-  badge?: string
   title: string
   description: string
   author: {
@@ -26,7 +24,6 @@ type Props = HTMLAttributes<"section"> & {
 
 const {
   class: className,
-  badge,
   title,
   description,
   author,
@@ -38,11 +35,6 @@ const {
 <Section class={cn("", className)} {...props}>
   <SectionContainer class="mx-auto max-w-2xl gap-8">
     <div class="mx-auto flex w-full max-w-2xl flex-col gap-6">
-      {badge && (
-        <Badge variant="secondary" class="w-fit">
-          {badge}
-        </Badge>
-      )}
       <div class="flex flex-col gap-4">
         <h1 class="text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl">
           {title}
diff --git a/src/components/blocks/article-2.astro b/src/components/blocks/article-2.astro
index 601fbf88e..dc782110d 100644
--- a/src/components/blocks/article-2.astro
+++ b/src/components/blocks/article-2.astro
@@ -5,11 +5,9 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Badge } from "@/components/ui/badge"
 import { Section, SectionContainer } from "@/components/ui/section"
 
 type Props = HTMLAttributes<"section"> & {
-  badge?: string
   title: string
   description: string
   author: {
@@ -27,7 +25,6 @@ type Props = HTMLAttributes<"section"> & {
 
 const {
   class: className,
-  badge,
   title,
   description,
   author,
@@ -39,7 +36,6 @@ const {
 <Section class={cn("", className)} {...props}>
   <SectionContainer class="mx-auto max-w-2xl items-center gap-8 text-center">
     <div class="mx-auto flex w-full max-w-2xl flex-col items-center gap-6">
-      {badge && <Badge variant="secondary">{badge}</Badge>}
       <div class="flex flex-col gap-4">
         <h1 class="text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl">
           {title}
diff --git a/src/components/blocks/articles-1.astro b/src/components/blocks/articles-1.astro
index 0ff7a4abc..806b1bea9 100644
--- a/src/components/blocks/articles-1.astro
+++ b/src/components/blocks/articles-1.astro
@@ -5,7 +5,6 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Badge } from "@/components/ui/badge"
 import {
   Section,
   SectionContainer,
@@ -13,7 +12,6 @@ import {
 } from "@/components/ui/section"
 
 type Props = HTMLAttributes<"section"> & {
-  badge?: string
   title: string
   description: string
   articles: {
@@ -34,24 +32,12 @@ type Props = HTMLAttributes<"section"> & {
   }[]
 }
 
-const {
-  class: className,
-  badge,
-  title,
-  description,
-  articles,
-  ...props
-} = Astro.props
+const { class: className, title, description, articles, ...props } = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
   <SectionContainer class="gap-8">
     <div class="flex max-w-2xl flex-col gap-4">
-      {badge && (
-        <Badge variant="secondary" class="w-fit">
-          {badge}
-        </Badge>
-      )}
       <SectionTitle>{title}</SectionTitle>
       <p class="text-muted-foreground text-base leading-7">{description}</p>
     </div>
diff --git a/src/components/blocks/articles-2.astro b/src/components/blocks/articles-2.astro
index 2ae01d182..6c3cb9277 100644
--- a/src/components/blocks/articles-2.astro
+++ b/src/components/blocks/articles-2.astro
@@ -5,11 +5,9 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Badge } from "@/components/ui/badge"
 import { Section, SectionContainer } from "@/components/ui/section"
 
 type Props = HTMLAttributes<"section"> & {
-  badge?: string
   title: string
   description: string
   featured: {
@@ -48,7 +46,6 @@ type Props = HTMLAttributes<"section"> & {
 
 const {
   class: className,
-  badge,
   title,
   description,
   featured,
@@ -60,13 +57,7 @@ const {
 <Section class={cn("", className)} {...props}>
   <SectionContainer class="gap-8">
     <div class="mx-auto max-w-2xl text-center">
-      {badge && <Badge variant="secondary">{badge}</Badge>}
-      <h2
-        class={cn(
-          "text-3xl font-semibold tracking-tight text-balance sm:text-4xl",
-          badge && "mt-4"
-        )}
-      >
+      <h2 class="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
         {title}
       </h2>
       <p class="text-muted-foreground mt-2 text-base leading-7 text-balance">
diff --git a/src/components/blocks/articles-3.astro b/src/components/blocks/articles-3.astro
index 1ab654bd1..49a7875e6 100644
--- a/src/components/blocks/articles-3.astro
+++ b/src/components/blocks/articles-3.astro
@@ -5,7 +5,6 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Badge } from "@/components/ui/badge"
 import {
   Section,
   SectionContainer,
@@ -13,7 +12,6 @@ import {
 } from "@/components/ui/section"
 
 type Props = HTMLAttributes<"section"> & {
-  badge?: string
   title: string
   articles: {
     image: {
@@ -33,18 +31,13 @@ type Props = HTMLAttributes<"section"> & {
   }[]
 }
 
-const { class: className, badge, title, articles, ...props } = Astro.props
+const { class: className, title, articles, ...props } = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
   <SectionContainer class="gap-8">
     <div class="flex flex-wrap items-end justify-between gap-4">
       <div class="flex flex-col gap-4">
-        {badge && (
-          <Badge variant="secondary" class="w-fit">
-            {badge}
-          </Badge>
-        )}
         <SectionTitle>{title}</SectionTitle>
       </div>
     </div>
diff --git a/src/components/blocks/articles-4.astro b/src/components/blocks/articles-4.astro
index 472884d01..7fd36bb9a 100644
--- a/src/components/blocks/articles-4.astro
+++ b/src/components/blocks/articles-4.astro
@@ -4,11 +4,9 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Badge } from "@/components/ui/badge"
 import { Section, SectionContainer } from "@/components/ui/section"
 
 type Props = HTMLAttributes<"section"> & {
-  badge?: string
   title: string
   description: string
   articles: {
@@ -25,26 +23,13 @@ type Props = HTMLAttributes<"section"> & {
   }[]
 }
 
-const {
-  class: className,
-  badge,
-  title,
-  description,
-  articles,
-  ...props
-} = Astro.props
+const { class: className, title, description, articles, ...props } = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
   <SectionContainer class="gap-8">
     <div class="mx-auto max-w-2xl text-center">
-      {badge && <Badge variant="secondary">{badge}</Badge>}
-      <h2
-        class={cn(
-          "text-3xl font-semibold tracking-tight text-balance sm:text-4xl",
-          badge && "mt-4"
-        )}
-      >
+      <h2 class="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
         {title}
       </h2>
       <p class="text-muted-foreground mt-2 text-base leading-7 text-balance">
diff --git a/src/components/blocks/banner-1.astro b/src/components/blocks/banner-1.astro
index a71fb9620..f048b36ee 100644
--- a/src/components/blocks/banner-1.astro
+++ b/src/components/blocks/banner-1.astro
@@ -8,7 +8,7 @@ import { Banner, BannerContainer } from "@/components/ui/banner"
 type Props = HTMLAttributes<"aside"> & {
   title: string
   description: string
-  link?: {
+  link: {
     label: string
     href: string
   }
@@ -28,14 +28,12 @@ const { class: className, title, description, link, ...props } = Astro.props
       <span class="mx-1.5 hidden opacity-50 sm:inline">&mdash;</span>{" "}
       <span class="opacity-80">{description}</span>
     </p>
-    {link && (
-      <a
-        href={link.href}
-        class="group/link inline-flex shrink-0 items-center gap-1 text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80"
-      >
-        {link.label}
-        <ArrowRightIcon class="size-3.5 transition-transform group-hover/link:translate-x-0.5" />
-      </a>
-    )}
+    <a
+      href={link.href}
+      class="group/link inline-flex shrink-0 items-center gap-1 text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80"
+    >
+      {link.label}
+      <ArrowRightIcon class="size-3.5 transition-transform group-hover/link:translate-x-0.5" />
+    </a>
   </BannerContainer>
 </Banner>
diff --git a/src/components/blocks/banner-2.astro b/src/components/blocks/banner-2.astro
index 08f263728..e07c5aae9 100644
--- a/src/components/blocks/banner-2.astro
+++ b/src/components/blocks/banner-2.astro
@@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button"
 type Props = HTMLAttributes<"aside"> & {
   title: string
   description: string
-  buttons?: {
+  buttons: {
     label: string
     href: string
   }[]
@@ -31,19 +31,17 @@ const { class: className, title, description, buttons, ...props } = Astro.props
       <p class="text-sm font-semibold">{title}</p>
       <p class="text-muted-foreground text-sm">{description}</p>
     </div>
-    {buttons && buttons.length > 0 && (
-      <div class="flex flex-wrap items-center gap-2">
-        {buttons.map(({ href, label }, index) => (
-          <Button
-            as="a"
-            href={href}
-            size="sm"
-            variant={index === 0 ? "default" : "outline"}
-          >
-            {label}
-          </Button>
-        ))}
-      </div>
-    )}
+    <div class="flex flex-wrap items-center gap-2">
+      {buttons.map(({ href, label }, index) => (
+        <Button
+          as="a"
+          href={href}
+          size="sm"
+          variant={index === 0 ? "default" : "outline"}
+        >
+          {label}
+        </Button>
+      ))}
+    </div>
   </BannerContainer>
 </Banner>
diff --git a/src/components/blocks/blocks-1.astro b/src/components/blocks/blocks-1.astro
index 6f223e22c..6222e7d68 100644
--- a/src/components/blocks/blocks-1.astro
+++ b/src/components/blocks/blocks-1.astro
@@ -28,7 +28,7 @@ import {
 
 type Props = HTMLAttributes<"div"> & {
   title: string
-  description?: string
+  description: string
   copyButton?: {
     id: string
     source: string
@@ -107,11 +107,9 @@ const openLinks = markdownUrl
         <TypographyH1 class="text-foreground text-left text-3xl tracking-tight sm:text-4xl">
           {title}
         </TypographyH1>
-        {description && (
-          <TypographyLead class="max-w-2xl text-base leading-7">
-            {description}
-          </TypographyLead>
-        )}
+        <TypographyLead class="max-w-2xl text-base leading-7">
+          {description}
+        </TypographyLead>
       </div>
       <div class="flex shrink-0 items-center gap-2 self-start">
         {showCopyButton && (
diff --git a/src/components/blocks/content-1.astro b/src/components/blocks/content-1.astro
index 489696942..a9575fd3a 100644
--- a/src/components/blocks/content-1.astro
+++ b/src/components/blocks/content-1.astro
@@ -17,8 +17,8 @@ import PlaceholderImage from "@/assets/placeholder.svg"
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
-  features?: string[]
-  buttons?: {
+  features: string[]
+  buttons: {
     label: string
     href: string
   }[]
@@ -45,30 +45,26 @@ const {
       <SectionTitle>{title}</SectionTitle>
       <SectionDescription>{description}</SectionDescription>
     </div>
-    {features && features.length > 0 && (
-      <ul class="flex flex-col gap-3">
-        {features.map((feature) => (
-          <li class="flex items-center gap-3 text-sm">
-            <CheckIcon class="text-primary size-4 shrink-0" />
-            {feature}
-          </li>
-        ))}
-      </ul>
-    )}
-    {buttons && buttons.length > 0 && (
-      <div class="flex flex-wrap gap-3">
-        {buttons.map(({ href, label }, index) => (
-          <Button
-            as="a"
-            href={href}
-            size="lg"
-            variant={index === 0 ? "default" : "secondary"}
-          >
-            {label}
-          </Button>
-        ))}
-      </div>
-    )}
+    <ul class="flex flex-col gap-3">
+      {features.map((feature) => (
+        <li class="flex items-center gap-3 text-sm">
+          <CheckIcon class="text-primary size-4 shrink-0" />
+          {feature}
+        </li>
+      ))}
+    </ul>
+    <div class="flex flex-wrap gap-3">
+      {buttons.map(({ href, label }, index) => (
+        <Button
+          as="a"
+          href={href}
+          size="lg"
+          variant={index === 0 ? "default" : "secondary"}
+        >
+          {label}
+        </Button>
+      ))}
+    </div>
   </SectionContainer>
   <SectionContainer>
     <Image
diff --git a/src/components/blocks/content-2.astro b/src/components/blocks/content-2.astro
index b763f241a..3c065e696 100644
--- a/src/components/blocks/content-2.astro
+++ b/src/components/blocks/content-2.astro
@@ -17,8 +17,8 @@ import PlaceholderImage from "@/assets/placeholder.svg"
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
-  features?: string[]
-  buttons?: {
+  features: string[]
+  buttons: {
     label: string
     href: string
   }[]
@@ -46,30 +46,26 @@ const {
         <SectionTitle>{title}</SectionTitle>
         <SectionDescription>{description}</SectionDescription>
       </div>
-      {features && features.length > 0 && (
-        <ul class="flex flex-col gap-3">
-          {features.map((feature) => (
-            <li class="flex items-center gap-3 text-sm">
-              <CheckIcon class="text-primary size-4 shrink-0" />
-              {feature}
-            </li>
-          ))}
-        </ul>
-      )}
-      {buttons && buttons.length > 0 && (
-        <div class="flex flex-wrap gap-3">
-          {buttons.map(({ href, label }, index) => (
-            <Button
-              as="a"
-              href={href}
-              size="lg"
-              variant={index === 0 ? "default" : "secondary"}
-            >
-              {label}
-            </Button>
-          ))}
-        </div>
-      )}
+      <ul class="flex flex-col gap-3">
+        {features.map((feature) => (
+          <li class="flex items-center gap-3 text-sm">
+            <CheckIcon class="text-primary size-4 shrink-0" />
+            {feature}
+          </li>
+        ))}
+      </ul>
+      <div class="flex flex-wrap gap-3">
+        {buttons.map(({ href, label }, index) => (
+          <Button
+            as="a"
+            href={href}
+            size="lg"
+            variant={index === 0 ? "default" : "secondary"}
+          >
+            {label}
+          </Button>
+        ))}
+      </div>
     </div>
     <Image
       src={image.src}
diff --git a/src/components/blocks/content-3.astro b/src/components/blocks/content-3.astro
index a4d69a78a..55eec2a20 100644
--- a/src/components/blocks/content-3.astro
+++ b/src/components/blocks/content-3.astro
@@ -16,7 +16,7 @@ import PlaceholderImage from "@/assets/placeholder.svg"
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
-  buttons?: {
+  buttons: {
     label: string
     href: string
   }[]
@@ -43,20 +43,18 @@ const {
         <SectionTitle>{title}</SectionTitle>
         <SectionDescription class="mt-4">{description}</SectionDescription>
       </div>
-      {buttons && buttons.length > 0 && (
-        <div class="flex flex-wrap gap-3">
-          {buttons.map(({ href, label }, index) => (
-            <Button
-              as="a"
-              href={href}
-              size="lg"
-              variant={index === 0 ? "default" : "secondary"}
-            >
-              {label}
-            </Button>
-          ))}
-        </div>
-      )}
+      <div class="flex flex-wrap gap-3">
+        {buttons.map(({ href, label }, index) => (
+          <Button
+            as="a"
+            href={href}
+            size="lg"
+            variant={index === 0 ? "default" : "secondary"}
+          >
+            {label}
+          </Button>
+        ))}
+      </div>
     </div>
   </SectionContainer>
   <SectionContainer>
diff --git a/src/components/blocks/content-4.astro b/src/components/blocks/content-4.astro
index a298165f1..f6c742f86 100644
--- a/src/components/blocks/content-4.astro
+++ b/src/components/blocks/content-4.astro
@@ -17,8 +17,8 @@ import PlaceholderImage from "@/assets/placeholder.svg"
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
-  features?: string[]
-  buttons?: {
+  features: string[]
+  buttons: {
     label: string
     href: string
   }[]
@@ -47,30 +47,26 @@ const {
           <SectionTitle>{title}</SectionTitle>
           <SectionDescription>{description}</SectionDescription>
         </div>
-        {features && features.length > 0 && (
-          <ul class="flex flex-col gap-3">
-            {features.map((feature) => (
-              <li class="flex items-center gap-3 text-sm">
-                <CheckIcon class="text-primary size-4 shrink-0" />
-                {feature}
-              </li>
-            ))}
-          </ul>
-        )}
-        {buttons && buttons.length > 0 && (
-          <div class="flex flex-wrap gap-3">
-            {buttons.map(({ href, label }, index) => (
-              <Button
-                as="a"
-                href={href}
-                size="lg"
-                variant={index === 0 ? "default" : "secondary"}
-              >
-                {label}
-              </Button>
-            ))}
-          </div>
-        )}
+        <ul class="flex flex-col gap-3">
+          {features.map((feature) => (
+            <li class="flex items-center gap-3 text-sm">
+              <CheckIcon class="text-primary size-4 shrink-0" />
+              {feature}
+            </li>
+          ))}
+        </ul>
+        <div class="flex flex-wrap gap-3">
+          {buttons.map(({ href, label }, index) => (
+            <Button
+              as="a"
+              href={href}
+              size="lg"
+              variant={index === 0 ? "default" : "secondary"}
+            >
+              {label}
+            </Button>
+          ))}
+        </div>
       </div>
       <Image
         src={image.src}
diff --git a/src/components/blocks/cta-1.astro b/src/components/blocks/cta-1.astro
index e7a017c2d..3ef8c6633 100644
--- a/src/components/blocks/cta-1.astro
+++ b/src/components/blocks/cta-1.astro
@@ -21,7 +21,7 @@ import {
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
-  buttons?: {
+  buttons: {
     label: string
     href: string
   }[]
@@ -71,19 +71,17 @@ const {
       <SectionTitle class="leading-[1.1]">{title}</SectionTitle>
       <SectionDescription>{description}</SectionDescription>
     </div>
-    {buttons && buttons.length > 0 && (
-      <div class="flex flex-wrap justify-center gap-3">
-        {buttons.map(({ href, label }, index) => (
-          <Button
-            as="a"
-            href={href}
-            size="lg"
-            variant={index === 0 ? "default" : "secondary"}
-          >
-            {label}
-          </Button>
-        ))}
-      </div>
-    )}
+    <div class="flex flex-wrap justify-center gap-3">
+      {buttons.map(({ href, label }, index) => (
+        <Button
+          as="a"
+          href={href}
+          size="lg"
+          variant={index === 0 ? "default" : "secondary"}
+        >
+          {label}
+        </Button>
+      ))}
+    </div>
   </SectionContainer>
 </Section>
diff --git a/src/components/blocks/cta-2.astro b/src/components/blocks/cta-2.astro
index deb488fca..c3591d32c 100644
--- a/src/components/blocks/cta-2.astro
+++ b/src/components/blocks/cta-2.astro
@@ -22,11 +22,11 @@ import PlaceholderImage from "@/assets/placeholder.svg"
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
-  buttons?: {
+  buttons: {
     label: string
     href: string
   }[]
-  socialProof?: {
+  socialProof: {
     avatars: {
       image?: ImageMetadata
       initials: string
@@ -61,41 +61,35 @@ const {
           {description}
         </p>
       </div>
-      {buttons && buttons.length > 0 && (
-        <div class="flex flex-wrap gap-3">
-          {buttons.map(({ href, label }, index) => (
-            <Button
-              as="a"
-              href={href}
-              size="lg"
-              variant={index === 0 ? "default" : "outline"}
-            >
-              {label}
-            </Button>
+      <div class="flex flex-wrap gap-3">
+        {buttons.map(({ href, label }, index) => (
+          <Button
+            as="a"
+            href={href}
+            size="lg"
+            variant={index === 0 ? "default" : "outline"}
+          >
+            {label}
+          </Button>
+        ))}
+      </div>
+      <div class="flex items-center gap-3">
+        <AvatarGroup>
+          {socialProof.avatars.map((avatar) => (
+            <Avatar class="ring-background size-10 ring">
+              <AvatarImage
+                src={avatar.image}
+                alt={avatar.name ?? avatar.initials}
+              />
+              <AvatarFallback>{avatar.initials}</AvatarFallback>
+            </Avatar>
           ))}
+        </AvatarGroup>
+        <div class="flex flex-col gap-0.5">
+          <Rating value={socialProof.rating} />
+          <span class="text-muted-foreground text-xs">{socialProof.text}</span>
         </div>
-      )}
-      {socialProof && (
-        <div class="flex items-center gap-3">
-          <AvatarGroup>
-            {socialProof.avatars.map((avatar) => (
-              <Avatar class="ring-background size-10 ring">
-                <AvatarImage
-                  src={avatar.image}
-                  alt={avatar.name ?? avatar.initials}
-                />
-                <AvatarFallback>{avatar.initials}</AvatarFallback>
-              </Avatar>
-            ))}
-          </AvatarGroup>
-          <div class="flex flex-col gap-0.5">
-            <Rating value={socialProof.rating} />
-            <span class="text-muted-foreground text-xs">
-              {socialProof.text}
-            </span>
-          </div>
-        </div>
-      )}
+      </div>
     </div>
     <Image
       src={image.src}
diff --git a/src/components/blocks/cta-3.astro b/src/components/blocks/cta-3.astro
index e2e53725c..db409b5d7 100644
--- a/src/components/blocks/cta-3.astro
+++ b/src/components/blocks/cta-3.astro
@@ -20,11 +20,11 @@ import {
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
-  buttons?: {
+  buttons: {
     label: string
     href: string
   }[]
-  socialProof?: {
+  socialProof: {
     avatars: {
       image?: ImageMetadata
       initials: string
@@ -58,41 +58,35 @@ const {
       </p>
     </div>
     <div class="flex flex-col gap-6 lg:items-end">
-      {buttons && buttons.length > 0 && (
-        <div class="flex flex-wrap gap-3">
-          {buttons.map(({ href, label }, index) => (
-            <Button
-              as="a"
-              href={href}
-              size="lg"
-              variant={index === 0 ? "default" : "secondary"}
-            >
-              {label}
-            </Button>
+      <div class="flex flex-wrap gap-3">
+        {buttons.map(({ href, label }, index) => (
+          <Button
+            as="a"
+            href={href}
+            size="lg"
+            variant={index === 0 ? "default" : "secondary"}
+          >
+            {label}
+          </Button>
+        ))}
+      </div>
+      <div class="flex items-center gap-3">
+        <AvatarGroup>
+          {socialProof.avatars.map((avatar) => (
+            <Avatar class="ring-background size-11 ring">
+              <AvatarImage
+                src={avatar.image}
+                alt={avatar.name ?? avatar.initials}
+              />
+              <AvatarFallback>{avatar.initials}</AvatarFallback>
+            </Avatar>
           ))}
+        </AvatarGroup>
+        <div class="flex flex-col gap-0.5">
+          <Rating value={socialProof.rating} />
+          <span class="text-muted-foreground text-xs">{socialProof.text}</span>
         </div>
-      )}
-      {socialProof && (
-        <div class="flex items-center gap-3">
-          <AvatarGroup>
-            {socialProof.avatars.map((avatar) => (
-              <Avatar class="ring-background size-11 ring">
-                <AvatarImage
-                  src={avatar.image}
-                  alt={avatar.name ?? avatar.initials}
-                />
-                <AvatarFallback>{avatar.initials}</AvatarFallback>
-              </Avatar>
-            ))}
-          </AvatarGroup>
-          <div class="flex flex-col gap-0.5">
-            <Rating value={socialProof.rating} />
-            <span class="text-muted-foreground text-xs">
-              {socialProof.text}
-            </span>
-          </div>
-        </div>
-      )}
+      </div>
     </div>
   </SectionContainer>
 </Section>
diff --git a/src/components/blocks/cta-4.astro b/src/components/blocks/cta-4.astro
index 0ddfb8475..143192f63 100644
--- a/src/components/blocks/cta-4.astro
+++ b/src/components/blocks/cta-4.astro
@@ -23,11 +23,11 @@ import PlaceholderImage from "@/assets/placeholder.svg"
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
-  buttons?: {
+  buttons: {
     label: string
     href: string
   }[]
-  socialProof?: {
+  socialProof: {
     avatars: {
       image?: ImageMetadata
       initials: string
@@ -70,38 +70,34 @@ const {
       <SectionTitle class="leading-[1.1]">{title}</SectionTitle>
       <SectionDescription>{description}</SectionDescription>
     </div>
-    {buttons && buttons.length > 0 && (
-      <div class="flex flex-wrap justify-center gap-3">
-        {buttons.map(({ href, label }, index) => (
-          <Button
-            as="a"
-            href={href}
-            size="lg"
-            variant={index === 0 ? "default" : "outline"}
-          >
-            {label}
-          </Button>
+    <div class="flex flex-wrap justify-center gap-3">
+      {buttons.map(({ href, label }, index) => (
+        <Button
+          as="a"
+          href={href}
+          size="lg"
+          variant={index === 0 ? "default" : "outline"}
+        >
+          {label}
+        </Button>
+      ))}
+    </div>
+    <div class="flex items-center gap-3">
+      <AvatarGroup>
+        {socialProof.avatars.map((avatar) => (
+          <Avatar class="ring-background size-11 ring">
+            <AvatarImage
+              src={avatar.image}
+              alt={avatar.name ?? avatar.initials}
+            />
+            <AvatarFallback>{avatar.initials}</AvatarFallback>
+          </Avatar>
         ))}
+      </AvatarGroup>
+      <div class="flex flex-col gap-0.5">
+        <Rating value={socialProof.rating} />
+        <span class="text-muted-foreground text-sm">{socialProof.text}</span>
       </div>
-    )}
-    {socialProof && (
-      <div class="flex items-center gap-3">
-        <AvatarGroup>
-          {socialProof.avatars.map((avatar) => (
-            <Avatar class="ring-background size-11 ring">
-              <AvatarImage
-                src={avatar.image}
-                alt={avatar.name ?? avatar.initials}
-              />
-              <AvatarFallback>{avatar.initials}</AvatarFallback>
-            </Avatar>
-          ))}
-        </AvatarGroup>
-        <div class="flex flex-col gap-0.5">
-          <Rating value={socialProof.rating} />
-          <span class="text-muted-foreground text-sm">{socialProof.text}</span>
-        </div>
-      </div>
-    )}
+    </div>
   </SectionContainer>
 </Section>
diff --git a/src/components/blocks/cta-5.astro b/src/components/blocks/cta-5.astro
index f6dc74867..016308c48 100644
--- a/src/components/blocks/cta-5.astro
+++ b/src/components/blocks/cta-5.astro
@@ -16,8 +16,8 @@ import PlaceholderImage from "@/assets/placeholder.svg"
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
-  features?: string[]
-  buttons?: {
+  features: string[]
+  buttons: {
     label: string
     href: string
   }[]
@@ -47,30 +47,26 @@ const {
           {description}
         </p>
       </div>
-      {features && features.length > 0 && (
-        <ul class="flex flex-col gap-3">
-          {features.map((feature) => (
-            <li class="flex items-center gap-3 text-sm">
-              <CheckIcon class="text-primary size-4 shrink-0" />
-              {feature}
-            </li>
-          ))}
-        </ul>
-      )}
-      {buttons && buttons.length > 0 && (
-        <div class="flex flex-wrap gap-3">
-          {buttons.map(({ href, label }, index) => (
-            <Button
-              as="a"
-              href={href}
-              size="lg"
-              variant={index === 0 ? "default" : "outline"}
-            >
-              {label}
-            </Button>
-          ))}
-        </div>
-      )}
+      <ul class="flex flex-col gap-3">
+        {features.map((feature) => (
+          <li class="flex items-center gap-3 text-sm">
+            <CheckIcon class="text-primary size-4 shrink-0" />
+            {feature}
+          </li>
+        ))}
+      </ul>
+      <div class="flex flex-wrap gap-3">
+        {buttons.map(({ href, label }, index) => (
+          <Button
+            as="a"
+            href={href}
+            size="lg"
+            variant={index === 0 ? "default" : "outline"}
+          >
+            {label}
+          </Button>
+        ))}
+      </div>
     </div>
     <Image
       src={image.src}
diff --git a/src/components/blocks/cta-6.astro b/src/components/blocks/cta-6.astro
index 6b8fa5f7c..f92eb8b72 100644
--- a/src/components/blocks/cta-6.astro
+++ b/src/components/blocks/cta-6.astro
@@ -22,11 +22,11 @@ import PlaceholderImage from "@/assets/placeholder.svg"
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
-  buttons?: {
+  buttons: {
     label: string
     href: string
   }[]
-  socialProof?: {
+  socialProof: {
     avatars: {
       image?: ImageMetadata
       initials: string
@@ -68,41 +68,35 @@ const {
           {description}
         </p>
       </div>
-      {buttons && buttons.length > 0 && (
-        <div class="flex flex-wrap gap-3">
-          {buttons.map(({ href, label }, index) => (
-            <Button
-              as="a"
-              href={href}
-              size="lg"
-              variant={index === 0 ? "default" : "outline"}
-            >
-              {label}
-            </Button>
+      <div class="flex flex-wrap gap-3">
+        {buttons.map(({ href, label }, index) => (
+          <Button
+            as="a"
+            href={href}
+            size="lg"
+            variant={index === 0 ? "default" : "outline"}
+          >
+            {label}
+          </Button>
+        ))}
+      </div>
+      <div class="flex items-center gap-3">
+        <AvatarGroup>
+          {socialProof.avatars.map((avatar) => (
+            <Avatar class="ring-background size-10 ring">
+              <AvatarImage
+                src={avatar.image}
+                alt={avatar.name ?? avatar.initials}
+              />
+              <AvatarFallback>{avatar.initials}</AvatarFallback>
+            </Avatar>
           ))}
+        </AvatarGroup>
+        <div class="flex flex-col gap-0.5">
+          <Rating value={socialProof.rating} />
+          <span class="text-muted-foreground text-xs">{socialProof.text}</span>
         </div>
-      )}
-      {socialProof && (
-        <div class="flex items-center gap-3">
-          <AvatarGroup>
-            {socialProof.avatars.map((avatar) => (
-              <Avatar class="ring-background size-10 ring">
-                <AvatarImage
-                  src={avatar.image}
-                  alt={avatar.name ?? avatar.initials}
-                />
-                <AvatarFallback>{avatar.initials}</AvatarFallback>
-              </Avatar>
-            ))}
-          </AvatarGroup>
-          <div class="flex flex-col gap-0.5">
-            <Rating value={socialProof.rating} />
-            <span class="text-muted-foreground text-xs">
-              {socialProof.text}
-            </span>
-          </div>
-        </div>
-      )}
+      </div>
     </div>
   </SectionContainer>
 </Section>
diff --git a/src/components/blocks/cta-7.astro b/src/components/blocks/cta-7.astro
index 79d2f2c85..fd2e1a751 100644
--- a/src/components/blocks/cta-7.astro
+++ b/src/components/blocks/cta-7.astro
@@ -21,11 +21,11 @@ import {
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
-  buttons?: {
+  buttons: {
     label: string
     href: string
   }[]
-  socialProof?: {
+  socialProof: {
     avatars: {
       image?: ImageMetadata
       initials: string
@@ -55,42 +55,38 @@ const {
       <SectionTitle class="leading-[1.1]">{title}</SectionTitle>
       <SectionDescription>{description}</SectionDescription>
     </div>
-    {buttons && buttons.length > 0 && (
-      <div class="flex flex-wrap justify-center gap-3">
-        {buttons.map(({ href, label }, index) => (
-          <Button
-            as="a"
-            href={href}
-            size="lg"
-            variant={index === 0 ? "default" : "secondary"}
-          >
-            {label}
-          </Button>
+    <div class="flex flex-wrap justify-center gap-3">
+      {buttons.map(({ href, label }, index) => (
+        <Button
+          as="a"
+          href={href}
+          size="lg"
+          variant={index === 0 ? "default" : "secondary"}
+        >
+          {label}
+        </Button>
+      ))}
+    </div>
+    <div class="flex flex-col items-center gap-4">
+      <AvatarGroup>
+        {socialProof.avatars.map((avatar) => (
+          <Avatar class="ring-primary/10 bg-background size-11 ring">
+            <AvatarImage
+              src={avatar.image}
+              alt={avatar.name ?? avatar.initials}
+            />
+            <AvatarFallback>{avatar.initials}</AvatarFallback>
+          </Avatar>
         ))}
-      </div>
-    )}
-    {socialProof && (
-      <div class="flex flex-col items-center gap-4">
-        <AvatarGroup>
-          {socialProof.avatars.map((avatar) => (
-            <Avatar class="ring-primary/10 bg-background size-11 ring">
-              <AvatarImage
-                src={avatar.image}
-                alt={avatar.name ?? avatar.initials}
-              />
-              <AvatarFallback>{avatar.initials}</AvatarFallback>
-            </Avatar>
-          ))}
-          {socialProof.count && (
-            <AvatarGroupCount class="bg-background text-foreground ring-primary/10 size-11 ring">
-              {socialProof.count}
-            </AvatarGroupCount>
-          )}
-        </AvatarGroup>
-        <span class="text-muted-foreground text-sm leading-snug">
-          {socialProof.text.replace(/\s+/g, " ")}
-        </span>
-      </div>
-    )}
+        {socialProof.count != null && (
+          <AvatarGroupCount class="bg-background text-foreground ring-primary/10 size-11 ring">
+            {socialProof.count}
+          </AvatarGroupCount>
+        )}
+      </AvatarGroup>
+      <span class="text-muted-foreground text-sm leading-snug">
+        {socialProof.text}
+      </span>
+    </div>
   </SectionContainer>
 </Section>
diff --git a/src/components/blocks/cta-8.astro b/src/components/blocks/cta-8.astro
index 4fa2a9333..f138c872b 100644
--- a/src/components/blocks/cta-8.astro
+++ b/src/components/blocks/cta-8.astro
@@ -13,7 +13,7 @@ import {
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
-  buttons?: {
+  buttons: {
     label: string
     href: string
   }[]
@@ -32,19 +32,17 @@ const { class: className, title, description, buttons, ...props } = Astro.props
       <SectionTitle class="leading-[1.1]">{title}</SectionTitle>
       <SectionDescription>{description}</SectionDescription>
     </div>
-    {buttons && buttons.length > 0 && (
-      <div class="flex flex-wrap justify-center gap-3">
-        {buttons.map(({ href, label }, index) => (
-          <Button
-            as="a"
-            href={href}
-            size="lg"
-            variant={index === 0 ? "default" : "outline"}
-          >
-            {label}
-          </Button>
-        ))}
-      </div>
-    )}
+    <div class="flex flex-wrap justify-center gap-3">
+      {buttons.map(({ href, label }, index) => (
+        <Button
+          as="a"
+          href={href}
+          size="lg"
+          variant={index === 0 ? "default" : "outline"}
+        >
+          {label}
+        </Button>
+      ))}
+    </div>
   </SectionContainer>
 </Section>
diff --git a/src/components/blocks/doc-1.astro b/src/components/blocks/doc-1.astro
index ea7555360..3b12ea486 100644
--- a/src/components/blocks/doc-1.astro
+++ b/src/components/blocks/doc-1.astro
@@ -41,7 +41,7 @@ import {
 
 type Props = HTMLAttributes<"div"> & {
   title: string
-  description?: string
+  description: string
   copyButton?: {
     id: string
     source: string
@@ -140,11 +140,9 @@ const openLinks = markdownUrl
         >
           {title}
         </TypographyH1>
-        {description && (
-          <TypographyLead size="sm" class="max-w-2xl leading-7">
-            {description}
-          </TypographyLead>
-        )}
+        <TypographyLead size="sm" class="max-w-2xl leading-7">
+          {description}
+        </TypographyLead>
       </div>
       <div class="flex shrink-0 items-center gap-2 self-start">
         {showCopyButton && (
diff --git a/src/components/blocks/faqs-2.astro b/src/components/blocks/faqs-2.astro
index 94a3b7f1b..6f3982627 100644
--- a/src/components/blocks/faqs-2.astro
+++ b/src/components/blocks/faqs-2.astro
@@ -23,7 +23,7 @@ type Props = HTMLAttributes<"section"> & {
     question: string
     answer: string
   }[]
-  buttons?: {
+  buttons: {
     label: string
     href: string
   }[]
@@ -47,20 +47,18 @@ const {
         <p class="text-muted-foreground mt-4 text-base leading-relaxed text-balance">
           {description}
         </p>
-        {buttons && buttons.length > 0 && (
-          <div class="mt-8 flex flex-wrap gap-3">
-            {buttons.map(({ href, label }, index) => (
-              <Button
-                as="a"
-                href={href}
-                size="lg"
-                variant={index === 0 ? "default" : "secondary"}
-              >
-                {label}
-              </Button>
-            ))}
-          </div>
-        )}
+        <div class="mt-8 flex flex-wrap gap-3">
+          {buttons.map(({ href, label }, index) => (
+            <Button
+              as="a"
+              href={href}
+              size="lg"
+              variant={index === 0 ? "default" : "secondary"}
+            >
+              {label}
+            </Button>
+          ))}
+        </div>
       </div>
 
       <div>
diff --git a/src/components/blocks/faqs-3.astro b/src/components/blocks/faqs-3.astro
index 7ec0d706c..1090d5d29 100644
--- a/src/components/blocks/faqs-3.astro
+++ b/src/components/blocks/faqs-3.astro
@@ -16,7 +16,7 @@ import {
 } from "@/components/ui/section"
 
 type Props = HTMLAttributes<"section"> & {
-  badge?: string
+  badge: string
   title: string
   description: string
   faqs: {
@@ -39,7 +39,7 @@ const {
 <Section class={cn("", className)} {...props}>
   <SectionContainer class="items-center text-center">
     <div class="flex max-w-2xl flex-col items-center gap-5">
-      {badge && <Badge variant="secondary">{badge}</Badge>}
+      <Badge variant="secondary">{badge}</Badge>
       <SectionTitle>{title}</SectionTitle>
       <p class="text-muted-foreground text-base leading-relaxed text-balance">
         {description}
diff --git a/src/components/blocks/features-1.astro b/src/components/blocks/features-1.astro
index 9cd0e2952..56af85420 100644
--- a/src/components/blocks/features-1.astro
+++ b/src/components/blocks/features-1.astro
@@ -15,7 +15,7 @@ import {
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
-  buttons?: {
+  buttons: {
     label: string
     href: string
   }[]
@@ -44,19 +44,17 @@ const {
       <SectionTitle>{title}</SectionTitle>
       <SectionDescription class="max-w-2xl">{description}</SectionDescription>
     </div>
-    {buttons && buttons.length > 0 && (
-      <div class="flex flex-wrap justify-center gap-3">
-        {buttons.map(({ href, label }, index) => (
-          <Button
-            as="a"
-            href={href}
-            variant={index === 0 ? "default" : "outline"}
-          >
-            {label}
-          </Button>
-        ))}
-      </div>
-    )}
+    <div class="flex flex-wrap justify-center gap-3">
+      {buttons.map(({ href, label }, index) => (
+        <Button
+          as="a"
+          href={href}
+          variant={index === 0 ? "default" : "outline"}
+        >
+          {label}
+        </Button>
+      ))}
+    </div>
   </SectionContainer>
   <SectionContainer>
     <div class="grid gap-6 sm:grid-cols-2">
diff --git a/src/components/blocks/features-2.astro b/src/components/blocks/features-2.astro
index 784d9e337..528086744 100644
--- a/src/components/blocks/features-2.astro
+++ b/src/components/blocks/features-2.astro
@@ -2,7 +2,6 @@
 import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
 import { Icon } from "@/components/ui/icon"
 import {
   Section,
@@ -14,10 +13,6 @@ import {
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
-  buttons?: {
-    label: string
-    href: string
-  }[]
   features: {
     title: string
     description: string
@@ -25,14 +20,7 @@ type Props = HTMLAttributes<"section"> & {
   }[]
 }
 
-const {
-  class: className,
-  title,
-  description,
-  buttons,
-  features,
-  ...props
-} = Astro.props
+const { class: className, title, description, features, ...props } = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
@@ -41,19 +29,6 @@ const {
       <SectionTitle>{title}</SectionTitle>
       <SectionDescription class="max-w-2xl">{description}</SectionDescription>
     </div>
-    {buttons && buttons.length > 0 && (
-      <div class="flex flex-wrap justify-center gap-3">
-        {buttons.map(({ href, label }, index) => (
-          <Button
-            as="a"
-            href={href}
-            variant={index === 0 ? "default" : "outline"}
-          >
-            {label}
-          </Button>
-        ))}
-      </div>
-    )}
   </SectionContainer>
   <SectionContainer>
     <div class="ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3">
diff --git a/src/components/blocks/features-4.astro b/src/components/blocks/features-4.astro
index 81cca8f42..dc2f67556 100644
--- a/src/components/blocks/features-4.astro
+++ b/src/components/blocks/features-4.astro
@@ -14,7 +14,7 @@ import {
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
-  buttons?: {
+  buttons: {
     label: string
     href: string
   }[]
@@ -45,19 +45,17 @@ const {
         <p class="text-muted-foreground mt-4 text-base leading-relaxed text-balance">
           {description}
         </p>
-        {buttons && buttons.length > 0 && (
-          <div class="mt-6 flex flex-wrap gap-3">
-            {buttons.map(({ href, label }, index) => (
-              <Button
-                as="a"
-                href={href}
-                variant={index === 0 ? "default" : "outline"}
-              >
-                {label}
-              </Button>
-            ))}
-          </div>
-        )}
+        <div class="mt-6 flex flex-wrap gap-3">
+          {buttons.map(({ href, label }, index) => (
+            <Button
+              as="a"
+              href={href}
+              variant={index === 0 ? "default" : "outline"}
+            >
+              {label}
+            </Button>
+          ))}
+        </div>
       </div>
       <div class="grid gap-6 sm:grid-cols-2">
         {features.map((feature) => (
diff --git a/src/components/blocks/features-5.astro b/src/components/blocks/features-5.astro
index f22d0cbb4..f991c4e6c 100644
--- a/src/components/blocks/features-5.astro
+++ b/src/components/blocks/features-5.astro
@@ -2,7 +2,6 @@
 import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
 import { Icon } from "@/components/ui/icon"
 import {
   Section,
@@ -14,10 +13,6 @@ import {
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
-  buttons?: {
-    label: string
-    href: string
-  }[]
   features: {
     title: string
     description: string
@@ -25,14 +20,7 @@ type Props = HTMLAttributes<"section"> & {
   }[]
 }
 
-const {
-  class: className,
-  title,
-  description,
-  buttons,
-  features,
-  ...props
-} = Astro.props
+const { class: className, title, description, features, ...props } = Astro.props
 ---
 
 <Section variant="floating" class={cn("", className)} {...props}>
@@ -41,19 +29,6 @@ const {
       <SectionTitle>{title}</SectionTitle>
       <SectionDescription class="max-w-2xl">{description}</SectionDescription>
     </div>
-    {buttons && buttons.length > 0 && (
-      <div class="flex flex-wrap justify-center gap-3">
-        {buttons.map(({ href, label }, index) => (
-          <Button
-            as="a"
-            href={href}
-            variant={index === 0 ? "default" : "outline"}
-          >
-            {label}
-          </Button>
-        ))}
-      </div>
-    )}
   </SectionContainer>
   <SectionContainer>
     <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
diff --git a/src/components/blocks/features-6.astro b/src/components/blocks/features-6.astro
index 3ed2c72e7..4a211d49b 100644
--- a/src/components/blocks/features-6.astro
+++ b/src/components/blocks/features-6.astro
@@ -13,7 +13,7 @@ import { Separator } from "@/components/ui/separator"
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
-  buttons?: {
+  buttons: {
     label: string
     href: string
   }[]
@@ -40,19 +40,17 @@ const {
       <p class="text-muted-foreground text-base leading-relaxed text-balance">
         {description}
       </p>
-      {buttons && buttons.length > 0 && (
-        <div class="mt-2 flex flex-wrap gap-3">
-          {buttons.map(({ href, label }, index) => (
-            <Button
-              as="a"
-              href={href}
-              variant={index === 0 ? "default" : "outline"}
-            >
-              {label}
-            </Button>
-          ))}
-        </div>
-      )}
+      <div class="mt-2 flex flex-wrap gap-3">
+        {buttons.map(({ href, label }, index) => (
+          <Button
+            as="a"
+            href={href}
+            variant={index === 0 ? "default" : "outline"}
+          >
+            {label}
+          </Button>
+        ))}
+      </div>
     </div>
   </SectionContainer>
   <SectionContainer>
diff --git a/src/components/blocks/footer-1.astro b/src/components/blocks/footer-1.astro
index 249fee81f..c52ed8717 100644
--- a/src/components/blocks/footer-1.astro
+++ b/src/components/blocks/footer-1.astro
@@ -11,7 +11,7 @@ type Props = HTMLAttributes<"footer"> & {
   brandName: string
   brandHref: string
   description: string
-  socials?: {
+  socials: {
     label: string
     href: string
     icon?: string
@@ -49,21 +49,19 @@ const {
           <p class="text-muted-foreground max-w-xs text-sm leading-relaxed">
             {description}
           </p>
-          {socials && socials.length > 0 && (
-            <div class="flex items-center gap-3">
-              {socials.map((social) => (
-                <a
-                  href={social.href}
-                  class="text-muted-foreground hover:text-foreground transition-colors"
-                  aria-label={social.label}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  <Icon name={social.icon} href={social.href} class="size-4" />
-                </a>
-              ))}
-            </div>
-          )}
+          <div class="flex items-center gap-3">
+            {socials.map((social) => (
+              <a
+                href={social.href}
+                class="text-muted-foreground hover:text-foreground transition-colors"
+                aria-label={social.label}
+                target="_blank"
+                rel="noreferrer"
+              >
+                <Icon name={social.icon} href={social.href} class="size-4" />
+              </a>
+            ))}
+          </div>
         </div>
         <div class="grid gap-8 sm:grid-cols-3">
           {columns.map((column) => (
diff --git a/src/components/blocks/footer-2.astro b/src/components/blocks/footer-2.astro
index a27200a2a..19d63a954 100644
--- a/src/components/blocks/footer-2.astro
+++ b/src/components/blocks/footer-2.astro
@@ -11,11 +11,11 @@ type Props = HTMLAttributes<"footer"> & {
   brandName: string
   brandHref: string
   description: string
-  links?: {
+  links: {
     label: string
     href: string
   }[]
-  socials?: {
+  socials: {
     label: string
     href: string
     icon?: string
@@ -46,36 +46,32 @@ const {
       <p class="text-muted-foreground max-w-md text-sm leading-relaxed">
         {description}
       </p>
-      {links && links.length > 0 && (
-        <nav
-          aria-label={navigationLabel}
-          class="flex flex-wrap items-center justify-center gap-x-6 gap-y-2"
-        >
-          {links.map((link) => (
-            <a
-              href={link.href}
-              class="text-muted-foreground hover:text-foreground text-sm transition-colors"
-            >
-              {link.label}
-            </a>
-          ))}
-        </nav>
-      )}
-      {socials && socials.length > 0 && (
-        <div class="flex items-center justify-center gap-3">
-          {socials.map((social) => (
-            <a
-              href={social.href}
-              class="text-muted-foreground hover:text-foreground transition-colors"
-              aria-label={social.label}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <Icon name={social.icon} href={social.href} class="size-4" />
-            </a>
-          ))}
-        </div>
-      )}
+      <nav
+        aria-label={navigationLabel}
+        class="flex flex-wrap items-center justify-center gap-x-6 gap-y-2"
+      >
+        {links.map((link) => (
+          <a
+            href={link.href}
+            class="text-muted-foreground hover:text-foreground text-sm transition-colors"
+          >
+            {link.label}
+          </a>
+        ))}
+      </nav>
+      <div class="flex items-center justify-center gap-3">
+        {socials.map((social) => (
+          <a
+            href={social.href}
+            class="text-muted-foreground hover:text-foreground transition-colors"
+            aria-label={social.label}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <Icon name={social.icon} href={social.href} class="size-4" />
+          </a>
+        ))}
+      </div>
       <Separator />
       <p class="text-muted-foreground text-sm">{copyright}</p>
     </SectionContainer>
diff --git a/src/components/blocks/footer-3.astro b/src/components/blocks/footer-3.astro
index 4a19d09a1..92553cbe4 100644
--- a/src/components/blocks/footer-3.astro
+++ b/src/components/blocks/footer-3.astro
@@ -11,7 +11,7 @@ type Props = HTMLAttributes<"footer"> & {
   brandName: string
   brandHref: string
   description: string
-  socials?: {
+  socials: {
     label: string
     href: string
     icon?: string
@@ -24,7 +24,7 @@ type Props = HTMLAttributes<"footer"> & {
     }[]
   }[]
   copyright: string
-  bottomLinks?: {
+  bottomLinks: {
     label: string
     href: string
   }[]
@@ -56,21 +56,19 @@ const {
           <p class="text-muted-foreground max-w-xs text-sm leading-relaxed">
             {description}
           </p>
-          {socials && socials.length > 0 && (
-            <div class="flex items-center gap-3">
-              {socials.map((social) => (
-                <a
-                  href={social.href}
-                  class="text-muted-foreground hover:text-foreground transition-colors"
-                  aria-label={social.label}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  <Icon name={social.icon} href={social.href} class="size-4" />
-                </a>
-              ))}
-            </div>
-          )}
+          <div class="flex items-center gap-3">
+            {socials.map((social) => (
+              <a
+                href={social.href}
+                class="text-muted-foreground hover:text-foreground transition-colors"
+                aria-label={social.label}
+                target="_blank"
+                rel="noreferrer"
+              >
+                <Icon name={social.icon} href={social.href} class="size-4" />
+              </a>
+            ))}
+          </div>
         </div>
         <div class="grid gap-8 sm:grid-cols-3">
           {columns.map((column) => (
@@ -95,21 +93,19 @@ const {
       <Separator />
       <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <p class="text-muted-foreground text-sm">{copyright}</p>
-        {bottomLinks && bottomLinks.length > 0 && (
-          <nav
-            aria-label={navigationLabel}
-            class="flex flex-wrap items-center gap-x-5 gap-y-2"
-          >
-            {bottomLinks.map((link) => (
-              <a
-                href={link.href}
-                class="text-muted-foreground hover:text-foreground text-sm transition-colors"
-              >
-                {link.label}
-              </a>
-            ))}
-          </nav>
-        )}
+        <nav
+          aria-label={navigationLabel}
+          class="flex flex-wrap items-center gap-x-5 gap-y-2"
+        >
+          {bottomLinks.map((link) => (
+            <a
+              href={link.href}
+              class="text-muted-foreground hover:text-foreground text-sm transition-colors"
+            >
+              {link.label}
+            </a>
+          ))}
+        </nav>
       </div>
     </SectionContainer>
   </Section>
diff --git a/src/components/blocks/hero-1.astro b/src/components/blocks/hero-1.astro
index c523acb28..24156b70e 100644
--- a/src/components/blocks/hero-1.astro
+++ b/src/components/blocks/hero-1.astro
@@ -15,7 +15,7 @@ import {
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
-  badge?: {
+  badge: {
     label: string
     href: string
   }
@@ -42,11 +42,9 @@ const {
 
 <Section class={cn("", className)} {...props}>
   <SectionContainer class="items-center gap-8 text-center">
-    {badge && (
-      <Badge as="a" href={badge.href} variant="secondary">
-        {badge.label}
-      </Badge>
-    )}
+    <Badge as="a" href={badge.href} variant="secondary">
+      {badge.label}
+    </Badge>
     <h1 class="text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl">
       {title}
     </h1>
diff --git a/src/components/blocks/logos-1.astro b/src/components/blocks/logos-1.astro
index 836fe81cb..bba90383d 100644
--- a/src/components/blocks/logos-1.astro
+++ b/src/components/blocks/logos-1.astro
@@ -12,7 +12,7 @@ import {
 
 type Props = HTMLAttributes<"section"> & {
   title: string
-  description?: string
+  description: string
   brands: {
     name: string
     href?: string
@@ -26,7 +26,7 @@ const { class: className, title, description, brands, ...props } = Astro.props
   <SectionContainer class="items-center gap-10 text-center">
     <div class="flex max-w-2xl flex-col items-center gap-4">
       <SectionTitle>{title}</SectionTitle>
-      {description && <SectionDescription>{description}</SectionDescription>}
+      <SectionDescription>{description}</SectionDescription>
     </div>
     <div class="text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6">
       {brands.map((brand) => (
diff --git a/src/components/blocks/logos-2.astro b/src/components/blocks/logos-2.astro
index b653fdd60..0f9d47e4b 100644
--- a/src/components/blocks/logos-2.astro
+++ b/src/components/blocks/logos-2.astro
@@ -12,8 +12,8 @@ import {
 } from "@/components/ui/section"
 
 type Props = HTMLAttributes<"section"> & {
-  title?: string
-  description?: string
+  title: string
+  description: string
   brands: {
     name: string
     href?: string
@@ -24,14 +24,10 @@ const { class: className, title, description, brands, ...props } = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
-  {(title || description) && (
-    <SectionContainer class="items-center gap-4 text-center">
-      {title && <SectionTitle>{title}</SectionTitle>}
-      {description && (
-        <SectionDescription class="max-w-2xl">{description}</SectionDescription>
-      )}
-    </SectionContainer>
-  )}
+  <SectionContainer class="items-center gap-4 text-center">
+    <SectionTitle>{title}</SectionTitle>
+    <SectionDescription class="max-w-2xl">{description}</SectionDescription>
+  </SectionContainer>
   <Marquee
     class="text-muted-foreground mask-x-from-90%"
     gap="3rem"
diff --git a/src/components/blocks/pricing-1.astro b/src/components/blocks/pricing-1.astro
index 9a0388d29..c5ad0572c 100644
--- a/src/components/blocks/pricing-1.astro
+++ b/src/components/blocks/pricing-1.astro
@@ -24,7 +24,7 @@ import { Separator } from "@/components/ui/separator"
 
 type Props = HTMLAttributes<"section"> & {
   title: string
-  description?: string
+  description: string
   plans: {
     name: string
     description: string
@@ -47,7 +47,7 @@ const { class: className, title, description, plans, ...props } = Astro.props
   <SectionContainer class="items-center gap-8 text-center">
     <div class="flex max-w-2xl flex-col items-center gap-4">
       <SectionTitle>{title}</SectionTitle>
-      {description && <SectionDescription>{description}</SectionDescription>}
+      <SectionDescription>{description}</SectionDescription>
     </div>
   </SectionContainer>
   <SectionContainer>
diff --git a/src/components/blocks/pricing-3.astro b/src/components/blocks/pricing-3.astro
index 6bd95de12..67b2b06f0 100644
--- a/src/components/blocks/pricing-3.astro
+++ b/src/components/blocks/pricing-3.astro
@@ -23,9 +23,9 @@ import {
 import { Separator } from "@/components/ui/separator"
 
 type Props = HTMLAttributes<"section"> & {
-  badge?: string
+  badge: string
   title: string
-  description?: string
+  description: string
   offer: {
     name: string
     description: string
@@ -53,9 +53,9 @@ const {
 <Section class={cn("", className)} {...props}>
   <SectionContainer class="items-center gap-8 text-center">
     <div class="flex max-w-2xl flex-col items-center gap-4">
-      {badge && <Badge variant="secondary">{badge}</Badge>}
+      <Badge variant="secondary">{badge}</Badge>
       <SectionTitle>{title}</SectionTitle>
-      {description && <SectionDescription>{description}</SectionDescription>}
+      <SectionDescription>{description}</SectionDescription>
     </div>
     <Card class="ring-primary w-full max-w-md ring-2">
       <CardHeader class="text-left">
diff --git a/src/components/blocks/reviews-1.astro b/src/components/blocks/reviews-1.astro
index 5d8617079..23740fdf1 100644
--- a/src/components/blocks/reviews-1.astro
+++ b/src/components/blocks/reviews-1.astro
@@ -15,8 +15,8 @@ import {
 } from "@/components/ui/section"
 
 type Props = HTMLAttributes<"section"> & {
-  title?: string
-  description?: string
+  title: string
+  description: string
   reviews: {
     rating: number
     quote: string
@@ -31,14 +31,10 @@ const { class: className, title, description, reviews, ...props } = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
-  {(title || description) && (
-    <SectionContainer class="items-center gap-4 text-center">
-      {title && <SectionTitle>{title}</SectionTitle>}
-      {description && (
-        <SectionDescription class="max-w-2xl">{description}</SectionDescription>
-      )}
-    </SectionContainer>
-  )}
+  <SectionContainer class="items-center gap-4 text-center">
+    <SectionTitle>{title}</SectionTitle>
+    <SectionDescription class="max-w-2xl">{description}</SectionDescription>
+  </SectionContainer>
   <SectionContainer>
     <div class="grid gap-6 md:grid-cols-3">
       {reviews.map((item) => (
diff --git a/src/components/blocks/reviews-3.astro b/src/components/blocks/reviews-3.astro
index f49ee664f..1e61e7bc4 100644
--- a/src/components/blocks/reviews-3.astro
+++ b/src/components/blocks/reviews-3.astro
@@ -21,8 +21,8 @@ import {
 } from "@/components/ui/section"
 
 type Props = HTMLAttributes<"section"> & {
-  title?: string
-  description?: string
+  title: string
+  description: string
   reviews: {
     rating: number
     quote: string
@@ -37,14 +37,10 @@ const { class: className, title, description, reviews, ...props } = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
-  {(title || description) && (
-    <SectionContainer class="items-center gap-4 text-center">
-      {title && <SectionTitle>{title}</SectionTitle>}
-      {description && (
-        <SectionDescription class="max-w-2xl">{description}</SectionDescription>
-      )}
-    </SectionContainer>
-  )}
+  <SectionContainer class="items-center gap-4 text-center">
+    <SectionTitle>{title}</SectionTitle>
+    <SectionDescription class="max-w-2xl">{description}</SectionDescription>
+  </SectionContainer>
   <SectionContainer>
     <Carousel
       aria-label={title}
diff --git a/src/components/blocks/reviews-4.astro b/src/components/blocks/reviews-4.astro
index fa8de0918..1d1c2dcfd 100644
--- a/src/components/blocks/reviews-4.astro
+++ b/src/components/blocks/reviews-4.astro
@@ -15,8 +15,8 @@ import {
 } from "@/components/ui/section"
 
 type Props = HTMLAttributes<"section"> & {
-  title?: string
-  description?: string
+  title: string
+  description: string
   reviews: {
     rating: number
     quote: string
@@ -35,14 +35,10 @@ const bottomRow = reviews.slice(half)
 ---
 
 <Section class={cn("", className)} {...props}>
-  {(title || description) && (
-    <SectionContainer class="items-center gap-4 text-center">
-      {title && <SectionTitle>{title}</SectionTitle>}
-      {description && (
-        <SectionDescription class="max-w-2xl">{description}</SectionDescription>
-      )}
-    </SectionContainer>
-  )}
+  <SectionContainer class="items-center gap-4 text-center">
+    <SectionTitle>{title}</SectionTitle>
+    <SectionDescription class="max-w-2xl">{description}</SectionDescription>
+  </SectionContainer>
   <div class="flex flex-col gap-6 overflow-x-hidden py-1">
     <Marquee
       direction="left"
diff --git a/src/components/blocks/reviews-5.astro b/src/components/blocks/reviews-5.astro
index b0e335bb4..4d2ee92a8 100644
--- a/src/components/blocks/reviews-5.astro
+++ b/src/components/blocks/reviews-5.astro
@@ -15,8 +15,8 @@ import {
 } from "@/components/ui/section"
 
 type Props = HTMLAttributes<"section"> & {
-  title?: string
-  description?: string
+  title: string
+  description: string
   reviews: {
     quote: string
     image?: ImageMetadata
@@ -36,14 +36,10 @@ const row3 = reviews.slice(third * 2)
 ---
 
 <Section class={cn("", className)} {...props}>
-  {(title || description) && (
-    <SectionContainer class="items-center gap-4 text-center">
-      {title && <SectionTitle>{title}</SectionTitle>}
-      {description && (
-        <SectionDescription class="max-w-2xl">{description}</SectionDescription>
-      )}
-    </SectionContainer>
-  )}
+  <SectionContainer class="items-center gap-4 text-center">
+    <SectionTitle>{title}</SectionTitle>
+    <SectionDescription class="max-w-2xl">{description}</SectionDescription>
+  </SectionContainer>
   <div class="flex flex-col gap-5">
     <Marquee
       direction="left"
diff --git a/src/components/blocks/services-1.astro b/src/components/blocks/services-1.astro
index 33c30684e..6c6f3649f 100644
--- a/src/components/blocks/services-1.astro
+++ b/src/components/blocks/services-1.astro
@@ -15,9 +15,9 @@ import {
 import PlaceholderImage from "@/assets/placeholder.svg"
 
 type Props = HTMLAttributes<"section"> & {
-  badge?: string
+  badge: string
   title: string
-  buttons?: {
+  buttons: {
     label: string
     href: string
   }[]
@@ -26,7 +26,7 @@ type Props = HTMLAttributes<"section"> & {
       src: ImageMetadata
       alt: string
     }
-    label?: string
+    label: string
     title: string
     description: string
     href?: string
@@ -47,18 +47,16 @@ const {
   <SectionContainer class="gap-8">
     <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
       <div class="max-w-2xl">
-        {badge && <Badge variant="secondary">{badge}</Badge>}
+        <Badge variant="secondary">{badge}</Badge>
         <SectionTitle class="mt-4">{title}</SectionTitle>
       </div>
-      {buttons && buttons.length > 0 && (
-        <div class="flex flex-wrap gap-3">
-          {buttons.map(({ href, label }) => (
-            <Button as="a" href={href} variant="outline">
-              {label}
-            </Button>
-          ))}
-        </div>
-      )}
+      <div class="flex flex-wrap gap-3">
+        {buttons.map(({ href, label }) => (
+          <Button as="a" href={href} variant="outline">
+            {label}
+          </Button>
+        ))}
+      </div>
     </div>
     <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
       {services.map((service) => {
@@ -79,11 +77,9 @@ const {
               sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw"
             />
             <div class="flex flex-1 flex-col gap-2 px-5 pb-5">
-              {service.label && (
-                <span class="text-primary text-xs font-medium">
-                  {service.label}
-                </span>
-              )}
+              <span class="text-primary text-xs font-medium">
+                {service.label}
+              </span>
               <h3 class="text-base font-medium">{service.title}</h3>
               <p class="text-muted-foreground text-sm leading-relaxed">
                 {service.description}
diff --git a/src/components/blocks/services-2.astro b/src/components/blocks/services-2.astro
index 94611c9b1..4feb088b6 100644
--- a/src/components/blocks/services-2.astro
+++ b/src/components/blocks/services-2.astro
@@ -14,22 +14,18 @@ import {
 import PlaceholderImage from "@/assets/placeholder.svg"
 
 type Props = HTMLAttributes<"section"> & {
-  badge?: string
+  badge: string
   title: string
-  description?: string
-  buttons?: {
-    label: string
-    href: string
-  }[]
+  description: string
   services: {
     image?: {
       src: ImageMetadata
       alt: string
     }
-    label?: string
+    label: string
     title: string
     description: string
-    button?: {
+    button: {
       label: string
       href: string
     }
@@ -41,7 +37,6 @@ const {
   badge,
   title,
   description,
-  buttons,
   services,
   ...props
 } = Astro.props
@@ -50,26 +45,11 @@ const {
 <Section class={cn("", className)} {...props}>
   <SectionContainer class="gap-12">
     <div class="mx-auto max-w-2xl text-center">
-      {badge && <Badge variant="secondary">{badge}</Badge>}
+      <Badge variant="secondary">{badge}</Badge>
       <SectionTitle class="mt-4">{title}</SectionTitle>
-      {description && (
-        <p class="text-muted-foreground mt-4 text-base leading-relaxed text-balance">
-          {description}
-        </p>
-      )}
-      {buttons && buttons.length > 0 && (
-        <div class="mt-6 flex flex-wrap justify-center gap-3">
-          {buttons.map(({ href, label }, index) => (
-            <Button
-              as="a"
-              href={href}
-              variant={index === 0 ? "default" : "outline"}
-            >
-              {label}
-            </Button>
-          ))}
-        </div>
-      )}
+      <p class="text-muted-foreground mt-4 text-base leading-relaxed text-balance">
+        {description}
+      </p>
     </div>
     <div class="grid gap-6 lg:gap-8">
       {services.map((service) => (
@@ -82,25 +62,21 @@ const {
             sizes="(min-width: 768px) 16rem, 100vw"
           />
           <div class="flex flex-col gap-2 py-2 md:py-6 md:pr-6">
-            {service.label && (
-              <span class="text-primary text-xs font-medium tracking-wider uppercase">
-                {service.label}
-              </span>
-            )}
+            <span class="text-primary text-xs font-medium tracking-wider uppercase">
+              {service.label}
+            </span>
             <h3 class="text-lg font-medium">{service.title}</h3>
             <p class="text-muted-foreground text-sm leading-relaxed">
               {service.description}
             </p>
-            {service.button && (
-              <Button
-                as="a"
-                href={service.button.href}
-                variant="secondary"
-                class="mt-1 w-fit"
-              >
-                {service.button.label}
-              </Button>
-            )}
+            <Button
+              as="a"
+              href={service.button.href}
+              variant="secondary"
+              class="mt-1 w-fit"
+            >
+              {service.button.label}
+            </Button>
           </div>
         </div>
       ))}
diff --git a/src/components/blocks/services-3.astro b/src/components/blocks/services-3.astro
index 8a9d773ce..90352c060 100644
--- a/src/components/blocks/services-3.astro
+++ b/src/components/blocks/services-3.astro
@@ -14,10 +14,10 @@ import {
 import PlaceholderImage from "@/assets/placeholder.svg"
 
 type Props = HTMLAttributes<"section"> & {
-  badge?: string
+  badge: string
   title: string
-  description?: string
-  buttons?: {
+  description: string
+  buttons: {
     label: string
     href: string
   }[]
@@ -28,7 +28,7 @@ type Props = HTMLAttributes<"section"> & {
     }
     title: string
     description: string
-    button?: {
+    button: {
       label: string
       href: string
     }
@@ -49,26 +49,22 @@ const {
 <Section class={cn("", className)} {...props}>
   <SectionContainer class="gap-8">
     <div class="mx-auto max-w-2xl text-center">
-      {badge && <Badge variant="secondary">{badge}</Badge>}
+      <Badge variant="secondary">{badge}</Badge>
       <SectionTitle class="mt-4">{title}</SectionTitle>
-      {description && (
-        <p class="text-muted-foreground mt-4 text-base leading-relaxed text-balance">
-          {description}
-        </p>
-      )}
-      {buttons && buttons.length > 0 && (
-        <div class="mt-6 flex flex-wrap justify-center gap-3">
-          {buttons.map(({ href, label }, index) => (
-            <Button
-              as="a"
-              href={href}
-              variant={index === 0 ? "default" : "outline"}
-            >
-              {label}
-            </Button>
-          ))}
-        </div>
-      )}
+      <p class="text-muted-foreground mt-4 text-base leading-relaxed text-balance">
+        {description}
+      </p>
+      <div class="mt-6 flex flex-wrap justify-center gap-3">
+        {buttons.map(({ href, label }, index) => (
+          <Button
+            as="a"
+            href={href}
+            variant={index === 0 ? "default" : "outline"}
+          >
+            {label}
+          </Button>
+        ))}
+      </div>
     </div>
     <div class="grid gap-6 sm:grid-cols-2">
       {services.map((service) => (
@@ -86,16 +82,14 @@ const {
             <p class="text-sm leading-relaxed text-white/80">
               {service.description}
             </p>
-            {service.button && (
-              <Button
-                as="a"
-                href={service.button.href}
-                variant="secondary"
-                class="mt-2 w-fit"
-              >
-                {service.button.label}
-              </Button>
-            )}
+            <Button
+              as="a"
+              href={service.button.href}
+              variant="secondary"
+              class="mt-2 w-fit"
+            >
+              {service.button.label}
+            </Button>
           </div>
         </div>
       ))}
diff --git a/src/components/blocks/services-4.astro b/src/components/blocks/services-4.astro
index 5535a8145..82c19a7db 100644
--- a/src/components/blocks/services-4.astro
+++ b/src/components/blocks/services-4.astro
@@ -15,8 +15,8 @@ import PlaceholderImage from "@/assets/placeholder.svg"
 
 type Props = HTMLAttributes<"section"> & {
   title: string
-  description?: string
-  buttons?: {
+  description: string
+  buttons: {
     label: string
     href: string
   }[]
@@ -46,25 +46,21 @@ const {
     <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
       <div class="max-w-2xl">
         <SectionTitle>{title}</SectionTitle>
-        {description && (
-          <p class="text-muted-foreground mt-4 text-base leading-relaxed text-balance">
-            {description}
-          </p>
-        )}
+        <p class="text-muted-foreground mt-4 text-base leading-relaxed text-balance">
+          {description}
+        </p>
+      </div>
+      <div class="flex flex-wrap gap-3">
+        {buttons.map(({ href, label }, index) => (
+          <Button
+            as="a"
+            href={href}
+            variant={index === 0 ? "default" : "outline"}
+          >
+            {label}
+          </Button>
+        ))}
       </div>
-      {buttons && buttons.length > 0 && (
-        <div class="flex flex-wrap gap-3">
-          {buttons.map(({ href, label }, index) => (
-            <Button
-              as="a"
-              href={href}
-              variant={index === 0 ? "default" : "outline"}
-            >
-              {label}
-            </Button>
-          ))}
-        </div>
-      )}
     </div>
     <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
       {services.map((service) => (
diff --git a/src/components/blocks/services-5.astro b/src/components/blocks/services-5.astro
index 4e2ddd6dc..1d635179f 100644
--- a/src/components/blocks/services-5.astro
+++ b/src/components/blocks/services-5.astro
@@ -4,7 +4,6 @@ import ArrowRightIcon from "@lucide/astro/icons/arrow-right"
 
 import { cn } from "@/lib/utils"
 import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
 import { Icon } from "@/components/ui/icon"
 import {
   Section,
@@ -13,15 +12,11 @@ import {
 } from "@/components/ui/section"
 
 type Props = HTMLAttributes<"section"> & {
-  badge?: string
+  badge: string
   title: string
-  description?: string
-  buttons?: {
-    label: string
-    href: string
-  }[]
+  description: string
   services: {
-    icon?: string
+    icon: string
     title: string
     description: string
     href?: string
@@ -33,7 +28,6 @@ const {
   badge,
   title,
   description,
-  buttons,
   services,
   ...props
 } = Astro.props
@@ -42,32 +36,17 @@ const {
 <Section class={cn("", className)} {...props}>
   <SectionContainer class="gap-12">
     <div class="mx-auto max-w-2xl text-center">
-      {badge && <Badge variant="secondary">{badge}</Badge>}
+      <Badge variant="secondary">{badge}</Badge>
       <SectionTitle class="mt-4">{title}</SectionTitle>
-      {description && (
-        <p class="text-muted-foreground mt-4 text-base leading-relaxed text-balance">
-          {description}
-        </p>
-      )}
-      {buttons && buttons.length > 0 && (
-        <div class="mt-6 flex flex-wrap justify-center gap-3">
-          {buttons.map(({ href, label }, index) => (
-            <Button
-              as="a"
-              href={href}
-              variant={index === 0 ? "default" : "outline"}
-            >
-              {label}
-            </Button>
-          ))}
-        </div>
-      )}
+      <p class="text-muted-foreground mt-4 text-base leading-relaxed text-balance">
+        {description}
+      </p>
     </div>
     <div class="ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4">
       {services.map((service) => (
         <div class="bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors">
           <div class="bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105">
-            <Icon name={service.icon ?? "layout-grid"} class="size-5" />
+            <Icon name={service.icon} class="size-5" />
           </div>
           <h3 class="text-base font-medium tracking-tight">{service.title}</h3>
           <p class="text-muted-foreground text-sm leading-relaxed">
diff --git a/src/components/blocks/services-6.astro b/src/components/blocks/services-6.astro
index 318d70306..785d1d541 100644
--- a/src/components/blocks/services-6.astro
+++ b/src/components/blocks/services-6.astro
@@ -11,10 +11,10 @@ import { Section, SectionContainer } from "@/components/ui/section"
 import PlaceholderImage from "@/assets/placeholder.svg"
 
 type Props = HTMLAttributes<"section"> & {
-  badge?: string
+  badge: string
   title: string
-  description?: string
-  buttons?: {
+  description: string
+  buttons: {
     label: string
     href: string
   }[]
@@ -43,28 +43,24 @@ const {
 <Section class={cn("", className)} {...props}>
   <SectionContainer class="grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start">
     <div class="lg:sticky lg:top-28">
-      {badge && <Badge variant="secondary">{badge}</Badge>}
+      <Badge variant="secondary">{badge}</Badge>
       <h2 class="mt-4 text-3xl font-semibold tracking-tight text-balance">
         {title}
       </h2>
-      {description && (
-        <p class="text-muted-foreground mt-4 text-sm leading-relaxed">
-          {description}
-        </p>
-      )}
-      {buttons && buttons.length > 0 && (
-        <div class="mt-6 flex flex-wrap gap-3">
-          {buttons.map(({ href, label }, index) => (
-            <Button
-              as="a"
-              href={href}
-              variant={index === 0 ? "default" : "outline"}
-            >
-              {label}
-            </Button>
-          ))}
-        </div>
-      )}
+      <p class="text-muted-foreground mt-4 text-sm leading-relaxed">
+        {description}
+      </p>
+      <div class="mt-6 flex flex-wrap gap-3">
+        {buttons.map(({ href, label }, index) => (
+          <Button
+            as="a"
+            href={href}
+            variant={index === 0 ? "default" : "outline"}
+          >
+            {label}
+          </Button>
+        ))}
+      </div>
     </div>
     <div class="grid gap-6 sm:grid-cols-2">
       {services.map((service) => (
diff --git a/src/components/blocks/services-7.astro b/src/components/blocks/services-7.astro
index c1224cabd..f7baf8ebb 100644
--- a/src/components/blocks/services-7.astro
+++ b/src/components/blocks/services-7.astro
@@ -15,10 +15,10 @@ import {
 import PlaceholderImage from "@/assets/placeholder.svg"
 
 type Props = HTMLAttributes<"section"> & {
-  badge?: string
+  badge: string
   title: string
-  description?: string
-  buttons?: {
+  description: string
+  buttons: {
     label: string
     href: string
   }[]
@@ -27,7 +27,7 @@ type Props = HTMLAttributes<"section"> & {
       src: ImageMetadata
       alt: string
     }
-    label?: string
+    label: string
     title: string
     description: string
     href?: string
@@ -49,27 +49,23 @@ const {
   <SectionContainer class="gap-8">
     <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
       <div class="max-w-2xl">
-        {badge && <Badge variant="secondary">{badge}</Badge>}
+        <Badge variant="secondary">{badge}</Badge>
         <SectionTitle class="mt-4">{title}</SectionTitle>
-        {description && (
-          <p class="text-muted-foreground mt-4 text-base leading-relaxed text-balance">
-            {description}
-          </p>
-        )}
+        <p class="text-muted-foreground mt-4 text-base leading-relaxed text-balance">
+          {description}
+        </p>
+      </div>
+      <div class="flex flex-wrap gap-3">
+        {buttons.map(({ href, label }, index) => (
+          <Button
+            as="a"
+            href={href}
+            variant={index === 0 ? "default" : "outline"}
+          >
+            {label}
+          </Button>
+        ))}
       </div>
-      {buttons && buttons.length > 0 && (
-        <div class="flex flex-wrap gap-3">
-          {buttons.map(({ href, label }, index) => (
-            <Button
-              as="a"
-              href={href}
-              variant={index === 0 ? "default" : "outline"}
-            >
-              {label}
-            </Button>
-          ))}
-        </div>
-      )}
     </div>
     <div class="grid gap-6 lg:grid-cols-3">
       {services.map((service, index) => (
@@ -95,11 +91,9 @@ const {
             }
           />
           <div class="flex flex-1 flex-col gap-2 p-5">
-            {service.label && (
-              <Badge variant="secondary" class="w-fit">
-                {service.label}
-              </Badge>
-            )}
+            <Badge variant="secondary" class="w-fit">
+              {service.label}
+            </Badge>
             <h3
               class={cn("font-medium", index === 0 ? "text-xl" : "text-base")}
             >

From 822968ec73d04a4af65eb4d20f9503108cde2ea0 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 15:58:12 +0200
Subject: [PATCH 20/60] Take block control and screen reader copy from props

Header menus, footer navigation, pricing, service links, ratings,
carousel arrows, doc code copy, the assistant prompt and Sidebar1
labels no longer fall back to English in block code. Headers render
their own sheet close so its label comes from props, and placeholder
images default to an empty alt.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/blocks/blocks-1.astro   | 10 +++---
 src/components/blocks/contact-3.astro  |  2 +-
 src/components/blocks/content-1.astro  |  2 +-
 src/components/blocks/content-2.astro  |  2 +-
 src/components/blocks/content-3.astro  |  2 +-
 src/components/blocks/content-4.astro  |  2 +-
 src/components/blocks/cta-1.astro      |  6 +++-
 src/components/blocks/cta-2.astro      |  8 +++--
 src/components/blocks/cta-3.astro      |  6 +++-
 src/components/blocks/cta-4.astro      |  8 +++--
 src/components/blocks/cta-5.astro      |  2 +-
 src/components/blocks/cta-6.astro      |  8 +++--
 src/components/blocks/doc-1.astro      | 48 +++++++++++++++-----------
 src/components/blocks/footer-2.astro   |  4 +--
 src/components/blocks/footer-3.astro   |  4 +--
 src/components/blocks/header-1.astro   | 25 +++++++++-----
 src/components/blocks/header-2.astro   | 25 +++++++++-----
 src/components/blocks/header-3.astro   | 25 +++++++++-----
 src/components/blocks/header-4.astro   | 25 +++++++++-----
 src/components/blocks/header-5.astro   | 25 +++++++++-----
 src/components/blocks/hero-10.astro    |  6 +++-
 src/components/blocks/hero-11.astro    |  6 +++-
 src/components/blocks/hero-2.astro     |  6 +++-
 src/components/blocks/hero-5.astro     |  6 +++-
 src/components/blocks/hero-6.astro     |  6 +++-
 src/components/blocks/hero-7.astro     |  6 +++-
 src/components/blocks/hero-9.astro     |  6 +++-
 src/components/blocks/pricing-1.astro  | 12 +++++--
 src/components/blocks/reviews-1.astro  |  3 +-
 src/components/blocks/reviews-2.astro  |  3 +-
 src/components/blocks/reviews-3.astro  | 27 ++++++++++++---
 src/components/blocks/reviews-4.astro  |  5 +--
 src/components/blocks/reviews-5.astro  |  7 ++--
 src/components/blocks/services-4.astro |  4 ++-
 src/components/blocks/services-5.astro |  4 ++-
 src/components/blocks/services-7.astro |  4 ++-
 src/components/blocks/sidebar-1.astro  | 40 +++++++++++++++------
 src/content/pages/blocks/cta.mdx       |  5 +++
 src/content/pages/blocks/doc.mdx       |  3 ++
 src/content/pages/blocks/footer.mdx    |  2 ++
 src/content/pages/blocks/header.mdx    | 35 +++++++++++++++++++
 src/content/pages/blocks/hero.mdx      |  7 ++++
 src/content/pages/blocks/index.mdx     |  7 ++++
 src/content/pages/blocks/pricing.mdx   |  1 +
 src/content/pages/blocks/reviews.mdx   | 25 ++++++++++++++
 src/content/pages/blocks/services.mdx  |  3 ++
 src/layouts/base.astro                 |  9 +++++
 src/layouts/block.astro                |  1 +
 src/layouts/doc.astro                  |  2 ++
 49 files changed, 368 insertions(+), 122 deletions(-)

diff --git a/src/components/blocks/blocks-1.astro b/src/components/blocks/blocks-1.astro
index 6222e7d68..87c2bdfd3 100644
--- a/src/components/blocks/blocks-1.astro
+++ b/src/components/blocks/blocks-1.astro
@@ -49,6 +49,7 @@ type Props = HTMLAttributes<"div"> & {
     openInChatGPT: string
     openInClaude: string
     openInCursor: string
+    assistantPrompt: string
     pagination: string
   }
 }
@@ -67,9 +68,6 @@ const {
 const showCopyButton = Boolean(copyButton)
 const showOpenButton = Boolean(markdownUrl)
 const showPagination = Boolean(previousPage || nextPage)
-const assistantPrompt = markdownUrl
-  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`
-  : ""
 const openLinks = markdownUrl
   ? [
       {
@@ -79,17 +77,17 @@ const openLinks = markdownUrl
       },
       {
         label: labels.openInChatGPT,
-        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,
+        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,
         icon: "chatgpt",
       },
       {
         label: labels.openInClaude,
-        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,
+        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,
         icon: "claude",
       },
       {
         label: labels.openInCursor,
-        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,
+        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,
         icon: "cursor",
       },
     ]
diff --git a/src/components/blocks/contact-3.astro b/src/components/blocks/contact-3.astro
index e52265233..05ec23f68 100644
--- a/src/components/blocks/contact-3.astro
+++ b/src/components/blocks/contact-3.astro
@@ -57,7 +57,7 @@ const {
   description,
   contactItems,
   form,
-  image = { src: PlaceholderImage, alt: "Contact image" },
+  image = { src: PlaceholderImage, alt: "" },
   ...props
 } = Astro.props
 const formId = form.id ?? `contact-${crypto.randomUUID()}`
diff --git a/src/components/blocks/content-1.astro b/src/components/blocks/content-1.astro
index a9575fd3a..4f4baee26 100644
--- a/src/components/blocks/content-1.astro
+++ b/src/components/blocks/content-1.astro
@@ -34,7 +34,7 @@ const {
   description,
   features,
   buttons,
-  image = { src: PlaceholderImage, alt: "Content image" },
+  image = { src: PlaceholderImage, alt: "" },
   ...props
 } = Astro.props
 ---
diff --git a/src/components/blocks/content-2.astro b/src/components/blocks/content-2.astro
index 3c065e696..a0ef8294b 100644
--- a/src/components/blocks/content-2.astro
+++ b/src/components/blocks/content-2.astro
@@ -34,7 +34,7 @@ const {
   description,
   features,
   buttons,
-  image = { src: PlaceholderImage, alt: "Content image" },
+  image = { src: PlaceholderImage, alt: "" },
   ...props
 } = Astro.props
 ---
diff --git a/src/components/blocks/content-3.astro b/src/components/blocks/content-3.astro
index 55eec2a20..e16eacd88 100644
--- a/src/components/blocks/content-3.astro
+++ b/src/components/blocks/content-3.astro
@@ -31,7 +31,7 @@ const {
   title,
   description,
   buttons,
-  image = { src: PlaceholderImage, alt: "Content image" },
+  image = { src: PlaceholderImage, alt: "" },
   ...props
 } = Astro.props
 ---
diff --git a/src/components/blocks/content-4.astro b/src/components/blocks/content-4.astro
index f6c742f86..651175fde 100644
--- a/src/components/blocks/content-4.astro
+++ b/src/components/blocks/content-4.astro
@@ -34,7 +34,7 @@ const {
   description,
   features,
   buttons,
-  image = { src: PlaceholderImage, alt: "Content image" },
+  image = { src: PlaceholderImage, alt: "" },
   ...props
 } = Astro.props
 ---
diff --git a/src/components/blocks/cta-1.astro b/src/components/blocks/cta-1.astro
index 3ef8c6633..f82d48092 100644
--- a/src/components/blocks/cta-1.astro
+++ b/src/components/blocks/cta-1.astro
@@ -32,6 +32,7 @@ type Props = HTMLAttributes<"section"> & {
       name?: string
     }[]
     rating: number
+    ratingLabel: string
     text: string
   }
 }
@@ -62,7 +63,10 @@ const {
           ))}
         </AvatarGroup>
         <div class="flex items-center gap-2">
-          <Rating value={socialProof.rating} />
+          <Rating
+            value={socialProof.rating}
+            aria-label={socialProof.ratingLabel}
+          />
           <span class="text-muted-foreground text-sm">{socialProof.text}</span>
         </div>
       </div>
diff --git a/src/components/blocks/cta-2.astro b/src/components/blocks/cta-2.astro
index c3591d32c..0a507763a 100644
--- a/src/components/blocks/cta-2.astro
+++ b/src/components/blocks/cta-2.astro
@@ -33,6 +33,7 @@ type Props = HTMLAttributes<"section"> & {
       name?: string
     }[]
     rating: number
+    ratingLabel: string
     text: string
   }
   image?: {
@@ -47,7 +48,7 @@ const {
   description,
   buttons,
   socialProof,
-  image = { src: PlaceholderImage, alt: "CTA image" },
+  image = { src: PlaceholderImage, alt: "" },
   ...props
 } = Astro.props
 ---
@@ -86,7 +87,10 @@ const {
           ))}
         </AvatarGroup>
         <div class="flex flex-col gap-0.5">
-          <Rating value={socialProof.rating} />
+          <Rating
+            value={socialProof.rating}
+            aria-label={socialProof.ratingLabel}
+          />
           <span class="text-muted-foreground text-xs">{socialProof.text}</span>
         </div>
       </div>
diff --git a/src/components/blocks/cta-3.astro b/src/components/blocks/cta-3.astro
index db409b5d7..d391aaf5c 100644
--- a/src/components/blocks/cta-3.astro
+++ b/src/components/blocks/cta-3.astro
@@ -31,6 +31,7 @@ type Props = HTMLAttributes<"section"> & {
       name?: string
     }[]
     rating: number
+    ratingLabel: string
     text: string
   }
 }
@@ -83,7 +84,10 @@ const {
           ))}
         </AvatarGroup>
         <div class="flex flex-col gap-0.5">
-          <Rating value={socialProof.rating} />
+          <Rating
+            value={socialProof.rating}
+            aria-label={socialProof.ratingLabel}
+          />
           <span class="text-muted-foreground text-xs">{socialProof.text}</span>
         </div>
       </div>
diff --git a/src/components/blocks/cta-4.astro b/src/components/blocks/cta-4.astro
index 143192f63..78d54d566 100644
--- a/src/components/blocks/cta-4.astro
+++ b/src/components/blocks/cta-4.astro
@@ -34,6 +34,7 @@ type Props = HTMLAttributes<"section"> & {
       name?: string
     }[]
     rating: number
+    ratingLabel: string
     text: string
   }
   image?: {
@@ -48,7 +49,7 @@ const {
   description,
   buttons,
   socialProof,
-  image = { src: PlaceholderImage, alt: "CTA image" },
+  image = { src: PlaceholderImage, alt: "" },
   ...props
 } = Astro.props
 ---
@@ -95,7 +96,10 @@ const {
         ))}
       </AvatarGroup>
       <div class="flex flex-col gap-0.5">
-        <Rating value={socialProof.rating} />
+        <Rating
+          value={socialProof.rating}
+          aria-label={socialProof.ratingLabel}
+        />
         <span class="text-muted-foreground text-sm">{socialProof.text}</span>
       </div>
     </div>
diff --git a/src/components/blocks/cta-5.astro b/src/components/blocks/cta-5.astro
index 016308c48..e34a45c14 100644
--- a/src/components/blocks/cta-5.astro
+++ b/src/components/blocks/cta-5.astro
@@ -33,7 +33,7 @@ const {
   description,
   features,
   buttons,
-  image = { src: PlaceholderImage, alt: "CTA image" },
+  image = { src: PlaceholderImage, alt: "" },
   ...props
 } = Astro.props
 ---
diff --git a/src/components/blocks/cta-6.astro b/src/components/blocks/cta-6.astro
index f92eb8b72..8ebe3fee0 100644
--- a/src/components/blocks/cta-6.astro
+++ b/src/components/blocks/cta-6.astro
@@ -33,6 +33,7 @@ type Props = HTMLAttributes<"section"> & {
       name?: string
     }[]
     rating: number
+    ratingLabel: string
     text: string
   }
   image?: {
@@ -47,7 +48,7 @@ const {
   description,
   buttons,
   socialProof,
-  image = { src: PlaceholderImage, alt: "CTA image" },
+  image = { src: PlaceholderImage, alt: "" },
   ...props
 } = Astro.props
 ---
@@ -93,7 +94,10 @@ const {
           ))}
         </AvatarGroup>
         <div class="flex flex-col gap-0.5">
-          <Rating value={socialProof.rating} />
+          <Rating
+            value={socialProof.rating}
+            aria-label={socialProof.ratingLabel}
+          />
           <span class="text-muted-foreground text-xs">{socialProof.text}</span>
         </div>
       </div>
diff --git a/src/components/blocks/doc-1.astro b/src/components/blocks/doc-1.astro
index 3b12ea486..cbf497d55 100644
--- a/src/components/blocks/doc-1.astro
+++ b/src/components/blocks/doc-1.astro
@@ -74,6 +74,8 @@ type Props = HTMLAttributes<"div"> & {
     openInChatGPT: string
     openInClaude: string
     openInCursor: string
+    assistantPrompt: string
+    copyCode: string
     pagination: string
     toc: string
   }
@@ -95,9 +97,6 @@ const {
 const showCopyButton = Boolean(copyButton)
 const showOpenButton = Boolean(markdownUrl)
 const showPagination = Boolean(previousPage || nextPage)
-const assistantPrompt = markdownUrl
-  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`
-  : ""
 const openLinks = markdownUrl
   ? [
       {
@@ -107,17 +106,17 @@ const openLinks = markdownUrl
       },
       {
         label: labels.openInChatGPT,
-        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,
+        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,
         icon: "chatgpt",
       },
       {
         label: labels.openInClaude,
-        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,
+        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,
         icon: "claude",
       },
       {
         label: labels.openInCursor,
-        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,
+        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,
         icon: "cursor",
       },
     ]
@@ -219,7 +218,12 @@ const openLinks = markdownUrl
       </div>
     </header>
 
-    <Typography as="article" size="sm" data-doc-content>
+    <Typography
+      as="article"
+      size="sm"
+      data-doc-content
+      data-copy-label={labels.copyCode}
+    >
       <slot />
     </Typography>
 
@@ -382,19 +386,23 @@ const openLinks = markdownUrl
   const copyIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>`
   const checkIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>`
   const initializeCodeBlocks = () => {
-    document.querySelectorAll("[data-doc-content] > pre").forEach((pre) => {
-      if (pre.closest(".docs-code-block")) return
-      const wrapper = document.createElement("div")
-      const button = document.createElement("button")
-      wrapper.className = "docs-code-block"
-      wrapper.dataset.notTypeset = ""
-      button.type = "button"
-      button.className = "docs-code-copy"
-      button.ariaLabel = "Copy code"
-      button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class="hidden">${checkIcon}</span>`
-      pre.before(wrapper)
-      wrapper.append(pre, button)
-    })
+    document
+      .querySelectorAll<HTMLElement>("[data-doc-content]")
+      .forEach((content) => {
+        content.querySelectorAll(":scope > pre").forEach((pre) => {
+          if (pre.closest(".docs-code-block")) return
+          const wrapper = document.createElement("div")
+          const button = document.createElement("button")
+          wrapper.className = "docs-code-block"
+          wrapper.dataset.notTypeset = ""
+          button.type = "button"
+          button.className = "docs-code-copy"
+          button.ariaLabel = content.dataset.copyLabel ?? null
+          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class="hidden">${checkIcon}</span>`
+          pre.before(wrapper)
+          wrapper.append(pre, button)
+        })
+      })
   }
 
   initializeCodeBlocks()
diff --git a/src/components/blocks/footer-2.astro b/src/components/blocks/footer-2.astro
index 19d63a954..77428660a 100644
--- a/src/components/blocks/footer-2.astro
+++ b/src/components/blocks/footer-2.astro
@@ -21,7 +21,7 @@ type Props = HTMLAttributes<"footer"> & {
     icon?: string
   }[]
   copyright: string
-  navigationLabel?: string
+  navigationLabel: string
 }
 
 const {
@@ -32,7 +32,7 @@ const {
   links,
   socials,
   copyright,
-  navigationLabel = "Footer navigation",
+  navigationLabel,
   ...props
 } = Astro.props
 ---
diff --git a/src/components/blocks/footer-3.astro b/src/components/blocks/footer-3.astro
index 92553cbe4..2d4636c0a 100644
--- a/src/components/blocks/footer-3.astro
+++ b/src/components/blocks/footer-3.astro
@@ -28,7 +28,7 @@ type Props = HTMLAttributes<"footer"> & {
     label: string
     href: string
   }[]
-  navigationLabel?: string
+  navigationLabel: string
 }
 
 const {
@@ -40,7 +40,7 @@ const {
   columns,
   copyright,
   bottomLinks,
-  navigationLabel = "Footer navigation",
+  navigationLabel,
   ...props
 } = Astro.props
 ---
diff --git a/src/components/blocks/header-1.astro b/src/components/blocks/header-1.astro
index 17e1e2379..144005ef9 100644
--- a/src/components/blocks/header-1.astro
+++ b/src/components/blocks/header-1.astro
@@ -1,5 +1,6 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import XIcon from "@lucide/astro/icons/x"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
@@ -41,11 +42,12 @@ type Props = HTMLAttributes<"header"> & {
     href: string
     icon?: string
   }[]
-  navigationLabel?: string
-  menu?: {
+  navigationLabel: string
+  menu: {
     label: string
     title: string
     description: string
+    closeLabel: string
   }
 }
 
@@ -54,12 +56,8 @@ const {
   logo,
   navigation,
   buttons,
-  navigationLabel = "Main navigation",
-  menu = {
-    label: "Open menu",
-    title: "Menu",
-    description: "Site navigation and actions.",
-  },
+  navigationLabel,
+  menu,
   ...props
 } = Astro.props
 ---
@@ -117,7 +115,7 @@ const {
       >
         <Icon name="menu" />
       </SheetTrigger>
-      <SheetContent side="right" class="p-0">
+      <SheetContent side="right" showCloseButton={false} class="p-0">
         <SheetHeader class="sr-only">
           <SheetTitle>{menu.title}</SheetTitle>
           <SheetDescription>{menu.description}</SheetDescription>
@@ -140,6 +138,15 @@ const {
             <slot name="mobile" />
           </div>
         </div>
+        <SheetClose
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          class="cn-sheet-close"
+        >
+          <XIcon />
+          <span class="sr-only">{menu.closeLabel}</span>
+        </SheetClose>
       </SheetContent>
     </Sheet>
   </HeaderContainer>
diff --git a/src/components/blocks/header-2.astro b/src/components/blocks/header-2.astro
index 71943b808..269191154 100644
--- a/src/components/blocks/header-2.astro
+++ b/src/components/blocks/header-2.astro
@@ -1,5 +1,6 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import XIcon from "@lucide/astro/icons/x"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
@@ -41,11 +42,12 @@ type Props = HTMLAttributes<"header"> & {
     href: string
     icon?: string
   }[]
-  navigationLabel?: string
-  menu?: {
+  navigationLabel: string
+  menu: {
     label: string
     title: string
     description: string
+    closeLabel: string
   }
 }
 
@@ -54,12 +56,8 @@ const {
   logo,
   navigation,
   buttons,
-  navigationLabel = "Main navigation",
-  menu = {
-    label: "Open menu",
-    title: "Menu",
-    description: "Site navigation and actions.",
-  },
+  navigationLabel,
+  menu,
   ...props
 } = Astro.props
 ---
@@ -117,7 +115,7 @@ const {
       >
         <Icon name="menu" />
       </SheetTrigger>
-      <SheetContent side="right" class="p-0">
+      <SheetContent side="right" showCloseButton={false} class="p-0">
         <SheetHeader class="sr-only">
           <SheetTitle>{menu.title}</SheetTitle>
           <SheetDescription>{menu.description}</SheetDescription>
@@ -140,6 +138,15 @@ const {
             <slot name="mobile" />
           </div>
         </div>
+        <SheetClose
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          class="cn-sheet-close"
+        >
+          <XIcon />
+          <span class="sr-only">{menu.closeLabel}</span>
+        </SheetClose>
       </SheetContent>
     </Sheet>
   </HeaderContainer>
diff --git a/src/components/blocks/header-3.astro b/src/components/blocks/header-3.astro
index 3136b54f9..8a8679ce2 100644
--- a/src/components/blocks/header-3.astro
+++ b/src/components/blocks/header-3.astro
@@ -1,5 +1,6 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import XIcon from "@lucide/astro/icons/x"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
@@ -42,11 +43,12 @@ type Props = HTMLAttributes<"header"> & {
     href: string
     icon?: string
   }[]
-  navigationLabel?: string
-  menu?: {
+  navigationLabel: string
+  menu: {
     label: string
     title: string
     description: string
+    closeLabel: string
   }
 }
 
@@ -55,12 +57,8 @@ const {
   logo,
   navigation,
   buttons,
-  navigationLabel = "Main navigation",
-  menu = {
-    label: "Open menu",
-    title: "Menu",
-    description: "Site navigation and actions.",
-  },
+  navigationLabel,
+  menu,
   ...props
 } = Astro.props
 ---
@@ -122,7 +120,7 @@ const {
       >
         <Icon name="menu" />
       </SheetTrigger>
-      <SheetContent side="right" class="p-0">
+      <SheetContent side="right" showCloseButton={false} class="p-0">
         <SheetHeader class="sr-only">
           <SheetTitle>{menu.title}</SheetTitle>
           <SheetDescription>{menu.description}</SheetDescription>
@@ -146,6 +144,15 @@ const {
             <slot name="mobile" />
           </div>
         </div>
+        <SheetClose
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          class="cn-sheet-close"
+        >
+          <XIcon />
+          <span class="sr-only">{menu.closeLabel}</span>
+        </SheetClose>
       </SheetContent>
     </Sheet>
   </HeaderContainer>
diff --git a/src/components/blocks/header-4.astro b/src/components/blocks/header-4.astro
index 514455d6a..c610b025b 100644
--- a/src/components/blocks/header-4.astro
+++ b/src/components/blocks/header-4.astro
@@ -2,6 +2,7 @@
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
 import type { HTMLAttributes } from "astro/types"
+import XIcon from "@lucide/astro/icons/x"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
@@ -58,11 +59,12 @@ type Props = HTMLAttributes<"header"> & {
     href: string
     icon?: string
   }[]
-  navigationLabel?: string
-  menu?: {
+  navigationLabel: string
+  menu: {
     label: string
     title: string
     description: string
+    closeLabel: string
   }
 }
 
@@ -71,12 +73,8 @@ const {
   logo,
   navigation,
   buttons,
-  navigationLabel = "Main navigation",
-  menu = {
-    label: "Open menu",
-    title: "Menu",
-    description: "Site navigation and actions.",
-  },
+  navigationLabel,
+  menu,
   ...props
 } = Astro.props
 ---
@@ -194,7 +192,7 @@ const {
       >
         <Icon name="menu" />
       </SheetTrigger>
-      <SheetContent side="right" class="p-0">
+      <SheetContent side="right" showCloseButton={false} class="p-0">
         <SheetHeader class="sr-only">
           <SheetTitle>{menu.title}</SheetTitle>
           <SheetDescription>{menu.description}</SheetDescription>
@@ -235,6 +233,15 @@ const {
             <slot name="mobile" />
           </div>
         </div>
+        <SheetClose
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          class="cn-sheet-close"
+        >
+          <XIcon />
+          <span class="sr-only">{menu.closeLabel}</span>
+        </SheetClose>
       </SheetContent>
     </Sheet>
   </HeaderContainer>
diff --git a/src/components/blocks/header-5.astro b/src/components/blocks/header-5.astro
index 8a80a0301..3f29c8f9a 100644
--- a/src/components/blocks/header-5.astro
+++ b/src/components/blocks/header-5.astro
@@ -2,6 +2,7 @@
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
 import type { HTMLAttributes } from "astro/types"
+import XIcon from "@lucide/astro/icons/x"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
@@ -59,11 +60,12 @@ type Props = HTMLAttributes<"header"> & {
     href: string
     icon?: string
   }[]
-  navigationLabel?: string
-  menu?: {
+  navigationLabel: string
+  menu: {
     label: string
     title: string
     description: string
+    closeLabel: string
   }
 }
 
@@ -72,12 +74,8 @@ const {
   logo,
   navigation,
   buttons,
-  navigationLabel = "Main navigation",
-  menu = {
-    label: "Open menu",
-    title: "Menu",
-    description: "Site navigation and actions.",
-  },
+  navigationLabel,
+  menu,
   ...props
 } = Astro.props
 ---
@@ -124,7 +122,7 @@ const {
       >
         <Icon name="menu" />
       </SheetTrigger>
-      <SheetContent side="right" class="p-0">
+      <SheetContent side="right" showCloseButton={false} class="p-0">
         <SheetHeader class="sr-only">
           <SheetTitle>{menu.title}</SheetTitle>
           <SheetDescription>{menu.description}</SheetDescription>
@@ -166,6 +164,15 @@ const {
             <slot name="mobile" />
           </div>
         </div>
+        <SheetClose
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          class="cn-sheet-close"
+        >
+          <XIcon />
+          <span class="sr-only">{menu.closeLabel}</span>
+        </SheetClose>
       </SheetContent>
     </Sheet>
   </HeaderContainer>
diff --git a/src/components/blocks/hero-10.astro b/src/components/blocks/hero-10.astro
index 34cd9ee6e..f44bdfb5d 100644
--- a/src/components/blocks/hero-10.astro
+++ b/src/components/blocks/hero-10.astro
@@ -28,6 +28,7 @@ type Props = HTMLAttributes<"section"> & {
       name?: string
     }[]
     rating: number
+    ratingLabel: string
     text: string
   }
   image: {
@@ -87,7 +88,10 @@ const {
           ))}
         </AvatarGroup>
         <div class="flex flex-col gap-0.5">
-          <Rating value={socialProof.rating} />
+          <Rating
+            value={socialProof.rating}
+            aria-label={socialProof.ratingLabel}
+          />
           <span class="text-muted-foreground text-xs">{socialProof.text}</span>
         </div>
       </div>
diff --git a/src/components/blocks/hero-11.astro b/src/components/blocks/hero-11.astro
index c733749f7..d69b59f02 100644
--- a/src/components/blocks/hero-11.astro
+++ b/src/components/blocks/hero-11.astro
@@ -28,6 +28,7 @@ type Props = HTMLAttributes<"section"> & {
       name?: string
     }[]
     rating: number
+    ratingLabel: string
     text: string
   }
   image: {
@@ -83,7 +84,10 @@ const {
         ))}
       </AvatarGroup>
       <div class="flex flex-col gap-0.5">
-        <Rating value={socialProof.rating} />
+        <Rating
+          value={socialProof.rating}
+          aria-label={socialProof.ratingLabel}
+        />
         <span class="text-muted-foreground text-xs">{socialProof.text}</span>
       </div>
     </div>
diff --git a/src/components/blocks/hero-2.astro b/src/components/blocks/hero-2.astro
index 77b97f6b1..49c54cc02 100644
--- a/src/components/blocks/hero-2.astro
+++ b/src/components/blocks/hero-2.astro
@@ -32,6 +32,7 @@ type Props = HTMLAttributes<"section"> & {
       name?: string
     }[]
     rating: number
+    ratingLabel: string
     text: string
   }
   image: {
@@ -66,7 +67,10 @@ const {
         ))}
       </AvatarGroup>
       <div class="flex items-center gap-2">
-        <Rating value={socialProof.rating} />
+        <Rating
+          value={socialProof.rating}
+          aria-label={socialProof.ratingLabel}
+        />
         <span class="text-muted-foreground text-sm">{socialProof.text}</span>
       </div>
     </div>
diff --git a/src/components/blocks/hero-5.astro b/src/components/blocks/hero-5.astro
index e34d9fbfb..6363bc391 100644
--- a/src/components/blocks/hero-5.astro
+++ b/src/components/blocks/hero-5.astro
@@ -30,6 +30,7 @@ type Props = HTMLAttributes<"section"> & {
       name?: string
     }[]
     rating: number
+    ratingLabel: string
     text: string
   }
   image: {
@@ -94,7 +95,10 @@ const {
           ))}
         </AvatarGroup>
         <div class="flex flex-col gap-0.5">
-          <Rating value={socialProof.rating} />
+          <Rating
+            value={socialProof.rating}
+            aria-label={socialProof.ratingLabel}
+          />
           <span class="text-muted-foreground text-xs">{socialProof.text}</span>
         </div>
       </div>
diff --git a/src/components/blocks/hero-6.astro b/src/components/blocks/hero-6.astro
index 4601e6755..b1e28f69c 100644
--- a/src/components/blocks/hero-6.astro
+++ b/src/components/blocks/hero-6.astro
@@ -30,6 +30,7 @@ type Props = HTMLAttributes<"section"> & {
       name?: string
     }[]
     rating: number
+    ratingLabel: string
     text: string
   }
   image: {
@@ -103,7 +104,10 @@ const {
           ))}
         </AvatarGroup>
         <div class="flex flex-col gap-0.5">
-          <Rating value={socialProof.rating} />
+          <Rating
+            value={socialProof.rating}
+            aria-label={socialProof.ratingLabel}
+          />
           <span class="text-muted-foreground text-xs">{socialProof.text}</span>
         </div>
       </div>
diff --git a/src/components/blocks/hero-7.astro b/src/components/blocks/hero-7.astro
index 8fc8a8fa9..1eda4b85a 100644
--- a/src/components/blocks/hero-7.astro
+++ b/src/components/blocks/hero-7.astro
@@ -30,6 +30,7 @@ type Props = HTMLAttributes<"section"> & {
       name?: string
     }[]
     rating: number
+    ratingLabel: string
     text: string
   }
   image: {
@@ -94,7 +95,10 @@ const {
           ))}
         </AvatarGroup>
         <div class="flex flex-col gap-0.5">
-          <Rating value={socialProof.rating} />
+          <Rating
+            value={socialProof.rating}
+            aria-label={socialProof.ratingLabel}
+          />
           <span class="text-muted-foreground text-xs">{socialProof.text}</span>
         </div>
       </div>
diff --git a/src/components/blocks/hero-9.astro b/src/components/blocks/hero-9.astro
index 832682606..4e7fad4c9 100644
--- a/src/components/blocks/hero-9.astro
+++ b/src/components/blocks/hero-9.astro
@@ -30,6 +30,7 @@ type Props = HTMLAttributes<"section"> & {
       name?: string
     }[]
     rating: number
+    ratingLabel: string
     text: string
   }
   image: {
@@ -92,7 +93,10 @@ const {
           ))}
         </AvatarGroup>
         <div class="flex flex-col gap-0.5">
-          <Rating value={socialProof.rating} />
+          <Rating
+            value={socialProof.rating}
+            aria-label={socialProof.ratingLabel}
+          />
           <span class="text-muted-foreground text-xs">{socialProof.text}</span>
         </div>
       </div>
diff --git a/src/components/blocks/pricing-1.astro b/src/components/blocks/pricing-1.astro
index c5ad0572c..c4a7b57ca 100644
--- a/src/components/blocks/pricing-1.astro
+++ b/src/components/blocks/pricing-1.astro
@@ -25,6 +25,7 @@ import { Separator } from "@/components/ui/separator"
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
+  featuredLabel: string
   plans: {
     name: string
     description: string
@@ -40,7 +41,14 @@ type Props = HTMLAttributes<"section"> & {
   }[]
 }
 
-const { class: className, title, description, plans, ...props } = Astro.props
+const {
+  class: className,
+  title,
+  description,
+  featuredLabel,
+  plans,
+  ...props
+} = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
@@ -59,7 +67,7 @@ const { class: className, title, description, plans, ...props } = Astro.props
           <CardHeader>
             <div class="flex items-center gap-2">
               <CardTitle>{plan.name}</CardTitle>
-              {plan.featured && <Badge>Popular</Badge>}
+              {plan.featured && <Badge>{featuredLabel}</Badge>}
             </div>
             <CardDescription>{plan.description}</CardDescription>
           </CardHeader>
diff --git a/src/components/blocks/reviews-1.astro b/src/components/blocks/reviews-1.astro
index 23740fdf1..9c6a62c70 100644
--- a/src/components/blocks/reviews-1.astro
+++ b/src/components/blocks/reviews-1.astro
@@ -19,6 +19,7 @@ type Props = HTMLAttributes<"section"> & {
   description: string
   reviews: {
     rating: number
+    ratingLabel: string
     quote: string
     image?: ImageMetadata
     initials: string
@@ -41,7 +42,7 @@ const { class: className, title, description, reviews, ...props } = Astro.props
         <Card>
           <CardContent class="flex flex-col gap-4">
             <div class="flex items-center justify-between">
-              <Rating value={item.rating} />
+              <Rating value={item.rating} aria-label={item.ratingLabel} />
               <QuoteIcon class="text-muted-foreground/20 size-6" />
             </div>
             <p class="text-muted-foreground text-sm leading-relaxed">
diff --git a/src/components/blocks/reviews-2.astro b/src/components/blocks/reviews-2.astro
index 0f94651bd..cb9ce7b11 100644
--- a/src/components/blocks/reviews-2.astro
+++ b/src/components/blocks/reviews-2.astro
@@ -19,6 +19,7 @@ type Props = HTMLAttributes<"section"> & {
   }
   reviews: {
     rating: number
+    ratingLabel: string
     quote: string
     image?: ImageMetadata
     initials: string
@@ -53,7 +54,7 @@ const { class: className, featured, reviews, ...props } = Astro.props
         <article class="flex flex-col">
           <Separator />
           <div class="flex flex-col gap-3 pt-6">
-            <Rating value={item.rating} />
+            <Rating value={item.rating} aria-label={item.ratingLabel} />
             <p class="text-muted-foreground text-sm leading-relaxed">
               {item.quote}
             </p>
diff --git a/src/components/blocks/reviews-3.astro b/src/components/blocks/reviews-3.astro
index 1e61e7bc4..9200aad7f 100644
--- a/src/components/blocks/reviews-3.astro
+++ b/src/components/blocks/reviews-3.astro
@@ -1,6 +1,8 @@
 ---
 import type { ImageMetadata } from "astro"
 import type { HTMLAttributes } from "astro/types"
+import ChevronLeftIcon from "@lucide/astro/icons/chevron-left"
+import ChevronRightIcon from "@lucide/astro/icons/chevron-right"
 import QuoteIcon from "@lucide/astro/icons/quote"
 
 import { cn } from "@/lib/utils"
@@ -23,8 +25,11 @@ import {
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
+  previousLabel: string
+  nextLabel: string
   reviews: {
     rating: number
+    ratingLabel: string
     quote: string
     image?: ImageMetadata
     initials: string
@@ -33,7 +38,15 @@ type Props = HTMLAttributes<"section"> & {
   }[]
 }
 
-const { class: className, title, description, reviews, ...props } = Astro.props
+const {
+  class: className,
+  title,
+  description,
+  previousLabel,
+  nextLabel,
+  reviews,
+  ...props
+} = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
@@ -52,7 +65,7 @@ const { class: className, title, description, reviews, ...props } = Astro.props
           <CarouselItem>
             <div class="flex flex-col items-center gap-6 px-4 py-8 text-center">
               <QuoteIcon class="text-primary size-10" />
-              <Rating value={item.rating} />
+              <Rating value={item.rating} aria-label={item.ratingLabel} />
               <blockquote class="text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl">
                 {item.quote}
               </blockquote>
@@ -70,8 +83,14 @@ const { class: className, title, description, reviews, ...props } = Astro.props
           </CarouselItem>
         ))}
       </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
+      <CarouselPrevious>
+        <ChevronLeftIcon aria-hidden="true" />
+        <span class="sr-only">{previousLabel}</span>
+      </CarouselPrevious>
+      <CarouselNext>
+        <ChevronRightIcon aria-hidden="true" />
+        <span class="sr-only">{nextLabel}</span>
+      </CarouselNext>
     </Carousel>
   </SectionContainer>
 </Section>
diff --git a/src/components/blocks/reviews-4.astro b/src/components/blocks/reviews-4.astro
index 1d1c2dcfd..84f760fab 100644
--- a/src/components/blocks/reviews-4.astro
+++ b/src/components/blocks/reviews-4.astro
@@ -19,6 +19,7 @@ type Props = HTMLAttributes<"section"> & {
   description: string
   reviews: {
     rating: number
+    ratingLabel: string
     quote: string
     image?: ImageMetadata
     initials: string
@@ -50,7 +51,7 @@ const bottomRow = reviews.slice(half)
       {topRow.map((item) => (
         <Card class="flex w-[22rem] shrink-0 self-stretch">
           <CardContent class="flex flex-1 flex-col gap-3">
-            <Rating value={item.rating} />
+            <Rating value={item.rating} aria-label={item.ratingLabel} />
             <p class="text-muted-foreground text-sm leading-relaxed">
               {item.quote}
             </p>
@@ -78,7 +79,7 @@ const bottomRow = reviews.slice(half)
       {bottomRow.map((item) => (
         <Card class="flex w-[22rem] shrink-0 self-stretch">
           <CardContent class="flex flex-1 flex-col gap-3">
-            <Rating value={item.rating} />
+            <Rating value={item.rating} aria-label={item.ratingLabel} />
             <p class="text-muted-foreground text-sm leading-relaxed">
               {item.quote}
             </p>
diff --git a/src/components/blocks/reviews-5.astro b/src/components/blocks/reviews-5.astro
index 4d2ee92a8..d9693ba23 100644
--- a/src/components/blocks/reviews-5.astro
+++ b/src/components/blocks/reviews-5.astro
@@ -24,6 +24,7 @@ type Props = HTMLAttributes<"section"> & {
     name: string
     role: string
     rating: number
+    ratingLabel: string
   }[]
 }
 
@@ -64,7 +65,7 @@ const row3 = reviews.slice(third * 2)
                   <p class="text-muted-foreground text-xs">{item.role}</p>
                 </div>
               </div>
-              <Rating value={item.rating} />
+              <Rating value={item.rating} aria-label={item.ratingLabel} />
             </div>
             <div class="flex gap-2.5">
               <QuoteIcon class="text-primary/30 mt-0.5 size-5 shrink-0" />
@@ -99,7 +100,7 @@ const row3 = reviews.slice(third * 2)
                   <p class="text-muted-foreground text-xs">{item.role}</p>
                 </div>
               </div>
-              <Rating value={item.rating} />
+              <Rating value={item.rating} aria-label={item.ratingLabel} />
             </div>
             <div class="flex gap-2.5">
               <QuoteIcon class="text-primary/30 mt-0.5 size-5 shrink-0" />
@@ -134,7 +135,7 @@ const row3 = reviews.slice(third * 2)
                   <p class="text-muted-foreground text-xs">{item.role}</p>
                 </div>
               </div>
-              <Rating value={item.rating} />
+              <Rating value={item.rating} aria-label={item.ratingLabel} />
             </div>
             <div class="flex gap-2.5">
               <QuoteIcon class="text-primary/30 mt-0.5 size-5 shrink-0" />
diff --git a/src/components/blocks/services-4.astro b/src/components/blocks/services-4.astro
index 82c19a7db..4411119fa 100644
--- a/src/components/blocks/services-4.astro
+++ b/src/components/blocks/services-4.astro
@@ -16,6 +16,7 @@ import PlaceholderImage from "@/assets/placeholder.svg"
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
+  linkLabel: string
   buttons: {
     label: string
     href: string
@@ -36,6 +37,7 @@ const {
   title,
   description,
   buttons,
+  linkLabel,
   services,
   ...props
 } = Astro.props
@@ -83,7 +85,7 @@ const {
               href={service.href}
               class="text-primary inline-flex items-center gap-1.5 text-sm font-medium"
             >
-              Learn more
+              {linkLabel}
               <ArrowRightIcon class="size-3.5 transition-transform group-hover/service:translate-x-1" />
             </a>
           )}
diff --git a/src/components/blocks/services-5.astro b/src/components/blocks/services-5.astro
index 1d635179f..70f32b07a 100644
--- a/src/components/blocks/services-5.astro
+++ b/src/components/blocks/services-5.astro
@@ -15,6 +15,7 @@ type Props = HTMLAttributes<"section"> & {
   badge: string
   title: string
   description: string
+  linkLabel: string
   services: {
     icon: string
     title: string
@@ -28,6 +29,7 @@ const {
   badge,
   title,
   description,
+  linkLabel,
   services,
   ...props
 } = Astro.props
@@ -57,7 +59,7 @@ const {
               href={service.href}
               class="text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium"
             >
-              Learn more
+              {linkLabel}
               <ArrowRightIcon class="size-3.5 transition-transform group-hover/service:translate-x-1" />
             </a>
           )}
diff --git a/src/components/blocks/services-7.astro b/src/components/blocks/services-7.astro
index f7baf8ebb..8903e82a2 100644
--- a/src/components/blocks/services-7.astro
+++ b/src/components/blocks/services-7.astro
@@ -18,6 +18,7 @@ type Props = HTMLAttributes<"section"> & {
   badge: string
   title: string
   description: string
+  linkLabel: string
   buttons: {
     label: string
     href: string
@@ -40,6 +41,7 @@ const {
   title,
   description,
   buttons,
+  linkLabel,
   services,
   ...props
 } = Astro.props
@@ -108,7 +110,7 @@ const {
                 index !== 0 && "mt-auto"
               )}
             >
-              Learn more
+              {linkLabel}
               <ArrowRightIcon class="size-3.5 transition-transform group-hover/service:translate-x-1" />
             </div>
           </div>
diff --git a/src/components/blocks/sidebar-1.astro b/src/components/blocks/sidebar-1.astro
index 1c132f961..49bcf3456 100644
--- a/src/components/blocks/sidebar-1.astro
+++ b/src/components/blocks/sidebar-1.astro
@@ -93,6 +93,18 @@ type Props = {
   }[]
   githubRepo: string
   githubStars?: number
+  labels: {
+    github: string
+    stars: string
+    breadcrumb: string
+    breadcrumbMenu: string
+    sidebar: string
+    theme: string
+    shortcut: {
+      mac: string
+      other: string
+    }
+  }
 }
 
 const {
@@ -103,6 +115,7 @@ const {
   navigation,
   githubRepo,
   githubStars,
+  labels,
 } = Astro.props
 
 const normalizePath = (path: string) => {
@@ -127,7 +140,7 @@ const searchGroups = search.items.reduce<
 
 const githubStarsLabel =
   githubStars === undefined
-    ? "Stars"
+    ? labels.stars
     : new Intl.NumberFormat().format(githubStars)
 
 /* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */
@@ -163,8 +176,10 @@ const githubStarsLabel =
           <Kbd
             class="bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]"
             data-search-shortcut
+            data-shortcut-mac={labels.shortcut.mac}
+            data-shortcut-other={labels.shortcut.other}
           >
-            ⌘ + K
+            {labels.shortcut.mac}
           </Kbd>
         </DialogTrigger>
 
@@ -221,9 +236,9 @@ const githubStarsLabel =
     <Header class="h-16">
       <HeaderContainer class="max-w-none justify-between">
         <HeaderGroup>
-          <SidebarTrigger />
+          <SidebarTrigger aria-label={labels.sidebar} />
           <Separator orientation="vertical" class="my-auto mr-2 h-4" />
-          <Breadcrumb>
+          <Breadcrumb aria-label={labels.breadcrumb}>
             <BreadcrumbList>
               {breadcrumb.items.map((item, index) => {
                 const isLast = index === breadcrumb.items.length - 1
@@ -290,7 +305,7 @@ const githubStarsLabel =
                     <DropdownMenu>
                       <DropdownMenuTrigger class="hover:text-foreground inline-flex items-center leading-none transition-colors">
                         <BreadcrumbEllipsis />
-                        <span class="sr-only">Toggle menu</span>
+                        <span class="sr-only">{labels.breadcrumbMenu}</span>
                       </DropdownMenuTrigger>
                       <DropdownMenuContent align="start">
                         <DropdownMenuGroup>
@@ -316,12 +331,12 @@ const githubStarsLabel =
             variant="ghost"
             target="_blank"
             rel="noreferrer"
-            aria-label={`View ${githubRepo} on GitHub`}
+            aria-label={labels.github}
           >
             <Icon name="github" />
             <span class="hidden sm:inline">{githubStarsLabel}</span>
           </Button>
-          <ThemeToggle />
+          <ThemeToggle aria-label={labels.theme} />
         </HeaderGroup>
       </HeaderContainer>
     </Header>
@@ -334,9 +349,14 @@ const githubStarsLabel =
     navigator.platform || navigator.userAgent
   )
 
-  document.querySelectorAll("[data-search-shortcut]").forEach((shortcut) => {
-    shortcut.textContent = isMac ? "⌘ + K" : "Ctrl + K"
-  })
+  document
+    .querySelectorAll<HTMLElement>("[data-search-shortcut]")
+    .forEach((shortcut) => {
+      shortcut.textContent =
+        (isMac
+          ? shortcut.dataset.shortcutMac
+          : shortcut.dataset.shortcutOther) ?? null
+    })
 
   document.addEventListener("keydown", (event) => {
     if (event.key.toLowerCase() !== "k") return
diff --git a/src/content/pages/blocks/cta.mdx b/src/content/pages/blocks/cta.mdx
index ede57c9b2..c915b0fc1 100644
--- a/src/content/pages/blocks/cta.mdx
+++ b/src/content/pages/blocks/cta.mdx
@@ -25,6 +25,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
       { image: avatarSil, initials: "AR", name: "Sil Veltman" },
     ],
     rating: 5,
+    ratingLabel: "Rated 5 out of 5",
     text: "Loved by 2,000+ developers",
   }}
 />
@@ -50,6 +51,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
       { image: avatarSil, initials: "MK", name: "Sil Veltman" },
     ],
     rating: 5,
+    ratingLabel: "Rated 5 out of 5",
     text: "Trusted by agencies worldwide",
   }}
 />
@@ -76,6 +78,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
       { image: avatarSil, initials: "AR", name: "Sil Veltman" },
     ],
     rating: 5,
+    ratingLabel: "Rated 5 out of 5",
     text: "Built for modern teams",
   }}
 />
@@ -101,6 +104,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
       { image: avatarSil, initials: "MK", name: "Sil Veltman" },
     ],
     rating: 5,
+    ratingLabel: "Rated 5 out of 5",
     text: "Production-ready components",
   }}
 />
@@ -146,6 +150,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
       { image: avatarSil, initials: "MK", name: "Sil Veltman" },
     ],
     rating: 5,
+    ratingLabel: "Rated 5 out of 5",
     text: "No long pitch required",
   }}
 />
diff --git a/src/content/pages/blocks/doc.mdx b/src/content/pages/blocks/doc.mdx
index c83b7f670..b280c9d8d 100644
--- a/src/content/pages/blocks/doc.mdx
+++ b/src/content/pages/blocks/doc.mdx
@@ -38,6 +38,9 @@ import Doc1Block from "@/components/blocks/doc-1.astro"
     openInChatGPT: "Open in ChatGPT",
     openInClaude: "Open in Claude",
     openInCursor: "Open in Cursor",
+    assistantPrompt:
+      "Read https://ui.full.dev/components/command.md, I want to ask questions about it.",
+    copyCode: "Copy code",
     pagination: "Docs pagination",
     toc: "On this page",
   }}
diff --git a/src/content/pages/blocks/footer.mdx b/src/content/pages/blocks/footer.mdx
index 42c7935e8..f2664e8e7 100644
--- a/src/content/pages/blocks/footer.mdx
+++ b/src/content/pages/blocks/footer.mdx
@@ -77,6 +77,7 @@ import Footer2Block from "@/components/blocks/footer-2.astro"
     { label: "X", href: "https://x.com/", icon: "x" },
   ]}
   copyright="© 2026 fulldev/ui"
+  navigationLabel="Footer navigation"
 />
 ```
 
@@ -130,5 +131,6 @@ import Footer3Block from "@/components/blocks/footer-3.astro"
     { label: "Terms", href: "/" },
     { label: "Sitemap", href: "/" },
   ]}
+  navigationLabel="Footer navigation"
 />
 ```
diff --git a/src/content/pages/blocks/header.mdx b/src/content/pages/blocks/header.mdx
index 9d47b594c..91fb339e6 100644
--- a/src/content/pages/blocks/header.mdx
+++ b/src/content/pages/blocks/header.mdx
@@ -45,6 +45,13 @@ import HeaderBlock from "@/components/blocks/header-1.astro"
     { label: "Sign in", href: "#" },
     { label: "Get started", href: "#" },
   ]}
+  navigationLabel="Main navigation"
+  menu={{
+    label: "Open menu",
+    title: "Menu",
+    description: "Site navigation and actions.",
+    closeLabel: "Close",
+  }}
 />
 ```
 
@@ -68,6 +75,13 @@ import Header2Block from "@/components/blocks/header-2.astro"
     { label: "Sign in", href: "#" },
     { label: "Get started", href: "#" },
   ]}
+  navigationLabel="Main navigation"
+  menu={{
+    label: "Open menu",
+    title: "Menu",
+    description: "Site navigation and actions.",
+    closeLabel: "Close",
+  }}
 />
 ```
 
@@ -95,6 +109,13 @@ import Header3Block from "@/components/blocks/header-3.astro"
     { label: "Roadmap", href: "#" },
     { label: "Browse blocks", href: "#" },
   ]}
+  navigationLabel="Main navigation"
+  menu={{
+    label: "Open menu",
+    title: "Menu",
+    description: "Site navigation and actions.",
+    closeLabel: "Close",
+  }}
 />
 ```
 
@@ -162,6 +183,13 @@ import placeholderImage from "@/assets/placeholder.svg"
     { label: "Sign in", href: "#" },
     { label: "Start trial", href: "#" },
   ]}
+  navigationLabel="Main navigation"
+  menu={{
+    label: "Open menu",
+    title: "Menu",
+    description: "Site navigation and actions.",
+    closeLabel: "Close",
+  }}
 />
 ```
 
@@ -235,5 +263,12 @@ import placeholderImage from "@/assets/placeholder.svg"
     { label: "Contact sales", href: "#" },
     { label: "Get started", href: "#" },
   ]}
+  navigationLabel="Main navigation"
+  menu={{
+    label: "Open menu",
+    title: "Menu",
+    description: "Site navigation and actions.",
+    closeLabel: "Close",
+  }}
 />
 ```
diff --git a/src/content/pages/blocks/hero.mdx b/src/content/pages/blocks/hero.mdx
index 9b76e26db..40522e8c7 100644
--- a/src/content/pages/blocks/hero.mdx
+++ b/src/content/pages/blocks/hero.mdx
@@ -39,6 +39,7 @@ import placeholderImage from "@/assets/placeholder.svg"
       { image: avatarSil, initials: "SV", name: "Sil Veltman" },
     ],
     rating: 5,
+    ratingLabel: "Rated 5 out of 5",
     text: "4.9 from 2,400+ developers",
   }}
   buttons={[
@@ -115,6 +116,7 @@ import placeholderImage from "@/assets/placeholder.svg"
       { image: avatarSil, initials: "SV", name: "Sil Veltman" },
     ],
     rating: 5,
+    ratingLabel: "Rated 5 out of 5",
     text: "4.9 from product teams",
   }}
   image={{ src: placeholderImage, alt: "Product screenshot" }}
@@ -147,6 +149,7 @@ import placeholderImage from "@/assets/placeholder.svg"
       { image: avatarSil, initials: "UI", name: "Sil Veltman" },
     ],
     rating: 5,
+    ratingLabel: "Rated 5 out of 5",
     text: "Loved by Astro developers",
   }}
   image={{ src: placeholderImage, alt: "Product screenshot" }}
@@ -179,6 +182,7 @@ import placeholderImage from "@/assets/placeholder.svg"
       { image: avatarSil, initials: "SV", name: "Sil Veltman" },
     ],
     rating: 5,
+    ratingLabel: "Rated 5 out of 5",
     text: "Used by design teams",
   }}
   image={{ src: placeholderImage, alt: "Dashboard preview" }}
@@ -229,6 +233,7 @@ import placeholderImage from "@/assets/placeholder.svg"
       { image: avatarSil, initials: "SV", name: "Sil Veltman" },
     ],
     rating: 5,
+    ratingLabel: "Rated 5 out of 5",
     text: "4.9 from product teams",
   }}
   image={{ src: placeholderImage, alt: "Atmospheric background" }}
@@ -256,6 +261,7 @@ import placeholderImage from "@/assets/placeholder.svg"
       { image: avatarSil, initials: "UI", name: "Sil Veltman" },
     ],
     rating: 5,
+    ratingLabel: "Rated 5 out of 5",
     text: "Trusted by 2,400+ teams",
   }}
   image={{ src: placeholderImage, alt: "Full background" }}
@@ -283,6 +289,7 @@ import placeholderImage from "@/assets/placeholder.svg"
       { image: avatarSil, initials: "SV", name: "Sil Veltman" },
     ],
     rating: 5,
+    ratingLabel: "Rated 5 out of 5",
     text: "Loved by developers",
   }}
   image={{ src: placeholderImage, alt: "Full background" }}
diff --git a/src/content/pages/blocks/index.mdx b/src/content/pages/blocks/index.mdx
index 87b768757..72431f9cd 100644
--- a/src/content/pages/blocks/index.mdx
+++ b/src/content/pages/blocks/index.mdx
@@ -70,6 +70,13 @@ import HeaderBlock from "@/components/blocks/header-4.astro"
     { label: "Sign in", href: "#" },
     { label: "Start trial", href: "#" },
   ]}
+  navigationLabel="Main navigation"
+  menu={{
+    label: "Open menu",
+    title: "Menu",
+    description: "Site navigation and actions.",
+    closeLabel: "Close",
+  }}
 />
 ```
 
diff --git a/src/content/pages/blocks/pricing.mdx b/src/content/pages/blocks/pricing.mdx
index db12701ac..ae65959a6 100644
--- a/src/content/pages/blocks/pricing.mdx
+++ b/src/content/pages/blocks/pricing.mdx
@@ -12,6 +12,7 @@ import Pricing1Block from "@/components/blocks/pricing-1.astro"
 <Pricing1Block
   title="Simple, transparent pricing"
   description="Choose the plan that fits your workflow. Upgrade or downgrade at any time."
+  featuredLabel="Popular"
   plans={[
     {
       name: "Starter",
diff --git a/src/content/pages/blocks/reviews.mdx b/src/content/pages/blocks/reviews.mdx
index 4d350a876..dc02e4552 100644
--- a/src/content/pages/blocks/reviews.mdx
+++ b/src/content/pages/blocks/reviews.mdx
@@ -16,6 +16,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
   reviews={[
     {
       rating: 5,
+      ratingLabel: "Rated 5 out of 5",
       quote:
         "The component library saved us weeks of design work. Every piece feels polished and production-ready out of the box.",
       image: avatarSil,
@@ -25,6 +26,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
     },
     {
       rating: 5,
+      ratingLabel: "Rated 5 out of 5",
       quote:
         "We shipped our marketing site in half the time. The blocks are flexible enough to match any brand.",
       image: avatarSil,
@@ -34,6 +36,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
     },
     {
       rating: 4.5,
+      ratingLabel: "Rated 4.5 out of 5",
       quote:
         "Finally a component library that understands how real pages are built. The section patterns are incredibly useful.",
       image: avatarSil,
@@ -63,6 +66,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
   reviews={[
     {
       rating: 4.5,
+      ratingLabel: "Rated 4.5 out of 5",
       quote:
         "A narrower review card works well when the section already has one large featured quote beside it.",
       image: avatarSil,
@@ -72,6 +76,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
     },
     {
       rating: 5,
+      ratingLabel: "Rated 5 out of 5",
       quote:
         "Clean API, great defaults. We customized the theme in minutes and everything just worked together.",
       image: avatarSil,
@@ -95,6 +100,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
   reviews={[
     {
       rating: 5,
+      ratingLabel: "Rated 5 out of 5",
       quote:
         "The sections felt immediately useful and saved us weeks of page design churn. Best investment this quarter.",
       image: avatarSil,
@@ -104,6 +110,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
     },
     {
       rating: 5,
+      ratingLabel: "Rated 5 out of 5",
       quote:
         "We tried three other component libraries before this. Nothing else comes close in terms of design quality and developer experience.",
       image: avatarSil,
@@ -113,6 +120,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
     },
     {
       rating: 4.5,
+      ratingLabel: "Rated 4.5 out of 5",
       quote:
         "Our marketing team can now prototype landing pages without engineering help. That alone made it worth it.",
       image: avatarSil,
@@ -121,6 +129,8 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
       role: "Marketing Director, Signal",
     },
   ]}
+  previousLabel="Previous slide"
+  nextLabel="Next slide"
 />
 ```
 
@@ -136,6 +146,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
   reviews={[
     {
       rating: 5,
+      ratingLabel: "Rated 5 out of 5",
       quote:
         "We used the same section patterns across onboarding, features, and pricing without repeating ourselves.",
       image: avatarSil,
@@ -145,6 +156,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
     },
     {
       rating: 4.5,
+      ratingLabel: "Rated 4.5 out of 5",
       quote:
         "The carousel and marquee components are buttery smooth. Our landing page feels premium now.",
       image: avatarSil,
@@ -154,6 +166,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
     },
     {
       rating: 5,
+      ratingLabel: "Rated 5 out of 5",
       quote:
         "Accessibility was handled from day one. We passed our audit without a single component fix.",
       image: avatarSil,
@@ -163,6 +176,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
     },
     {
       rating: 5,
+      ratingLabel: "Rated 5 out of 5",
       quote:
         "Theming is a breeze. We swapped from light to dark mode in under an hour across 40 pages.",
       image: avatarSil,
@@ -172,6 +186,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
     },
     {
       rating: 4.5,
+      ratingLabel: "Rated 4.5 out of 5",
       quote:
         "Documentation is clear and examples are practical. Onboarding new devs takes a day, not a week.",
       image: avatarSil,
@@ -181,6 +196,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
     },
     {
       rating: 5,
+      ratingLabel: "Rated 5 out of 5",
       quote:
         "Every component composes beautifully. Building complex layouts from simple parts feels natural.",
       image: avatarSil,
@@ -210,6 +226,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
       name: "Alex Lindgren",
       role: "VP Engineering",
       rating: 5,
+      ratingLabel: "Rated 5 out of 5",
     },
     {
       quote:
@@ -219,6 +236,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
       name: "Maya Park",
       role: "Design lead",
       rating: 4.5,
+      ratingLabel: "Rated 4.5 out of 5",
     },
     {
       quote:
@@ -228,6 +246,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
       name: "Jordan Reed",
       role: "Fullstack dev",
       rating: 5,
+      ratingLabel: "Rated 5 out of 5",
     },
     {
       quote:
@@ -237,6 +256,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
       name: "Kim Torres",
       role: "Brand designer",
       rating: 5,
+      ratingLabel: "Rated 5 out of 5",
     },
     {
       quote:
@@ -246,6 +266,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
       name: "Ravi Bhat",
       role: "Engineering manager",
       rating: 5,
+      ratingLabel: "Rated 5 out of 5",
     },
     {
       quote:
@@ -255,6 +276,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
       name: "Sara Novak",
       role: "Product designer",
       rating: 5,
+      ratingLabel: "Rated 5 out of 5",
     },
     {
       quote:
@@ -264,6 +286,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
       name: "David Walsh",
       role: "Marketing director",
       rating: 4.5,
+      ratingLabel: "Rated 4.5 out of 5",
     },
     {
       quote:
@@ -273,6 +296,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
       name: "Lisa Huang",
       role: "Growth engineer",
       rating: 5,
+      ratingLabel: "Rated 5 out of 5",
     },
     {
       quote:
@@ -282,6 +306,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
       name: "Tom Chen",
       role: "Tech lead",
       rating: 5,
+      ratingLabel: "Rated 5 out of 5",
     },
   ]}
 />
diff --git a/src/content/pages/blocks/services.mdx b/src/content/pages/blocks/services.mdx
index ad2b4590e..7988eef08 100644
--- a/src/content/pages/blocks/services.mdx
+++ b/src/content/pages/blocks/services.mdx
@@ -173,6 +173,7 @@ import PlaceholderImage from "@/assets/placeholder.svg"
       href: "#",
     },
   ]}
+  linkLabel="Learn more"
 />
 ```
 
@@ -215,6 +216,7 @@ import Services5Block from "@/components/blocks/services-5.astro"
       href: "#",
     },
   ]}
+  linkLabel="Learn more"
 />
 ```
 
@@ -303,5 +305,6 @@ import PlaceholderImage from "@/assets/placeholder.svg"
       href: "#",
     },
   ]}
+  linkLabel="Learn more"
 />
 ```
diff --git a/src/layouts/base.astro b/src/layouts/base.astro
index f6d3bb0ae..430aa8de0 100644
--- a/src/layouts/base.astro
+++ b/src/layouts/base.astro
@@ -68,6 +68,15 @@ try {
       navigation={global.sidebar.navigation}
       githubRepo={global.header.githubRepo}
       githubStars={githubStars}
+      labels={{
+        github: `View ${global.header.githubRepo} on GitHub`,
+        stars: "Stars",
+        breadcrumb: "Breadcrumb",
+        breadcrumbMenu: "Toggle menu",
+        sidebar: "Toggle Sidebar",
+        theme: "Toggle theme",
+        shortcut: { mac: "⌘ + K", other: "Ctrl + K" },
+      }}
     >
       {/* SidebarInset already renders the page's main element. */}
       <div class="@container flex flex-col rounded-[inherit]">
diff --git a/src/layouts/block.astro b/src/layouts/block.astro
index dba914d73..3191f4d5e 100644
--- a/src/layouts/block.astro
+++ b/src/layouts/block.astro
@@ -61,6 +61,7 @@ const copyButton = copySource
       openInChatGPT: "Open in ChatGPT",
       openInClaude: "Open in Claude",
       openInCursor: "Open in Cursor",
+      assistantPrompt: `Read ${markdownUrl}, I want to ask questions about it.`,
       pagination: "Blocks pagination",
     }}
   >
diff --git a/src/layouts/doc.astro b/src/layouts/doc.astro
index ffefe8e53..c32f018bf 100644
--- a/src/layouts/doc.astro
+++ b/src/layouts/doc.astro
@@ -90,6 +90,8 @@ const tocItems = props.headings
       openInChatGPT: "Open in ChatGPT",
       openInClaude: "Open in Claude",
       openInCursor: "Open in Cursor",
+      assistantPrompt: `Read ${markdownUrl}, I want to ask questions about it.`,
+      copyCode: "Copy code",
       pagination: "Document pagination",
       toc: "On This Page",
     }}

From e7efafef77f02c5b3213e1de88fe409302062e3d Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 15:59:29 +0200
Subject: [PATCH 21/60] Render cards without a destination as plain wrappers

Articles1-4 and Services7 no longer fall back to href="#"; a card
without an href renders as a div with the same styling, and Services7
shows its link row only for linked cards. Optional service links check
for a missing href instead of a falsy one. Also restores the Articles2
Badge import that the category badge still needs.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/blocks/articles-1.astro | 79 ++++++++++++-----------
 src/components/blocks/articles-2.astro | 88 ++++++++++++++------------
 src/components/blocks/articles-3.astro | 79 ++++++++++++-----------
 src/components/blocks/articles-4.astro | 65 ++++++++++---------
 src/components/blocks/services-1.astro |  6 +-
 src/components/blocks/services-4.astro |  2 +-
 src/components/blocks/services-5.astro |  2 +-
 src/components/blocks/services-6.astro |  2 +-
 src/components/blocks/services-7.astro | 87 +++++++++++++------------
 9 files changed, 219 insertions(+), 191 deletions(-)

diff --git a/src/components/blocks/articles-1.astro b/src/components/blocks/articles-1.astro
index 806b1bea9..febcad679 100644
--- a/src/components/blocks/articles-1.astro
+++ b/src/components/blocks/articles-1.astro
@@ -43,44 +43,49 @@ const { class: className, title, description, articles, ...props } = Astro.props
     </div>
 
     <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-      {articles.map((article) => (
-        <a
-          href={article.href ?? "#"}
-          class="group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none"
-        >
-          <Image
-            src={article.image.src}
-            alt={article.image.alt}
-            class="-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85"
-            widths={[480, 720, 960]}
-            sizes="(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw"
-          />
-          <div class="flex flex-col gap-2">
-            <p class="text-muted-foreground text-sm font-medium">
-              {article.category}
-            </p>
-            <h3 class="text-foreground line-clamp-2 text-xl leading-snug font-semibold">
-              {article.title}
-            </h3>
-            <p class="text-muted-foreground line-clamp-2 text-sm leading-6">
-              {article.description}
-            </p>
-          </div>
-          <div class="mt-auto flex items-center gap-3">
-            <Avatar>
-              <AvatarImage
-                src={article.author.image}
-                alt={article.author.name}
-              />
-              <AvatarFallback>{article.author.initials}</AvatarFallback>
-            </Avatar>
-            <div class="flex flex-col">
-              <p class="text-sm font-medium">{article.author.name}</p>
-              <p class="text-muted-foreground text-xs">{article.author.date}</p>
+      {articles.map((article) => {
+        const Wrapper = article.href != null ? "a" : "div"
+        return (
+          <Wrapper
+            href={article.href}
+            class="group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+          >
+            <Image
+              src={article.image.src}
+              alt={article.image.alt}
+              class="-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85"
+              widths={[480, 720, 960]}
+              sizes="(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw"
+            />
+            <div class="flex flex-col gap-2">
+              <p class="text-muted-foreground text-sm font-medium">
+                {article.category}
+              </p>
+              <h3 class="text-foreground line-clamp-2 text-xl leading-snug font-semibold">
+                {article.title}
+              </h3>
+              <p class="text-muted-foreground line-clamp-2 text-sm leading-6">
+                {article.description}
+              </p>
             </div>
-          </div>
-        </a>
-      ))}
+            <div class="mt-auto flex items-center gap-3">
+              <Avatar>
+                <AvatarImage
+                  src={article.author.image}
+                  alt={article.author.name}
+                />
+                <AvatarFallback>{article.author.initials}</AvatarFallback>
+              </Avatar>
+              <div class="flex flex-col">
+                <p class="text-sm font-medium">{article.author.name}</p>
+                <p class="text-muted-foreground text-xs">
+                  {article.author.date}
+                </p>
+              </div>
+            </div>
+          </Wrapper>
+        )
+      })}
     </div>
   </SectionContainer>
 </Section>
diff --git a/src/components/blocks/articles-2.astro b/src/components/blocks/articles-2.astro
index 6c3cb9277..a861e9ea9 100644
--- a/src/components/blocks/articles-2.astro
+++ b/src/components/blocks/articles-2.astro
@@ -5,6 +5,7 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
 import { Section, SectionContainer } from "@/components/ui/section"
 
 type Props = HTMLAttributes<"section"> & {
@@ -52,6 +53,8 @@ const {
   articles,
   ...props
 } = Astro.props
+
+const FeaturedWrapper = featured.href != null ? "a" : "div"
 ---
 
 <Section class={cn("", className)} {...props}>
@@ -65,8 +68,8 @@ const {
       </p>
     </div>
 
-    <a
-      href={featured.href ?? "#"}
+    <FeaturedWrapper
+      href={featured.href}
       class="group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4"
     >
       <Image
@@ -100,47 +103,52 @@ const {
           </div>
         </div>
       </div>
-    </a>
+    </FeaturedWrapper>
 
     <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-      {articles.map((article) => (
-        <a
-          href={article.href ?? "#"}
-          class="group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none"
-        >
-          <Image
-            src={article.image.src}
-            alt={article.image.alt}
-            class="-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85"
-            widths={[480, 720]}
-            sizes="(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw"
-          />
-          <div class="flex flex-col gap-2">
-            <p class="text-muted-foreground text-sm font-medium">
-              {article.category}
-            </p>
-            <h3 class="text-foreground line-clamp-2 text-lg leading-snug font-semibold">
-              {article.title}
-            </h3>
-            <p class="text-muted-foreground line-clamp-2 text-sm leading-6">
-              {article.description}
-            </p>
-          </div>
-          <div class="mt-auto flex items-center gap-3">
-            <Avatar>
-              <AvatarImage
-                src={article.author.image}
-                alt={article.author.name}
-              />
-              <AvatarFallback>{article.author.initials}</AvatarFallback>
-            </Avatar>
-            <div class="flex flex-col">
-              <p class="text-sm font-medium">{article.author.name}</p>
-              <p class="text-muted-foreground text-xs">{article.author.date}</p>
+      {articles.map((article) => {
+        const Wrapper = article.href != null ? "a" : "div"
+        return (
+          <Wrapper
+            href={article.href}
+            class="group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+          >
+            <Image
+              src={article.image.src}
+              alt={article.image.alt}
+              class="-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85"
+              widths={[480, 720]}
+              sizes="(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw"
+            />
+            <div class="flex flex-col gap-2">
+              <p class="text-muted-foreground text-sm font-medium">
+                {article.category}
+              </p>
+              <h3 class="text-foreground line-clamp-2 text-lg leading-snug font-semibold">
+                {article.title}
+              </h3>
+              <p class="text-muted-foreground line-clamp-2 text-sm leading-6">
+                {article.description}
+              </p>
             </div>
-          </div>
-        </a>
-      ))}
+            <div class="mt-auto flex items-center gap-3">
+              <Avatar>
+                <AvatarImage
+                  src={article.author.image}
+                  alt={article.author.name}
+                />
+                <AvatarFallback>{article.author.initials}</AvatarFallback>
+              </Avatar>
+              <div class="flex flex-col">
+                <p class="text-sm font-medium">{article.author.name}</p>
+                <p class="text-muted-foreground text-xs">
+                  {article.author.date}
+                </p>
+              </div>
+            </div>
+          </Wrapper>
+        )
+      })}
     </div>
   </SectionContainer>
 </Section>
diff --git a/src/components/blocks/articles-3.astro b/src/components/blocks/articles-3.astro
index 49a7875e6..34de891a7 100644
--- a/src/components/blocks/articles-3.astro
+++ b/src/components/blocks/articles-3.astro
@@ -43,44 +43,49 @@ const { class: className, title, articles, ...props } = Astro.props
     </div>
 
     <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
-      {articles.map((article) => (
-        <a
-          href={article.href ?? "#"}
-          class="group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none"
-        >
-          <Image
-            src={article.image.src}
-            alt={article.image.alt}
-            class="-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85"
-            widths={[480, 720]}
-            sizes="(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw"
-          />
-          <div class="flex flex-col gap-2">
-            <p class="text-muted-foreground text-sm font-medium">
-              {article.category}
-            </p>
-            <h3 class="text-foreground line-clamp-2 text-lg leading-snug font-semibold">
-              {article.title}
-            </h3>
-            <p class="text-muted-foreground line-clamp-2 text-sm leading-6">
-              {article.description}
-            </p>
-          </div>
-          <div class="mt-auto flex items-center gap-3">
-            <Avatar>
-              <AvatarImage
-                src={article.author.image}
-                alt={article.author.name}
-              />
-              <AvatarFallback>{article.author.initials}</AvatarFallback>
-            </Avatar>
-            <div class="flex flex-col">
-              <p class="text-sm font-medium">{article.author.name}</p>
-              <p class="text-muted-foreground text-xs">{article.author.date}</p>
+      {articles.map((article) => {
+        const Wrapper = article.href != null ? "a" : "div"
+        return (
+          <Wrapper
+            href={article.href}
+            class="group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+          >
+            <Image
+              src={article.image.src}
+              alt={article.image.alt}
+              class="-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85"
+              widths={[480, 720]}
+              sizes="(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw"
+            />
+            <div class="flex flex-col gap-2">
+              <p class="text-muted-foreground text-sm font-medium">
+                {article.category}
+              </p>
+              <h3 class="text-foreground line-clamp-2 text-lg leading-snug font-semibold">
+                {article.title}
+              </h3>
+              <p class="text-muted-foreground line-clamp-2 text-sm leading-6">
+                {article.description}
+              </p>
             </div>
-          </div>
-        </a>
-      ))}
+            <div class="mt-auto flex items-center gap-3">
+              <Avatar>
+                <AvatarImage
+                  src={article.author.image}
+                  alt={article.author.name}
+                />
+                <AvatarFallback>{article.author.initials}</AvatarFallback>
+              </Avatar>
+              <div class="flex flex-col">
+                <p class="text-sm font-medium">{article.author.name}</p>
+                <p class="text-muted-foreground text-xs">
+                  {article.author.date}
+                </p>
+              </div>
+            </div>
+          </Wrapper>
+        )
+      })}
     </div>
   </SectionContainer>
 </Section>
diff --git a/src/components/blocks/articles-4.astro b/src/components/blocks/articles-4.astro
index 7fd36bb9a..739245077 100644
--- a/src/components/blocks/articles-4.astro
+++ b/src/components/blocks/articles-4.astro
@@ -38,37 +38,42 @@ const { class: className, title, description, articles, ...props } = Astro.props
     </div>
 
     <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-      {articles.map((article) => (
-        <a
-          href={article.href ?? "#"}
-          class="group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none"
-        >
-          <div class="flex flex-col gap-2">
-            <p class="text-muted-foreground text-sm font-medium">
-              {article.category}
-            </p>
-            <h3 class="text-foreground line-clamp-2 text-xl leading-snug font-semibold">
-              {article.title}
-            </h3>
-            <p class="text-muted-foreground line-clamp-2 text-sm leading-6">
-              {article.description}
-            </p>
-          </div>
-          <div class="mt-auto flex items-center gap-3">
-            <Avatar>
-              <AvatarImage
-                src={article.author.image}
-                alt={article.author.name}
-              />
-              <AvatarFallback>{article.author.initials}</AvatarFallback>
-            </Avatar>
-            <div class="flex flex-col">
-              <p class="text-sm font-medium">{article.author.name}</p>
-              <p class="text-muted-foreground text-xs">{article.author.date}</p>
+      {articles.map((article) => {
+        const Wrapper = article.href != null ? "a" : "div"
+        return (
+          <Wrapper
+            href={article.href}
+            class="group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+          >
+            <div class="flex flex-col gap-2">
+              <p class="text-muted-foreground text-sm font-medium">
+                {article.category}
+              </p>
+              <h3 class="text-foreground line-clamp-2 text-xl leading-snug font-semibold">
+                {article.title}
+              </h3>
+              <p class="text-muted-foreground line-clamp-2 text-sm leading-6">
+                {article.description}
+              </p>
             </div>
-          </div>
-        </a>
-      ))}
+            <div class="mt-auto flex items-center gap-3">
+              <Avatar>
+                <AvatarImage
+                  src={article.author.image}
+                  alt={article.author.name}
+                />
+                <AvatarFallback>{article.author.initials}</AvatarFallback>
+              </Avatar>
+              <div class="flex flex-col">
+                <p class="text-sm font-medium">{article.author.name}</p>
+                <p class="text-muted-foreground text-xs">
+                  {article.author.date}
+                </p>
+              </div>
+            </div>
+          </Wrapper>
+        )
+      })}
     </div>
   </SectionContainer>
 </Section>
diff --git a/src/components/blocks/services-1.astro b/src/components/blocks/services-1.astro
index 6c6f3649f..2e603dd4d 100644
--- a/src/components/blocks/services-1.astro
+++ b/src/components/blocks/services-1.astro
@@ -60,13 +60,13 @@ const {
     </div>
     <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
       {services.map((service) => {
-        const Wrapper = service.href ? "a" : "div"
+        const Wrapper = service.href != null ? "a" : "div"
         return (
           <Wrapper
             href={service.href}
             class={cn(
               "group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow",
-              service.href && "hover:shadow-md"
+              service.href != null && "hover:shadow-md"
             )}
           >
             <Image
@@ -84,7 +84,7 @@ const {
               <p class="text-muted-foreground text-sm leading-relaxed">
                 {service.description}
               </p>
-              {service.href && (
+              {service.href != null && (
                 <span class="mt-auto pt-2">
                   <ArrowRightIcon class="text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1" />
                 </span>
diff --git a/src/components/blocks/services-4.astro b/src/components/blocks/services-4.astro
index 4411119fa..0ce561918 100644
--- a/src/components/blocks/services-4.astro
+++ b/src/components/blocks/services-4.astro
@@ -80,7 +80,7 @@ const {
               {service.description}
             </p>
           </div>
-          {service.href && (
+          {service.href != null && (
             <a
               href={service.href}
               class="text-primary inline-flex items-center gap-1.5 text-sm font-medium"
diff --git a/src/components/blocks/services-5.astro b/src/components/blocks/services-5.astro
index 70f32b07a..dc9ec3ea9 100644
--- a/src/components/blocks/services-5.astro
+++ b/src/components/blocks/services-5.astro
@@ -54,7 +54,7 @@ const {
           <p class="text-muted-foreground text-sm leading-relaxed">
             {service.description}
           </p>
-          {service.href && (
+          {service.href != null && (
             <a
               href={service.href}
               class="text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium"
diff --git a/src/components/blocks/services-6.astro b/src/components/blocks/services-6.astro
index 785d1d541..8f13cfe31 100644
--- a/src/components/blocks/services-6.astro
+++ b/src/components/blocks/services-6.astro
@@ -80,7 +80,7 @@ const {
                 {service.description}
               </p>
             </div>
-            {service.href && (
+            {service.href != null && (
               <a
                 href={service.href}
                 aria-label={service.title}
diff --git a/src/components/blocks/services-7.astro b/src/components/blocks/services-7.astro
index 8903e82a2..a6a007a98 100644
--- a/src/components/blocks/services-7.astro
+++ b/src/components/blocks/services-7.astro
@@ -70,52 +70,57 @@ const {
       </div>
     </div>
     <div class="grid gap-6 lg:grid-cols-3">
-      {services.map((service, index) => (
-        <a
-          href={service.href ?? "#"}
-          class={cn(
-            "group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md",
-            index === 0 && "lg:col-span-2 lg:row-span-2"
-          )}
-        >
-          <Image
-            src={service.image?.src ?? PlaceholderImage}
-            alt={service.image?.alt ?? service.title}
+      {services.map((service, index) => {
+        const Wrapper = service.href != null ? "a" : "div"
+        return (
+          <Wrapper
+            href={service.href}
             class={cn(
-              "w-full object-cover",
-              index === 0 ? "aspect-[16/9]" : "aspect-[16/10]"
+              "group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md",
+              index === 0 && "lg:col-span-2 lg:row-span-2"
             )}
-            widths={[320, 480, 640, 960]}
-            sizes={
-              index === 0
-                ? "(min-width: 1024px) 66vw, 100vw"
-                : "(min-width: 1024px) 33vw, 100vw"
-            }
-          />
-          <div class="flex flex-1 flex-col gap-2 p-5">
-            <Badge variant="secondary" class="w-fit">
-              {service.label}
-            </Badge>
-            <h3
-              class={cn("font-medium", index === 0 ? "text-xl" : "text-base")}
-            >
-              {service.title}
-            </h3>
-            <p class="text-muted-foreground text-sm leading-relaxed">
-              {service.description}
-            </p>
-            <div
+          >
+            <Image
+              src={service.image?.src ?? PlaceholderImage}
+              alt={service.image?.alt ?? service.title}
               class={cn(
-                "text-primary flex items-center gap-1.5 pt-2 text-sm font-medium",
-                index !== 0 && "mt-auto"
+                "w-full object-cover",
+                index === 0 ? "aspect-[16/9]" : "aspect-[16/10]"
+              )}
+              widths={[320, 480, 640, 960]}
+              sizes={
+                index === 0
+                  ? "(min-width: 1024px) 66vw, 100vw"
+                  : "(min-width: 1024px) 33vw, 100vw"
+              }
+            />
+            <div class="flex flex-1 flex-col gap-2 p-5">
+              <Badge variant="secondary" class="w-fit">
+                {service.label}
+              </Badge>
+              <h3
+                class={cn("font-medium", index === 0 ? "text-xl" : "text-base")}
+              >
+                {service.title}
+              </h3>
+              <p class="text-muted-foreground text-sm leading-relaxed">
+                {service.description}
+              </p>
+              {service.href != null && (
+                <div
+                  class={cn(
+                    "text-primary flex items-center gap-1.5 pt-2 text-sm font-medium",
+                    index !== 0 && "mt-auto"
+                  )}
+                >
+                  {linkLabel}
+                  <ArrowRightIcon class="size-3.5 transition-transform group-hover/service:translate-x-1" />
+                </div>
               )}
-            >
-              {linkLabel}
-              <ArrowRightIcon class="size-3.5 transition-transform group-hover/service:translate-x-1" />
             </div>
-          </div>
-        </a>
-      ))}
+          </Wrapper>
+        )
+      })}
     </div>
   </SectionContainer>
 </Section>

From 750e26d67d76f0d17e7e126e278c45e5586d9803 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 16:00:21 +0200
Subject: [PATCH 22/60] Match block registry dependencies to their imports

Article and Articles items without a badge, Features2/5 and Services5
without a button row drop those dependencies. Headers import the close
icon directly and list @lucide/astro.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 registry.json | 48 ++++++++++++------------------------------------
 1 file changed, 12 insertions(+), 36 deletions(-)

diff --git a/registry.json b/registry.json
index ed9a86d5f..0c5af4ea0 100644
--- a/registry.json
+++ b/registry.json
@@ -2300,11 +2300,7 @@
       "description": "Editorial article layouts for long-form stories, interviews, and analysis.",
       "categories": ["article"],
       "docs": "https://ui.full.dev/blocks/article/",
-      "registryDependencies": [
-        "@fulldev/avatar",
-        "@fulldev/badge",
-        "@fulldev/section"
-      ],
+      "registryDependencies": ["@fulldev/avatar", "@fulldev/section"],
       "files": [
         {
           "path": "src/components/blocks/article-1.astro",
@@ -2319,11 +2315,7 @@
       "description": "Editorial article layouts for long-form stories, interviews, and analysis.",
       "categories": ["article"],
       "docs": "https://ui.full.dev/blocks/article/",
-      "registryDependencies": [
-        "@fulldev/avatar",
-        "@fulldev/badge",
-        "@fulldev/section"
-      ],
+      "registryDependencies": ["@fulldev/avatar", "@fulldev/section"],
       "files": [
         {
           "path": "src/components/blocks/article-2.astro",
@@ -2338,11 +2330,7 @@
       "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
       "categories": ["articles"],
       "docs": "https://ui.full.dev/blocks/articles/",
-      "registryDependencies": [
-        "@fulldev/avatar",
-        "@fulldev/badge",
-        "@fulldev/section"
-      ],
+      "registryDependencies": ["@fulldev/avatar", "@fulldev/section"],
       "files": [
         {
           "path": "src/components/blocks/articles-1.astro",
@@ -2376,11 +2364,7 @@
       "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
       "categories": ["articles"],
       "docs": "https://ui.full.dev/blocks/articles/",
-      "registryDependencies": [
-        "@fulldev/avatar",
-        "@fulldev/badge",
-        "@fulldev/section"
-      ],
+      "registryDependencies": ["@fulldev/avatar", "@fulldev/section"],
       "files": [
         {
           "path": "src/components/blocks/articles-3.astro",
@@ -2395,11 +2379,7 @@
       "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
       "categories": ["articles"],
       "docs": "https://ui.full.dev/blocks/articles/",
-      "registryDependencies": [
-        "@fulldev/avatar",
-        "@fulldev/badge",
-        "@fulldev/section"
-      ],
+      "registryDependencies": ["@fulldev/avatar", "@fulldev/section"],
       "files": [
         {
           "path": "src/components/blocks/articles-4.astro",
@@ -2911,11 +2891,7 @@
       "categories": ["features"],
       "docs": "https://ui.full.dev/blocks/features/",
       "dependencies": ["@lucide/astro"],
-      "registryDependencies": [
-        "@fulldev/button",
-        "@fulldev/icon",
-        "@fulldev/section"
-      ],
+      "registryDependencies": ["@fulldev/icon", "@fulldev/section"],
       "files": [
         {
           "path": "src/components/blocks/features-2.astro",
@@ -2966,11 +2942,7 @@
       "categories": ["features"],
       "docs": "https://ui.full.dev/blocks/features/",
       "dependencies": ["@lucide/astro"],
-      "registryDependencies": [
-        "@fulldev/button",
-        "@fulldev/icon",
-        "@fulldev/section"
-      ],
+      "registryDependencies": ["@fulldev/icon", "@fulldev/section"],
       "files": [
         {
           "path": "src/components/blocks/features-5.astro",
@@ -3064,6 +3036,7 @@
       "description": "Header layouts for brand, navigation, and high-level page actions.",
       "categories": ["header"],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": ["@lucide/astro"],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3086,6 +3059,7 @@
       "description": "Header layouts for brand, navigation, and high-level page actions.",
       "categories": ["header"],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": ["@lucide/astro"],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3108,6 +3082,7 @@
       "description": "Header layouts for brand, navigation, and high-level page actions.",
       "categories": ["header"],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": ["@lucide/astro"],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3131,6 +3106,7 @@
       "description": "Header layouts for brand, navigation, and high-level page actions.",
       "categories": ["header"],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": ["@lucide/astro"],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3153,6 +3129,7 @@
       "description": "Header layouts for brand, navigation, and high-level page actions.",
       "categories": ["header"],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": ["@lucide/astro"],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3871,7 +3848,6 @@
       "dependencies": ["@lucide/astro"],
       "registryDependencies": [
         "@fulldev/badge",
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],

From c62f4d221c664607ba9e165b340b539f23514196 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 16:03:17 +0200
Subject: [PATCH 23/60] Pass banner and sidebar labels and banner storage key
 from callers

BannerContainer gains optional closeLabel and Sidebar optional
mobileTitle/mobileDescription, defaulting to the previous text. Banner1
requires closeLabel and takes an optional storageKey; Banner2 drops its
unused key. Banner1 separator is a middle dot.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/blocks/banner-1.astro          | 21 +++++++++++++++----
 src/components/blocks/banner-2.astro          |  7 +------
 src/components/blocks/sidebar-1.astro         | 10 ++++++++-
 .../ui/banner/banner-container.astro          |  6 ++++--
 src/components/ui/sidebar/sidebar.astro       |  8 +++++--
 src/content/pages/blocks/banner.mdx           |  2 ++
 src/content/pages/components/banner.mdx       |  2 +-
 src/content/pages/components/sidebar.mdx      |  2 +-
 src/layouts/base.astro                        |  2 ++
 9 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/src/components/blocks/banner-1.astro b/src/components/blocks/banner-1.astro
index f048b36ee..f1d80e12c 100644
--- a/src/components/blocks/banner-1.astro
+++ b/src/components/blocks/banner-1.astro
@@ -12,20 +12,33 @@ type Props = HTMLAttributes<"aside"> & {
     label: string
     href: string
   }
+  closeLabel: string
+  storageKey?: string
 }
 
-const { class: className, title, description, link, ...props } = Astro.props
+const {
+  class: className,
+  title,
+  description,
+  link,
+  closeLabel,
+  storageKey,
+  ...props
+} = Astro.props
 ---
 
 <Banner
-  storageKey="banner-1"
+  storageKey={storageKey}
   class={cn("dark bg-background text-foreground", className)}
   {...props}
 >
-  <BannerContainer class="flex-row items-center gap-x-4 gap-y-1">
+  <BannerContainer
+    class="flex-row items-center gap-x-4 gap-y-1"
+    closeLabel={closeLabel}
+  >
     <p class="text-sm leading-relaxed">
       <span class="font-semibold">{title}</span>{" "}
-      <span class="mx-1.5 hidden opacity-50 sm:inline">&mdash;</span>{" "}
+      <span class="mx-1.5 hidden opacity-50 sm:inline">&middot;</span>{" "}
       <span class="opacity-80">{description}</span>
     </p>
     <a
diff --git a/src/components/blocks/banner-2.astro b/src/components/blocks/banner-2.astro
index e07c5aae9..0bfd1eac3 100644
--- a/src/components/blocks/banner-2.astro
+++ b/src/components/blocks/banner-2.astro
@@ -17,12 +17,7 @@ type Props = HTMLAttributes<"aside"> & {
 const { class: className, title, description, buttons, ...props } = Astro.props
 ---
 
-<Banner
-  variant="floating"
-  storageKey="banner-2"
-  class={cn("@container", className)}
-  {...props}
->
+<Banner variant="floating" class={cn("@container", className)} {...props}>
   <BannerContainer
     class="flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center"
     showClose={false}
diff --git a/src/components/blocks/sidebar-1.astro b/src/components/blocks/sidebar-1.astro
index 49bcf3456..cf31168ac 100644
--- a/src/components/blocks/sidebar-1.astro
+++ b/src/components/blocks/sidebar-1.astro
@@ -99,6 +99,8 @@ type Props = {
     breadcrumb: string
     breadcrumbMenu: string
     sidebar: string
+    mobileTitle: string
+    mobileDescription: string
     theme: string
     shortcut: {
       mac: string
@@ -147,7 +149,13 @@ const githubStarsLabel =
 ---
 
 <SidebarProvider>
-  <Sidebar class={cn("", className)} collapsible="offcanvas" variant="inset">
+  <Sidebar
+    class={cn("", className)}
+    collapsible="offcanvas"
+    variant="inset"
+    mobileTitle={labels.mobileTitle}
+    mobileDescription={labels.mobileDescription}
+  >
     <SidebarHeader class="flex-col">
       <SidebarMenuButton size="lg" href={logo.href}>
         <LogoImage
diff --git a/src/components/ui/banner/banner-container.astro b/src/components/ui/banner/banner-container.astro
index 7c8884c37..885a15acf 100644
--- a/src/components/ui/banner/banner-container.astro
+++ b/src/components/ui/banner/banner-container.astro
@@ -6,11 +6,13 @@ import { cn } from "@/lib/utils"
 
 type Props = HTMLAttributes<"div"> & {
   showClose?: boolean
+  closeLabel?: string
 }
 
 const {
   class: className,
   showClose = true,
+  closeLabel = "Close",
   "data-slot": dataSlot = "banner-container",
   ...props
 } = Astro.props
@@ -30,11 +32,11 @@ const {
     <button
       type="button"
       class="cn-banner-close absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5"
-      aria-label="Close"
+      aria-label={closeLabel}
       data-slot="banner-close"
     >
       <XIcon class="size-4" />
-      <span class="sr-only">Close</span>
+      <span class="sr-only">{closeLabel}</span>
     </button>
   )}
 </div>
diff --git a/src/components/ui/sidebar/sidebar.astro b/src/components/ui/sidebar/sidebar.astro
index 804306685..e9ac87cd4 100644
--- a/src/components/ui/sidebar/sidebar.astro
+++ b/src/components/ui/sidebar/sidebar.astro
@@ -15,6 +15,8 @@ type Props = Omit<HTMLAttributes<"div">, "dir"> & {
   variant?: "sidebar" | "floating" | "inset"
   collapsible?: "offcanvas" | "icon" | "none"
   state?: "expanded" | "collapsed"
+  mobileTitle?: string
+  mobileDescription?: string
 }
 
 const {
@@ -23,6 +25,8 @@ const {
   variant = "sidebar",
   collapsible = "offcanvas",
   state = "expanded",
+  mobileTitle = "Sidebar",
+  mobileDescription = "Displays the mobile sidebar.",
   ...props
 } = Astro.props
 
@@ -61,8 +65,8 @@ const desktopCollapsible = desktopState === "collapsed" ? collapsible : ""
         )}
       >
         <SheetHeader class="sr-only">
-          <SheetTitle>Sidebar</SheetTitle>
-          <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          <SheetTitle>{mobileTitle}</SheetTitle>
+          <SheetDescription>{mobileDescription}</SheetDescription>
         </SheetHeader>
         <div class="flex h-full w-full flex-col">
           <slot />
diff --git a/src/content/pages/blocks/banner.mdx b/src/content/pages/blocks/banner.mdx
index 33f70c4de..8c1942be2 100644
--- a/src/content/pages/blocks/banner.mdx
+++ b/src/content/pages/blocks/banner.mdx
@@ -13,6 +13,8 @@ import Banner1Block from "@/components/blocks/banner-1.astro"
   title="New block previews are live"
   description="Browse wider, content-first layouts that mirror real sections instead of isolated UI primitives."
   link={{ label: "Learn more", href: "#" }}
+  closeLabel="Close"
+  storageKey="banner-1"
 />
 ```
 
diff --git a/src/content/pages/components/banner.mdx b/src/content/pages/components/banner.mdx
index 7da177c0f..d835f3f30 100644
--- a/src/content/pages/components/banner.mdx
+++ b/src/content/pages/components/banner.mdx
@@ -26,7 +26,7 @@ import { Banner, BannerContainer } from "@/components/ui/banner"
 ```
 
 `BannerContainer` renders a close button by default. Set `showClose={false}` to
-hide it.
+hide it, or `closeLabel` to change its accessible name.
 
 ```astro
 <Banner>
diff --git a/src/content/pages/components/sidebar.mdx b/src/content/pages/components/sidebar.mdx
index 1279bc730..e129a49d9 100644
--- a/src/content/pages/components/sidebar.mdx
+++ b/src/content/pages/components/sidebar.mdx
@@ -117,7 +117,7 @@ SidebarProvider
 ## Components
 
 - `SidebarProvider` wraps the layout, owns the collapse state, and persists desktop state in the `sidebar_state` cookie.
-- `Sidebar` renders the desktop shell and uses the shared `Sheet` primitive for the mobile drawer. It supports `side`, `variant`, `collapsible`, and `dir`.
+- `Sidebar` renders the desktop shell and uses the shared `Sheet` primitive for the mobile drawer. It supports `side`, `variant`, `collapsible`, and `dir`, plus `mobileTitle` and `mobileDescription` for the mobile drawer's screen reader heading.
 - `SidebarTrigger` toggles the sidebar and supports the `cmd/ctrl+b` keyboard shortcut.
 - `SidebarRail` renders the clickable rail used by shadcn’s desktop sidebar.
 - `SidebarInset` wraps the main content when using the `inset` variant. It renders the page's `<main>`, so do not nest `LayoutMain` inside it.
diff --git a/src/layouts/base.astro b/src/layouts/base.astro
index 430aa8de0..9bf7bfe71 100644
--- a/src/layouts/base.astro
+++ b/src/layouts/base.astro
@@ -74,6 +74,8 @@ try {
         breadcrumb: "Breadcrumb",
         breadcrumbMenu: "Toggle menu",
         sidebar: "Toggle Sidebar",
+        mobileTitle: "Sidebar",
+        mobileDescription: "Displays the mobile sidebar.",
         theme: "Toggle theme",
         shortcut: { mac: "⌘ + K", other: "Ctrl + K" },
       }}

From 946182db498d76e497b3f36c7c096fb75e8786ac Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 16:03:17 +0200
Subject: [PATCH 24/60] Add changeset for block prop simplification

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/block-props-simplification.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/block-props-simplification.md

diff --git a/.changeset/block-props-simplification.md b/.changeset/block-props-simplification.md
new file mode 100644
index 000000000..1e5168067
--- /dev/null
+++ b/.changeset/block-props-simplification.md
@@ -0,0 +1,5 @@
+---
+"fulldev-ui": minor
+---
+
+Simplify block props (breaking). Blocks drop unused fields and button variants: button styles are now fixed in each block. User-facing copy such as screen reader labels, close labels and rating labels is passed in by the caller. Banner1 takes an optional `storageKey` for dismissal instead of a shared hardcoded key. `BannerContainer` gains an optional `closeLabel` and `Sidebar` gains optional `mobileTitle` and `mobileDescription`.

From bbfd74446f623050954fe1a42efbfa307a23d107 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 16:06:53 +0200
Subject: [PATCH 25/60] Let Breadcrumb callers override its aria-label

Astro emits a native element's hardcoded attribute and a spread attribute
of the same name both, and the browser keeps the first, so a caller's
aria-label (such as Sidebar1 labels.breadcrumb) never applied.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ui/breadcrumb/breadcrumb.astro | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/breadcrumb/breadcrumb.astro b/src/components/ui/breadcrumb/breadcrumb.astro
index 3d4acdd6c..476398d2c 100644
--- a/src/components/ui/breadcrumb/breadcrumb.astro
+++ b/src/components/ui/breadcrumb/breadcrumb.astro
@@ -5,11 +5,15 @@ import { cn } from "@/lib/utils"
 
 type Props = HTMLAttributes<"nav">
 
-const { class: className, ...props } = Astro.props
+const {
+  class: className,
+  "aria-label": ariaLabel = "breadcrumb",
+  ...props
+} = Astro.props
 ---
 
 <nav
-  aria-label="breadcrumb"
+  aria-label={ariaLabel}
   data-slot="breadcrumb"
   class={cn(className)}
   {...props}

From f7c0e484d157d26dd47660f70ec13884f658f3eb Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 16:10:29 +0200
Subject: [PATCH 26/60] Regenerate registry for simplified block contracts

---
 public/r/article-1.json                   |  3 +--
 public/r/article-2.json                   |  3 +--
 public/r/articles-1.json                  |  3 +--
 public/r/articles-2.json                  |  2 +-
 public/r/articles-3.json                  |  3 +--
 public/r/articles-4.json                  |  3 +--
 public/r/banner-1.json                    |  2 +-
 public/r/banner-2.json                    |  2 +-
 public/r/banner.json                      |  2 +-
 public/r/blocks-1.json                    |  2 +-
 public/r/breadcrumb.json                  |  2 +-
 public/r/contact-3.json                   |  2 +-
 public/r/content-1.json                   |  2 +-
 public/r/content-2.json                   |  2 +-
 public/r/content-3.json                   |  2 +-
 public/r/content-4.json                   |  2 +-
 public/r/cta-1.json                       |  2 +-
 public/r/cta-2.json                       |  2 +-
 public/r/cta-3.json                       |  2 +-
 public/r/cta-4.json                       |  2 +-
 public/r/cta-5.json                       |  2 +-
 public/r/cta-6.json                       |  2 +-
 public/r/cta-7.json                       |  2 +-
 public/r/cta-8.json                       |  2 +-
 public/r/doc-1.json                       |  2 +-
 public/r/faqs-1.json                      |  2 +-
 public/r/faqs-2.json                      |  2 +-
 public/r/faqs-3.json                      |  2 +-
 public/r/features-1.json                  |  2 +-
 public/r/features-2.json                  |  3 +--
 public/r/features-4.json                  |  2 +-
 public/r/features-5.json                  |  3 +--
 public/r/features-6.json                  |  2 +-
 public/r/footer-1.json                    |  2 +-
 public/r/footer-2.json                    |  2 +-
 public/r/footer-3.json                    |  2 +-
 public/r/header-1.json                    |  5 ++++-
 public/r/header-2.json                    |  5 ++++-
 public/r/header-3.json                    |  5 ++++-
 public/r/header-4.json                    |  5 ++++-
 public/r/header-5.json                    |  5 ++++-
 public/r/hero-1.json                      |  2 +-
 public/r/hero-10.json                     |  2 +-
 public/r/hero-11.json                     |  2 +-
 public/r/hero-12.json                     |  2 +-
 public/r/hero-13.json                     |  2 +-
 public/r/hero-2.json                      |  2 +-
 public/r/hero-3.json                      |  2 +-
 public/r/hero-4.json                      |  2 +-
 public/r/hero-5.json                      |  2 +-
 public/r/hero-6.json                      |  2 +-
 public/r/hero-7.json                      |  2 +-
 public/r/hero-8.json                      |  2 +-
 public/r/hero-9.json                      |  2 +-
 public/r/links-2.json                     |  2 +-
 public/r/logos-1.json                     |  2 +-
 public/r/logos-2.json                     |  2 +-
 public/r/pricing-1.json                   |  2 +-
 public/r/pricing-2.json                   |  2 +-
 public/r/pricing-3.json                   |  2 +-
 public/r/product-1.json                   |  2 +-
 public/r/products-4.json                  |  2 +-
 public/r/products-5.json                  |  2 +-
 public/r/registry.json                    | 23 +++++++++++++++--------
 public/r/reviews-1.json                   |  2 +-
 public/r/reviews-2.json                   |  2 +-
 public/r/reviews-3.json                   |  2 +-
 public/r/reviews-4.json                   |  2 +-
 public/r/reviews-5.json                   |  2 +-
 public/r/services-1.json                  |  2 +-
 public/r/services-2.json                  |  2 +-
 public/r/services-3.json                  |  2 +-
 public/r/services-4.json                  |  2 +-
 public/r/services-5.json                  |  3 +--
 public/r/services-6.json                  |  2 +-
 public/r/services-7.json                  |  2 +-
 public/r/sidebar-1.json                   |  2 +-
 public/r/sidebar.json                     |  2 +-
 public/r/styles/base-luma/article-1.json  |  3 +--
 public/r/styles/base-luma/article-2.json  |  3 +--
 public/r/styles/base-luma/articles-1.json |  3 +--
 public/r/styles/base-luma/articles-2.json |  2 +-
 public/r/styles/base-luma/articles-3.json |  3 +--
 public/r/styles/base-luma/articles-4.json |  3 +--
 public/r/styles/base-luma/banner-1.json   |  2 +-
 public/r/styles/base-luma/banner-2.json   |  2 +-
 public/r/styles/base-luma/banner.json     |  2 +-
 public/r/styles/base-luma/blocks-1.json   |  2 +-
 public/r/styles/base-luma/breadcrumb.json |  2 +-
 public/r/styles/base-luma/contact-3.json  |  2 +-
 public/r/styles/base-luma/content-1.json  |  2 +-
 public/r/styles/base-luma/content-2.json  |  2 +-
 public/r/styles/base-luma/content-3.json  |  2 +-
 public/r/styles/base-luma/content-4.json  |  2 +-
 public/r/styles/base-luma/cta-1.json      |  2 +-
 public/r/styles/base-luma/cta-2.json      |  2 +-
 public/r/styles/base-luma/cta-3.json      |  2 +-
 public/r/styles/base-luma/cta-4.json      |  2 +-
 public/r/styles/base-luma/cta-5.json      |  2 +-
 public/r/styles/base-luma/cta-6.json      |  2 +-
 public/r/styles/base-luma/cta-7.json      |  2 +-
 public/r/styles/base-luma/cta-8.json      |  2 +-
 public/r/styles/base-luma/doc-1.json      |  2 +-
 public/r/styles/base-luma/faqs-1.json     |  2 +-
 public/r/styles/base-luma/faqs-2.json     |  2 +-
 public/r/styles/base-luma/faqs-3.json     |  2 +-
 public/r/styles/base-luma/features-1.json |  2 +-
 public/r/styles/base-luma/features-2.json |  3 +--
 public/r/styles/base-luma/features-4.json |  2 +-
 public/r/styles/base-luma/features-5.json |  3 +--
 public/r/styles/base-luma/features-6.json |  2 +-
 public/r/styles/base-luma/footer-1.json   |  2 +-
 public/r/styles/base-luma/footer-2.json   |  2 +-
 public/r/styles/base-luma/footer-3.json   |  2 +-
 public/r/styles/base-luma/header-1.json   |  5 ++++-
 public/r/styles/base-luma/header-2.json   |  5 ++++-
 public/r/styles/base-luma/header-3.json   |  5 ++++-
 public/r/styles/base-luma/header-4.json   |  5 ++++-
 public/r/styles/base-luma/header-5.json   |  5 ++++-
 public/r/styles/base-luma/hero-1.json     |  2 +-
 public/r/styles/base-luma/hero-10.json    |  2 +-
 public/r/styles/base-luma/hero-11.json    |  2 +-
 public/r/styles/base-luma/hero-12.json    |  2 +-
 public/r/styles/base-luma/hero-13.json    |  2 +-
 public/r/styles/base-luma/hero-2.json     |  2 +-
 public/r/styles/base-luma/hero-3.json     |  2 +-
 public/r/styles/base-luma/hero-4.json     |  2 +-
 public/r/styles/base-luma/hero-5.json     |  2 +-
 public/r/styles/base-luma/hero-6.json     |  2 +-
 public/r/styles/base-luma/hero-7.json     |  2 +-
 public/r/styles/base-luma/hero-8.json     |  2 +-
 public/r/styles/base-luma/hero-9.json     |  2 +-
 public/r/styles/base-luma/links-2.json    |  2 +-
 public/r/styles/base-luma/logos-1.json    |  2 +-
 public/r/styles/base-luma/logos-2.json    |  2 +-
 public/r/styles/base-luma/pricing-1.json  |  2 +-
 public/r/styles/base-luma/pricing-2.json  |  2 +-
 public/r/styles/base-luma/pricing-3.json  |  2 +-
 public/r/styles/base-luma/product-1.json  |  2 +-
 public/r/styles/base-luma/products-4.json |  2 +-
 public/r/styles/base-luma/products-5.json |  2 +-
 public/r/styles/base-luma/registry.json   | 23 +++++++++++++++--------
 public/r/styles/base-luma/reviews-1.json  |  2 +-
 public/r/styles/base-luma/reviews-2.json  |  2 +-
 public/r/styles/base-luma/reviews-3.json  |  2 +-
 public/r/styles/base-luma/reviews-4.json  |  2 +-
 public/r/styles/base-luma/reviews-5.json  |  2 +-
 public/r/styles/base-luma/services-1.json |  2 +-
 public/r/styles/base-luma/services-2.json |  2 +-
 public/r/styles/base-luma/services-3.json |  2 +-
 public/r/styles/base-luma/services-4.json |  2 +-
 public/r/styles/base-luma/services-5.json |  3 +--
 public/r/styles/base-luma/services-6.json |  2 +-
 public/r/styles/base-luma/services-7.json |  2 +-
 public/r/styles/base-luma/sidebar-1.json  |  2 +-
 public/r/styles/base-luma/sidebar.json    |  2 +-
 public/r/styles/base-lyra/article-1.json  |  3 +--
 public/r/styles/base-lyra/article-2.json  |  3 +--
 public/r/styles/base-lyra/articles-1.json |  3 +--
 public/r/styles/base-lyra/articles-2.json |  2 +-
 public/r/styles/base-lyra/articles-3.json |  3 +--
 public/r/styles/base-lyra/articles-4.json |  3 +--
 public/r/styles/base-lyra/banner-1.json   |  2 +-
 public/r/styles/base-lyra/banner-2.json   |  2 +-
 public/r/styles/base-lyra/banner.json     |  2 +-
 public/r/styles/base-lyra/blocks-1.json   |  2 +-
 public/r/styles/base-lyra/breadcrumb.json |  2 +-
 public/r/styles/base-lyra/contact-3.json  |  2 +-
 public/r/styles/base-lyra/content-1.json  |  2 +-
 public/r/styles/base-lyra/content-2.json  |  2 +-
 public/r/styles/base-lyra/content-3.json  |  2 +-
 public/r/styles/base-lyra/content-4.json  |  2 +-
 public/r/styles/base-lyra/cta-1.json      |  2 +-
 public/r/styles/base-lyra/cta-2.json      |  2 +-
 public/r/styles/base-lyra/cta-3.json      |  2 +-
 public/r/styles/base-lyra/cta-4.json      |  2 +-
 public/r/styles/base-lyra/cta-5.json      |  2 +-
 public/r/styles/base-lyra/cta-6.json      |  2 +-
 public/r/styles/base-lyra/cta-7.json      |  2 +-
 public/r/styles/base-lyra/cta-8.json      |  2 +-
 public/r/styles/base-lyra/doc-1.json      |  2 +-
 public/r/styles/base-lyra/faqs-1.json     |  2 +-
 public/r/styles/base-lyra/faqs-2.json     |  2 +-
 public/r/styles/base-lyra/faqs-3.json     |  2 +-
 public/r/styles/base-lyra/features-1.json |  2 +-
 public/r/styles/base-lyra/features-2.json |  3 +--
 public/r/styles/base-lyra/features-4.json |  2 +-
 public/r/styles/base-lyra/features-5.json |  3 +--
 public/r/styles/base-lyra/features-6.json |  2 +-
 public/r/styles/base-lyra/footer-1.json   |  2 +-
 public/r/styles/base-lyra/footer-2.json   |  2 +-
 public/r/styles/base-lyra/footer-3.json   |  2 +-
 public/r/styles/base-lyra/header-1.json   |  5 ++++-
 public/r/styles/base-lyra/header-2.json   |  5 ++++-
 public/r/styles/base-lyra/header-3.json   |  5 ++++-
 public/r/styles/base-lyra/header-4.json   |  5 ++++-
 public/r/styles/base-lyra/header-5.json   |  5 ++++-
 public/r/styles/base-lyra/hero-1.json     |  2 +-
 public/r/styles/base-lyra/hero-10.json    |  2 +-
 public/r/styles/base-lyra/hero-11.json    |  2 +-
 public/r/styles/base-lyra/hero-12.json    |  2 +-
 public/r/styles/base-lyra/hero-13.json    |  2 +-
 public/r/styles/base-lyra/hero-2.json     |  2 +-
 public/r/styles/base-lyra/hero-3.json     |  2 +-
 public/r/styles/base-lyra/hero-4.json     |  2 +-
 public/r/styles/base-lyra/hero-5.json     |  2 +-
 public/r/styles/base-lyra/hero-6.json     |  2 +-
 public/r/styles/base-lyra/hero-7.json     |  2 +-
 public/r/styles/base-lyra/hero-8.json     |  2 +-
 public/r/styles/base-lyra/hero-9.json     |  2 +-
 public/r/styles/base-lyra/links-2.json    |  2 +-
 public/r/styles/base-lyra/logos-1.json    |  2 +-
 public/r/styles/base-lyra/logos-2.json    |  2 +-
 public/r/styles/base-lyra/pricing-1.json  |  2 +-
 public/r/styles/base-lyra/pricing-2.json  |  2 +-
 public/r/styles/base-lyra/pricing-3.json  |  2 +-
 public/r/styles/base-lyra/product-1.json  |  2 +-
 public/r/styles/base-lyra/products-4.json |  2 +-
 public/r/styles/base-lyra/products-5.json |  2 +-
 public/r/styles/base-lyra/registry.json   | 23 +++++++++++++++--------
 public/r/styles/base-lyra/reviews-1.json  |  2 +-
 public/r/styles/base-lyra/reviews-2.json  |  2 +-
 public/r/styles/base-lyra/reviews-3.json  |  2 +-
 public/r/styles/base-lyra/reviews-4.json  |  2 +-
 public/r/styles/base-lyra/reviews-5.json  |  2 +-
 public/r/styles/base-lyra/services-1.json |  2 +-
 public/r/styles/base-lyra/services-2.json |  2 +-
 public/r/styles/base-lyra/services-3.json |  2 +-
 public/r/styles/base-lyra/services-4.json |  2 +-
 public/r/styles/base-lyra/services-5.json |  3 +--
 public/r/styles/base-lyra/services-6.json |  2 +-
 public/r/styles/base-lyra/services-7.json |  2 +-
 public/r/styles/base-lyra/sidebar-1.json  |  2 +-
 public/r/styles/base-lyra/sidebar.json    |  2 +-
 public/r/styles/base-maia/article-1.json  |  3 +--
 public/r/styles/base-maia/article-2.json  |  3 +--
 public/r/styles/base-maia/articles-1.json |  3 +--
 public/r/styles/base-maia/articles-2.json |  2 +-
 public/r/styles/base-maia/articles-3.json |  3 +--
 public/r/styles/base-maia/articles-4.json |  3 +--
 public/r/styles/base-maia/banner-1.json   |  2 +-
 public/r/styles/base-maia/banner-2.json   |  2 +-
 public/r/styles/base-maia/banner.json     |  2 +-
 public/r/styles/base-maia/blocks-1.json   |  2 +-
 public/r/styles/base-maia/breadcrumb.json |  2 +-
 public/r/styles/base-maia/contact-3.json  |  2 +-
 public/r/styles/base-maia/content-1.json  |  2 +-
 public/r/styles/base-maia/content-2.json  |  2 +-
 public/r/styles/base-maia/content-3.json  |  2 +-
 public/r/styles/base-maia/content-4.json  |  2 +-
 public/r/styles/base-maia/cta-1.json      |  2 +-
 public/r/styles/base-maia/cta-2.json      |  2 +-
 public/r/styles/base-maia/cta-3.json      |  2 +-
 public/r/styles/base-maia/cta-4.json      |  2 +-
 public/r/styles/base-maia/cta-5.json      |  2 +-
 public/r/styles/base-maia/cta-6.json      |  2 +-
 public/r/styles/base-maia/cta-7.json      |  2 +-
 public/r/styles/base-maia/cta-8.json      |  2 +-
 public/r/styles/base-maia/doc-1.json      |  2 +-
 public/r/styles/base-maia/faqs-1.json     |  2 +-
 public/r/styles/base-maia/faqs-2.json     |  2 +-
 public/r/styles/base-maia/faqs-3.json     |  2 +-
 public/r/styles/base-maia/features-1.json |  2 +-
 public/r/styles/base-maia/features-2.json |  3 +--
 public/r/styles/base-maia/features-4.json |  2 +-
 public/r/styles/base-maia/features-5.json |  3 +--
 public/r/styles/base-maia/features-6.json |  2 +-
 public/r/styles/base-maia/footer-1.json   |  2 +-
 public/r/styles/base-maia/footer-2.json   |  2 +-
 public/r/styles/base-maia/footer-3.json   |  2 +-
 public/r/styles/base-maia/header-1.json   |  5 ++++-
 public/r/styles/base-maia/header-2.json   |  5 ++++-
 public/r/styles/base-maia/header-3.json   |  5 ++++-
 public/r/styles/base-maia/header-4.json   |  5 ++++-
 public/r/styles/base-maia/header-5.json   |  5 ++++-
 public/r/styles/base-maia/hero-1.json     |  2 +-
 public/r/styles/base-maia/hero-10.json    |  2 +-
 public/r/styles/base-maia/hero-11.json    |  2 +-
 public/r/styles/base-maia/hero-12.json    |  2 +-
 public/r/styles/base-maia/hero-13.json    |  2 +-
 public/r/styles/base-maia/hero-2.json     |  2 +-
 public/r/styles/base-maia/hero-3.json     |  2 +-
 public/r/styles/base-maia/hero-4.json     |  2 +-
 public/r/styles/base-maia/hero-5.json     |  2 +-
 public/r/styles/base-maia/hero-6.json     |  2 +-
 public/r/styles/base-maia/hero-7.json     |  2 +-
 public/r/styles/base-maia/hero-8.json     |  2 +-
 public/r/styles/base-maia/hero-9.json     |  2 +-
 public/r/styles/base-maia/links-2.json    |  2 +-
 public/r/styles/base-maia/logos-1.json    |  2 +-
 public/r/styles/base-maia/logos-2.json    |  2 +-
 public/r/styles/base-maia/pricing-1.json  |  2 +-
 public/r/styles/base-maia/pricing-2.json  |  2 +-
 public/r/styles/base-maia/pricing-3.json  |  2 +-
 public/r/styles/base-maia/product-1.json  |  2 +-
 public/r/styles/base-maia/products-4.json |  2 +-
 public/r/styles/base-maia/products-5.json |  2 +-
 public/r/styles/base-maia/registry.json   | 23 +++++++++++++++--------
 public/r/styles/base-maia/reviews-1.json  |  2 +-
 public/r/styles/base-maia/reviews-2.json  |  2 +-
 public/r/styles/base-maia/reviews-3.json  |  2 +-
 public/r/styles/base-maia/reviews-4.json  |  2 +-
 public/r/styles/base-maia/reviews-5.json  |  2 +-
 public/r/styles/base-maia/services-1.json |  2 +-
 public/r/styles/base-maia/services-2.json |  2 +-
 public/r/styles/base-maia/services-3.json |  2 +-
 public/r/styles/base-maia/services-4.json |  2 +-
 public/r/styles/base-maia/services-5.json |  3 +--
 public/r/styles/base-maia/services-6.json |  2 +-
 public/r/styles/base-maia/services-7.json |  2 +-
 public/r/styles/base-maia/sidebar-1.json  |  2 +-
 public/r/styles/base-maia/sidebar.json    |  2 +-
 public/r/styles/base-mira/article-1.json  |  3 +--
 public/r/styles/base-mira/article-2.json  |  3 +--
 public/r/styles/base-mira/articles-1.json |  3 +--
 public/r/styles/base-mira/articles-2.json |  2 +-
 public/r/styles/base-mira/articles-3.json |  3 +--
 public/r/styles/base-mira/articles-4.json |  3 +--
 public/r/styles/base-mira/banner-1.json   |  2 +-
 public/r/styles/base-mira/banner-2.json   |  2 +-
 public/r/styles/base-mira/banner.json     |  2 +-
 public/r/styles/base-mira/blocks-1.json   |  2 +-
 public/r/styles/base-mira/breadcrumb.json |  2 +-
 public/r/styles/base-mira/contact-3.json  |  2 +-
 public/r/styles/base-mira/content-1.json  |  2 +-
 public/r/styles/base-mira/content-2.json  |  2 +-
 public/r/styles/base-mira/content-3.json  |  2 +-
 public/r/styles/base-mira/content-4.json  |  2 +-
 public/r/styles/base-mira/cta-1.json      |  2 +-
 public/r/styles/base-mira/cta-2.json      |  2 +-
 public/r/styles/base-mira/cta-3.json      |  2 +-
 public/r/styles/base-mira/cta-4.json      |  2 +-
 public/r/styles/base-mira/cta-5.json      |  2 +-
 public/r/styles/base-mira/cta-6.json      |  2 +-
 public/r/styles/base-mira/cta-7.json      |  2 +-
 public/r/styles/base-mira/cta-8.json      |  2 +-
 public/r/styles/base-mira/doc-1.json      |  2 +-
 public/r/styles/base-mira/faqs-1.json     |  2 +-
 public/r/styles/base-mira/faqs-2.json     |  2 +-
 public/r/styles/base-mira/faqs-3.json     |  2 +-
 public/r/styles/base-mira/features-1.json |  2 +-
 public/r/styles/base-mira/features-2.json |  3 +--
 public/r/styles/base-mira/features-4.json |  2 +-
 public/r/styles/base-mira/features-5.json |  3 +--
 public/r/styles/base-mira/features-6.json |  2 +-
 public/r/styles/base-mira/footer-1.json   |  2 +-
 public/r/styles/base-mira/footer-2.json   |  2 +-
 public/r/styles/base-mira/footer-3.json   |  2 +-
 public/r/styles/base-mira/header-1.json   |  5 ++++-
 public/r/styles/base-mira/header-2.json   |  5 ++++-
 public/r/styles/base-mira/header-3.json   |  5 ++++-
 public/r/styles/base-mira/header-4.json   |  5 ++++-
 public/r/styles/base-mira/header-5.json   |  5 ++++-
 public/r/styles/base-mira/hero-1.json     |  2 +-
 public/r/styles/base-mira/hero-10.json    |  2 +-
 public/r/styles/base-mira/hero-11.json    |  2 +-
 public/r/styles/base-mira/hero-12.json    |  2 +-
 public/r/styles/base-mira/hero-13.json    |  2 +-
 public/r/styles/base-mira/hero-2.json     |  2 +-
 public/r/styles/base-mira/hero-3.json     |  2 +-
 public/r/styles/base-mira/hero-4.json     |  2 +-
 public/r/styles/base-mira/hero-5.json     |  2 +-
 public/r/styles/base-mira/hero-6.json     |  2 +-
 public/r/styles/base-mira/hero-7.json     |  2 +-
 public/r/styles/base-mira/hero-8.json     |  2 +-
 public/r/styles/base-mira/hero-9.json     |  2 +-
 public/r/styles/base-mira/links-2.json    |  2 +-
 public/r/styles/base-mira/logos-1.json    |  2 +-
 public/r/styles/base-mira/logos-2.json    |  2 +-
 public/r/styles/base-mira/pricing-1.json  |  2 +-
 public/r/styles/base-mira/pricing-2.json  |  2 +-
 public/r/styles/base-mira/pricing-3.json  |  2 +-
 public/r/styles/base-mira/product-1.json  |  2 +-
 public/r/styles/base-mira/products-4.json |  2 +-
 public/r/styles/base-mira/products-5.json |  2 +-
 public/r/styles/base-mira/registry.json   | 23 +++++++++++++++--------
 public/r/styles/base-mira/reviews-1.json  |  2 +-
 public/r/styles/base-mira/reviews-2.json  |  2 +-
 public/r/styles/base-mira/reviews-3.json  |  2 +-
 public/r/styles/base-mira/reviews-4.json  |  2 +-
 public/r/styles/base-mira/reviews-5.json  |  2 +-
 public/r/styles/base-mira/services-1.json |  2 +-
 public/r/styles/base-mira/services-2.json |  2 +-
 public/r/styles/base-mira/services-3.json |  2 +-
 public/r/styles/base-mira/services-4.json |  2 +-
 public/r/styles/base-mira/services-5.json |  3 +--
 public/r/styles/base-mira/services-6.json |  2 +-
 public/r/styles/base-mira/services-7.json |  2 +-
 public/r/styles/base-mira/sidebar-1.json  |  2 +-
 public/r/styles/base-mira/sidebar.json    |  2 +-
 public/r/styles/base-nova/article-1.json  |  3 +--
 public/r/styles/base-nova/article-2.json  |  3 +--
 public/r/styles/base-nova/articles-1.json |  3 +--
 public/r/styles/base-nova/articles-2.json |  2 +-
 public/r/styles/base-nova/articles-3.json |  3 +--
 public/r/styles/base-nova/articles-4.json |  3 +--
 public/r/styles/base-nova/banner-1.json   |  2 +-
 public/r/styles/base-nova/banner-2.json   |  2 +-
 public/r/styles/base-nova/banner.json     |  2 +-
 public/r/styles/base-nova/blocks-1.json   |  2 +-
 public/r/styles/base-nova/breadcrumb.json |  2 +-
 public/r/styles/base-nova/contact-3.json  |  2 +-
 public/r/styles/base-nova/content-1.json  |  2 +-
 public/r/styles/base-nova/content-2.json  |  2 +-
 public/r/styles/base-nova/content-3.json  |  2 +-
 public/r/styles/base-nova/content-4.json  |  2 +-
 public/r/styles/base-nova/cta-1.json      |  2 +-
 public/r/styles/base-nova/cta-2.json      |  2 +-
 public/r/styles/base-nova/cta-3.json      |  2 +-
 public/r/styles/base-nova/cta-4.json      |  2 +-
 public/r/styles/base-nova/cta-5.json      |  2 +-
 public/r/styles/base-nova/cta-6.json      |  2 +-
 public/r/styles/base-nova/cta-7.json      |  2 +-
 public/r/styles/base-nova/cta-8.json      |  2 +-
 public/r/styles/base-nova/doc-1.json      |  2 +-
 public/r/styles/base-nova/faqs-1.json     |  2 +-
 public/r/styles/base-nova/faqs-2.json     |  2 +-
 public/r/styles/base-nova/faqs-3.json     |  2 +-
 public/r/styles/base-nova/features-1.json |  2 +-
 public/r/styles/base-nova/features-2.json |  3 +--
 public/r/styles/base-nova/features-4.json |  2 +-
 public/r/styles/base-nova/features-5.json |  3 +--
 public/r/styles/base-nova/features-6.json |  2 +-
 public/r/styles/base-nova/footer-1.json   |  2 +-
 public/r/styles/base-nova/footer-2.json   |  2 +-
 public/r/styles/base-nova/footer-3.json   |  2 +-
 public/r/styles/base-nova/header-1.json   |  5 ++++-
 public/r/styles/base-nova/header-2.json   |  5 ++++-
 public/r/styles/base-nova/header-3.json   |  5 ++++-
 public/r/styles/base-nova/header-4.json   |  5 ++++-
 public/r/styles/base-nova/header-5.json   |  5 ++++-
 public/r/styles/base-nova/hero-1.json     |  2 +-
 public/r/styles/base-nova/hero-10.json    |  2 +-
 public/r/styles/base-nova/hero-11.json    |  2 +-
 public/r/styles/base-nova/hero-12.json    |  2 +-
 public/r/styles/base-nova/hero-13.json    |  2 +-
 public/r/styles/base-nova/hero-2.json     |  2 +-
 public/r/styles/base-nova/hero-3.json     |  2 +-
 public/r/styles/base-nova/hero-4.json     |  2 +-
 public/r/styles/base-nova/hero-5.json     |  2 +-
 public/r/styles/base-nova/hero-6.json     |  2 +-
 public/r/styles/base-nova/hero-7.json     |  2 +-
 public/r/styles/base-nova/hero-8.json     |  2 +-
 public/r/styles/base-nova/hero-9.json     |  2 +-
 public/r/styles/base-nova/links-2.json    |  2 +-
 public/r/styles/base-nova/logos-1.json    |  2 +-
 public/r/styles/base-nova/logos-2.json    |  2 +-
 public/r/styles/base-nova/pricing-1.json  |  2 +-
 public/r/styles/base-nova/pricing-2.json  |  2 +-
 public/r/styles/base-nova/pricing-3.json  |  2 +-
 public/r/styles/base-nova/product-1.json  |  2 +-
 public/r/styles/base-nova/products-4.json |  2 +-
 public/r/styles/base-nova/products-5.json |  2 +-
 public/r/styles/base-nova/registry.json   | 23 +++++++++++++++--------
 public/r/styles/base-nova/reviews-1.json  |  2 +-
 public/r/styles/base-nova/reviews-2.json  |  2 +-
 public/r/styles/base-nova/reviews-3.json  |  2 +-
 public/r/styles/base-nova/reviews-4.json  |  2 +-
 public/r/styles/base-nova/reviews-5.json  |  2 +-
 public/r/styles/base-nova/services-1.json |  2 +-
 public/r/styles/base-nova/services-2.json |  2 +-
 public/r/styles/base-nova/services-3.json |  2 +-
 public/r/styles/base-nova/services-4.json |  2 +-
 public/r/styles/base-nova/services-5.json |  3 +--
 public/r/styles/base-nova/services-6.json |  2 +-
 public/r/styles/base-nova/services-7.json |  2 +-
 public/r/styles/base-nova/sidebar-1.json  |  2 +-
 public/r/styles/base-nova/sidebar.json    |  2 +-
 public/r/styles/base-rhea/article-1.json  |  3 +--
 public/r/styles/base-rhea/article-2.json  |  3 +--
 public/r/styles/base-rhea/articles-1.json |  3 +--
 public/r/styles/base-rhea/articles-2.json |  2 +-
 public/r/styles/base-rhea/articles-3.json |  3 +--
 public/r/styles/base-rhea/articles-4.json |  3 +--
 public/r/styles/base-rhea/banner-1.json   |  2 +-
 public/r/styles/base-rhea/banner-2.json   |  2 +-
 public/r/styles/base-rhea/banner.json     |  2 +-
 public/r/styles/base-rhea/blocks-1.json   |  2 +-
 public/r/styles/base-rhea/breadcrumb.json |  2 +-
 public/r/styles/base-rhea/contact-3.json  |  2 +-
 public/r/styles/base-rhea/content-1.json  |  2 +-
 public/r/styles/base-rhea/content-2.json  |  2 +-
 public/r/styles/base-rhea/content-3.json  |  2 +-
 public/r/styles/base-rhea/content-4.json  |  2 +-
 public/r/styles/base-rhea/cta-1.json      |  2 +-
 public/r/styles/base-rhea/cta-2.json      |  2 +-
 public/r/styles/base-rhea/cta-3.json      |  2 +-
 public/r/styles/base-rhea/cta-4.json      |  2 +-
 public/r/styles/base-rhea/cta-5.json      |  2 +-
 public/r/styles/base-rhea/cta-6.json      |  2 +-
 public/r/styles/base-rhea/cta-7.json      |  2 +-
 public/r/styles/base-rhea/cta-8.json      |  2 +-
 public/r/styles/base-rhea/doc-1.json      |  2 +-
 public/r/styles/base-rhea/faqs-1.json     |  2 +-
 public/r/styles/base-rhea/faqs-2.json     |  2 +-
 public/r/styles/base-rhea/faqs-3.json     |  2 +-
 public/r/styles/base-rhea/features-1.json |  2 +-
 public/r/styles/base-rhea/features-2.json |  3 +--
 public/r/styles/base-rhea/features-4.json |  2 +-
 public/r/styles/base-rhea/features-5.json |  3 +--
 public/r/styles/base-rhea/features-6.json |  2 +-
 public/r/styles/base-rhea/footer-1.json   |  2 +-
 public/r/styles/base-rhea/footer-2.json   |  2 +-
 public/r/styles/base-rhea/footer-3.json   |  2 +-
 public/r/styles/base-rhea/header-1.json   |  5 ++++-
 public/r/styles/base-rhea/header-2.json   |  5 ++++-
 public/r/styles/base-rhea/header-3.json   |  5 ++++-
 public/r/styles/base-rhea/header-4.json   |  5 ++++-
 public/r/styles/base-rhea/header-5.json   |  5 ++++-
 public/r/styles/base-rhea/hero-1.json     |  2 +-
 public/r/styles/base-rhea/hero-10.json    |  2 +-
 public/r/styles/base-rhea/hero-11.json    |  2 +-
 public/r/styles/base-rhea/hero-12.json    |  2 +-
 public/r/styles/base-rhea/hero-13.json    |  2 +-
 public/r/styles/base-rhea/hero-2.json     |  2 +-
 public/r/styles/base-rhea/hero-3.json     |  2 +-
 public/r/styles/base-rhea/hero-4.json     |  2 +-
 public/r/styles/base-rhea/hero-5.json     |  2 +-
 public/r/styles/base-rhea/hero-6.json     |  2 +-
 public/r/styles/base-rhea/hero-7.json     |  2 +-
 public/r/styles/base-rhea/hero-8.json     |  2 +-
 public/r/styles/base-rhea/hero-9.json     |  2 +-
 public/r/styles/base-rhea/links-2.json    |  2 +-
 public/r/styles/base-rhea/logos-1.json    |  2 +-
 public/r/styles/base-rhea/logos-2.json    |  2 +-
 public/r/styles/base-rhea/pricing-1.json  |  2 +-
 public/r/styles/base-rhea/pricing-2.json  |  2 +-
 public/r/styles/base-rhea/pricing-3.json  |  2 +-
 public/r/styles/base-rhea/product-1.json  |  2 +-
 public/r/styles/base-rhea/products-4.json |  2 +-
 public/r/styles/base-rhea/products-5.json |  2 +-
 public/r/styles/base-rhea/registry.json   | 23 +++++++++++++++--------
 public/r/styles/base-rhea/reviews-1.json  |  2 +-
 public/r/styles/base-rhea/reviews-2.json  |  2 +-
 public/r/styles/base-rhea/reviews-3.json  |  2 +-
 public/r/styles/base-rhea/reviews-4.json  |  2 +-
 public/r/styles/base-rhea/reviews-5.json  |  2 +-
 public/r/styles/base-rhea/services-1.json |  2 +-
 public/r/styles/base-rhea/services-2.json |  2 +-
 public/r/styles/base-rhea/services-3.json |  2 +-
 public/r/styles/base-rhea/services-4.json |  2 +-
 public/r/styles/base-rhea/services-5.json |  3 +--
 public/r/styles/base-rhea/services-6.json |  2 +-
 public/r/styles/base-rhea/services-7.json |  2 +-
 public/r/styles/base-rhea/sidebar-1.json  |  2 +-
 public/r/styles/base-rhea/sidebar.json    |  2 +-
 public/r/styles/base-sera/article-1.json  |  3 +--
 public/r/styles/base-sera/article-2.json  |  3 +--
 public/r/styles/base-sera/articles-1.json |  3 +--
 public/r/styles/base-sera/articles-2.json |  2 +-
 public/r/styles/base-sera/articles-3.json |  3 +--
 public/r/styles/base-sera/articles-4.json |  3 +--
 public/r/styles/base-sera/banner-1.json   |  2 +-
 public/r/styles/base-sera/banner-2.json   |  2 +-
 public/r/styles/base-sera/banner.json     |  2 +-
 public/r/styles/base-sera/blocks-1.json   |  2 +-
 public/r/styles/base-sera/breadcrumb.json |  2 +-
 public/r/styles/base-sera/contact-3.json  |  2 +-
 public/r/styles/base-sera/content-1.json  |  2 +-
 public/r/styles/base-sera/content-2.json  |  2 +-
 public/r/styles/base-sera/content-3.json  |  2 +-
 public/r/styles/base-sera/content-4.json  |  2 +-
 public/r/styles/base-sera/cta-1.json      |  2 +-
 public/r/styles/base-sera/cta-2.json      |  2 +-
 public/r/styles/base-sera/cta-3.json      |  2 +-
 public/r/styles/base-sera/cta-4.json      |  2 +-
 public/r/styles/base-sera/cta-5.json      |  2 +-
 public/r/styles/base-sera/cta-6.json      |  2 +-
 public/r/styles/base-sera/cta-7.json      |  2 +-
 public/r/styles/base-sera/cta-8.json      |  2 +-
 public/r/styles/base-sera/doc-1.json      |  2 +-
 public/r/styles/base-sera/faqs-1.json     |  2 +-
 public/r/styles/base-sera/faqs-2.json     |  2 +-
 public/r/styles/base-sera/faqs-3.json     |  2 +-
 public/r/styles/base-sera/features-1.json |  2 +-
 public/r/styles/base-sera/features-2.json |  3 +--
 public/r/styles/base-sera/features-4.json |  2 +-
 public/r/styles/base-sera/features-5.json |  3 +--
 public/r/styles/base-sera/features-6.json |  2 +-
 public/r/styles/base-sera/footer-1.json   |  2 +-
 public/r/styles/base-sera/footer-2.json   |  2 +-
 public/r/styles/base-sera/footer-3.json   |  2 +-
 public/r/styles/base-sera/header-1.json   |  5 ++++-
 public/r/styles/base-sera/header-2.json   |  5 ++++-
 public/r/styles/base-sera/header-3.json   |  5 ++++-
 public/r/styles/base-sera/header-4.json   |  5 ++++-
 public/r/styles/base-sera/header-5.json   |  5 ++++-
 public/r/styles/base-sera/hero-1.json     |  2 +-
 public/r/styles/base-sera/hero-10.json    |  2 +-
 public/r/styles/base-sera/hero-11.json    |  2 +-
 public/r/styles/base-sera/hero-12.json    |  2 +-
 public/r/styles/base-sera/hero-13.json    |  2 +-
 public/r/styles/base-sera/hero-2.json     |  2 +-
 public/r/styles/base-sera/hero-3.json     |  2 +-
 public/r/styles/base-sera/hero-4.json     |  2 +-
 public/r/styles/base-sera/hero-5.json     |  2 +-
 public/r/styles/base-sera/hero-6.json     |  2 +-
 public/r/styles/base-sera/hero-7.json     |  2 +-
 public/r/styles/base-sera/hero-8.json     |  2 +-
 public/r/styles/base-sera/hero-9.json     |  2 +-
 public/r/styles/base-sera/links-2.json    |  2 +-
 public/r/styles/base-sera/logos-1.json    |  2 +-
 public/r/styles/base-sera/logos-2.json    |  2 +-
 public/r/styles/base-sera/pricing-1.json  |  2 +-
 public/r/styles/base-sera/pricing-2.json  |  2 +-
 public/r/styles/base-sera/pricing-3.json  |  2 +-
 public/r/styles/base-sera/product-1.json  |  2 +-
 public/r/styles/base-sera/products-4.json |  2 +-
 public/r/styles/base-sera/products-5.json |  2 +-
 public/r/styles/base-sera/registry.json   | 23 +++++++++++++++--------
 public/r/styles/base-sera/reviews-1.json  |  2 +-
 public/r/styles/base-sera/reviews-2.json  |  2 +-
 public/r/styles/base-sera/reviews-3.json  |  2 +-
 public/r/styles/base-sera/reviews-4.json  |  2 +-
 public/r/styles/base-sera/reviews-5.json  |  2 +-
 public/r/styles/base-sera/services-1.json |  2 +-
 public/r/styles/base-sera/services-2.json |  2 +-
 public/r/styles/base-sera/services-3.json |  2 +-
 public/r/styles/base-sera/services-4.json |  2 +-
 public/r/styles/base-sera/services-5.json |  3 +--
 public/r/styles/base-sera/services-6.json |  2 +-
 public/r/styles/base-sera/services-7.json |  2 +-
 public/r/styles/base-sera/sidebar-1.json  |  2 +-
 public/r/styles/base-sera/sidebar.json    |  2 +-
 public/r/styles/base-vega/article-1.json  |  3 +--
 public/r/styles/base-vega/article-2.json  |  3 +--
 public/r/styles/base-vega/articles-1.json |  3 +--
 public/r/styles/base-vega/articles-2.json |  2 +-
 public/r/styles/base-vega/articles-3.json |  3 +--
 public/r/styles/base-vega/articles-4.json |  3 +--
 public/r/styles/base-vega/banner-1.json   |  2 +-
 public/r/styles/base-vega/banner-2.json   |  2 +-
 public/r/styles/base-vega/banner.json     |  2 +-
 public/r/styles/base-vega/blocks-1.json   |  2 +-
 public/r/styles/base-vega/breadcrumb.json |  2 +-
 public/r/styles/base-vega/contact-3.json  |  2 +-
 public/r/styles/base-vega/content-1.json  |  2 +-
 public/r/styles/base-vega/content-2.json  |  2 +-
 public/r/styles/base-vega/content-3.json  |  2 +-
 public/r/styles/base-vega/content-4.json  |  2 +-
 public/r/styles/base-vega/cta-1.json      |  2 +-
 public/r/styles/base-vega/cta-2.json      |  2 +-
 public/r/styles/base-vega/cta-3.json      |  2 +-
 public/r/styles/base-vega/cta-4.json      |  2 +-
 public/r/styles/base-vega/cta-5.json      |  2 +-
 public/r/styles/base-vega/cta-6.json      |  2 +-
 public/r/styles/base-vega/cta-7.json      |  2 +-
 public/r/styles/base-vega/cta-8.json      |  2 +-
 public/r/styles/base-vega/doc-1.json      |  2 +-
 public/r/styles/base-vega/faqs-1.json     |  2 +-
 public/r/styles/base-vega/faqs-2.json     |  2 +-
 public/r/styles/base-vega/faqs-3.json     |  2 +-
 public/r/styles/base-vega/features-1.json |  2 +-
 public/r/styles/base-vega/features-2.json |  3 +--
 public/r/styles/base-vega/features-4.json |  2 +-
 public/r/styles/base-vega/features-5.json |  3 +--
 public/r/styles/base-vega/features-6.json |  2 +-
 public/r/styles/base-vega/footer-1.json   |  2 +-
 public/r/styles/base-vega/footer-2.json   |  2 +-
 public/r/styles/base-vega/footer-3.json   |  2 +-
 public/r/styles/base-vega/header-1.json   |  5 ++++-
 public/r/styles/base-vega/header-2.json   |  5 ++++-
 public/r/styles/base-vega/header-3.json   |  5 ++++-
 public/r/styles/base-vega/header-4.json   |  5 ++++-
 public/r/styles/base-vega/header-5.json   |  5 ++++-
 public/r/styles/base-vega/hero-1.json     |  2 +-
 public/r/styles/base-vega/hero-10.json    |  2 +-
 public/r/styles/base-vega/hero-11.json    |  2 +-
 public/r/styles/base-vega/hero-12.json    |  2 +-
 public/r/styles/base-vega/hero-13.json    |  2 +-
 public/r/styles/base-vega/hero-2.json     |  2 +-
 public/r/styles/base-vega/hero-3.json     |  2 +-
 public/r/styles/base-vega/hero-4.json     |  2 +-
 public/r/styles/base-vega/hero-5.json     |  2 +-
 public/r/styles/base-vega/hero-6.json     |  2 +-
 public/r/styles/base-vega/hero-7.json     |  2 +-
 public/r/styles/base-vega/hero-8.json     |  2 +-
 public/r/styles/base-vega/hero-9.json     |  2 +-
 public/r/styles/base-vega/links-2.json    |  2 +-
 public/r/styles/base-vega/logos-1.json    |  2 +-
 public/r/styles/base-vega/logos-2.json    |  2 +-
 public/r/styles/base-vega/pricing-1.json  |  2 +-
 public/r/styles/base-vega/pricing-2.json  |  2 +-
 public/r/styles/base-vega/pricing-3.json  |  2 +-
 public/r/styles/base-vega/product-1.json  |  2 +-
 public/r/styles/base-vega/products-4.json |  2 +-
 public/r/styles/base-vega/products-5.json |  2 +-
 public/r/styles/base-vega/registry.json   | 23 +++++++++++++++--------
 public/r/styles/base-vega/reviews-1.json  |  2 +-
 public/r/styles/base-vega/reviews-2.json  |  2 +-
 public/r/styles/base-vega/reviews-3.json  |  2 +-
 public/r/styles/base-vega/reviews-4.json  |  2 +-
 public/r/styles/base-vega/reviews-5.json  |  2 +-
 public/r/styles/base-vega/services-1.json |  2 +-
 public/r/styles/base-vega/services-2.json |  2 +-
 public/r/styles/base-vega/services-3.json |  2 +-
 public/r/styles/base-vega/services-4.json |  2 +-
 public/r/styles/base-vega/services-5.json |  3 +--
 public/r/styles/base-vega/services-6.json |  2 +-
 public/r/styles/base-vega/services-7.json |  2 +-
 public/r/styles/base-vega/sidebar-1.json  |  2 +-
 public/r/styles/base-vega/sidebar.json    |  2 +-
 702 files changed, 963 insertions(+), 837 deletions(-)

diff --git a/public/r/article-1.json b/public/r/article-1.json
index 6bdf16d1f..c45df6988 100644
--- a/public/r/article-1.json
+++ b/public/r/article-1.json
@@ -5,13 +5,12 @@
   "description": "Editorial article layouts for long-form stories, interviews, and analysis.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/article-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      {badge && (\n        <Badge variant=\"secondary\" class=\"w-fit\">\n          {badge}\n        </Badge>\n      )}\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/article-2.json b/public/r/article-2.json
index 01da358a6..6511245f3 100644
--- a/public/r/article-2.json
+++ b/public/r/article-2.json
@@ -5,13 +5,12 @@
   "description": "Editorial article layouts for long-form stories, interviews, and analysis.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/article-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/articles-1.json b/public/r/articles-1.json
index e742cb898..30aa52bd2 100644
--- a/public/r/articles-1.json
+++ b/public/r/articles-1.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      {badge && (\n        <Badge variant=\"secondary\" class=\"w-fit\">\n          {badge}\n        </Badge>\n      )}\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720, 960]}\n            sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/articles-2.json b/public/r/articles-2.json
index 266269748..a9d78a9f5 100644
--- a/public/r/articles-2.json
+++ b/public/r/articles-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class={cn(\n          \"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\",\n          badge && \"mt-4\"\n        )}\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <a\n      href={featured.href ?? \"#\"}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </a>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720]}\n            sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/articles-3.json b/public/r/articles-3.json
index aecb82d0d..e4182724a 100644
--- a/public/r/articles-3.json
+++ b/public/r/articles-3.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        {badge && (\n          <Badge variant=\"secondary\" class=\"w-fit\">\n            {badge}\n          </Badge>\n        )}\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720]}\n            sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/articles-4.json b/public/r/articles-4.json
index 222f11bc5..b0c908073 100644
--- a/public/r/articles-4.json
+++ b/public/r/articles-4.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class={cn(\n          \"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\",\n          badge && \"mt-4\"\n        )}\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/banner-1.json b/public/r/banner-1.json
index f83aa2ac3..3d0e3d2b1 100644
--- a/public/r/banner-1.json
+++ b/public/r/banner-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  link?: {\n    label: string\n    href: string\n  }\n}\n\nconst { class: className, title, description, link, ...props } = Astro.props\n---\n\n<Banner\n  storageKey=\"banner-1\"\n  class={cn(\"dark bg-background text-foreground\", className)}\n  {...props}\n>\n  <BannerContainer class=\"flex-row items-center gap-x-4 gap-y-1\">\n    <p class=\"text-sm leading-relaxed\">\n      <span class=\"font-semibold\">{title}</span>{\" \"}\n      <span class=\"mx-1.5 hidden opacity-50 sm:inline\">&mdash;</span>{\" \"}\n      <span class=\"opacity-80\">{description}</span>\n    </p>\n    {link && (\n      <a\n        href={link.href}\n        class=\"group/link inline-flex shrink-0 items-center gap-1 text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80\"\n      >\n        {link.label}\n        <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/link:translate-x-0.5\" />\n      </a>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  link: {\n    label: string\n    href: string\n  }\n  closeLabel: string\n  storageKey?: string\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  link,\n  closeLabel,\n  storageKey,\n  ...props\n} = Astro.props\n---\n\n<Banner\n  storageKey={storageKey}\n  class={cn(\"dark bg-background text-foreground\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-row items-center gap-x-4 gap-y-1\"\n    closeLabel={closeLabel}\n  >\n    <p class=\"text-sm leading-relaxed\">\n      <span class=\"font-semibold\">{title}</span>{\" \"}\n      <span class=\"mx-1.5 hidden opacity-50 sm:inline\">&middot;</span>{\" \"}\n      <span class=\"opacity-80\">{description}</span>\n    </p>\n    <a\n      href={link.href}\n      class=\"group/link inline-flex shrink-0 items-center gap-1 text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80\"\n    >\n      {link.label}\n      <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/link:translate-x-0.5\" />\n    </a>\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/banner-2.json b/public/r/banner-2.json
index 6ea880320..eb1d06077 100644
--- a/public/r/banner-2.json
+++ b/public/r/banner-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner variant=\"floating\" class={cn(\"@container\", className)} {...props}>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"sm\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/banner.json b/public/r/banner.json
index ad6f6745e..d3a8e8580 100644
--- a/public/r/banner.json
+++ b/public/r/banner.json
@@ -14,7 +14,7 @@
     },
     {
       "path": "src/components/ui/banner/banner-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst {\n  class: className,\n  showClose = true,\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-sm text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n  closeLabel?: string\n}\n\nconst {\n  class: className,\n  showClose = true,\n  closeLabel = \"Close\",\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-sm text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label={closeLabel}\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">{closeLabel}</span>\n    </button>\n  )}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/blocks-1.json b/public/r/blocks-1.json
index 5f875b246..a0da615ca 100644
--- a/public/r/blocks-1.json
+++ b/public/r/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/breadcrumb.json b/public/r/breadcrumb.json
index e97c174a8..ada28b337 100644
--- a/public/r/breadcrumb.json
+++ b/public/r/breadcrumb.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/breadcrumb/breadcrumb.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"nav\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<nav\n  aria-label=\"breadcrumb\"\n  data-slot=\"breadcrumb\"\n  class={cn(className)}\n  {...props}\n>\n  <slot />\n</nav>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"nav\">\n\nconst {\n  class: className,\n  \"aria-label\": ariaLabel = \"breadcrumb\",\n  ...props\n} = Astro.props\n---\n\n<nav\n  aria-label={ariaLabel}\n  data-slot=\"breadcrumb\"\n  class={cn(className)}\n  {...props}\n>\n  <slot />\n</nav>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/contact-3.json b/public/r/contact-3.json
index 5a344d9fc..15a42d48f 100644
--- a/public/r/contact-3.json
+++ b/public/r/contact-3.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/contact-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"Contact image\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/content-1.json b/public/r/content-1.json
index 9bd4e3cc6..37cc98379 100644
--- a/public/r/content-1.json
+++ b/public/r/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features && features.length > 0 && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-3 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/content-2.json b/public/r/content-2.json
index 14af2df66..693b5d9bb 100644
--- a/public/r/content-2.json
+++ b/public/r/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/content-3.json b/public/r/content-3.json
index 6ae269ebc..fdc0b7afd 100644
--- a/public/r/content-3.json
+++ b/public/r/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/content-4.json b/public/r/content-4.json
index 09aa3dfbf..4dd1cd6f3 100644
--- a/public/r/content-4.json
+++ b/public/r/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features && features.length > 0 && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons && buttons.length > 0 && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/cta-1.json b/public/r/cta-1.json
index d4b30fd2d..880fa60eb 100644
--- a/public/r/cta-1.json
+++ b/public/r/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/cta-2.json b/public/r/cta-2.json
index 458de6318..05cfb2687 100644
--- a/public/r/cta-2.json
+++ b/public/r/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/cta-3.json b/public/r/cta-3.json
index dba896177..caf08c91a 100644
--- a/public/r/cta-3.json
+++ b/public/r/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/cta-4.json b/public/r/cta-4.json
index 244bfa2cd..2ed196c48 100644
--- a/public/r/cta-4.json
+++ b/public/r/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/cta-5.json b/public/r/cta-5.json
index 9c655d7ac..39ff0c7bb 100644
--- a/public/r/cta-5.json
+++ b/public/r/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/cta-6.json b/public/r/cta-6.json
index 8b4d735ee..cbd7368fe 100644
--- a/public/r/cta-6.json
+++ b/public/r/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/cta-7.json b/public/r/cta-7.json
index 961d6855d..86813e6c0 100644
--- a/public/r/cta-7.json
+++ b/public/r/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-muted-foreground text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/cta-8.json b/public/r/cta-8.json
index 4b2d77e41..eaac34d78 100644
--- a/public/r/cta-8.json
+++ b/public/r/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/doc-1.json b/public/r/doc-1.json
index 4806861e6..9c98b34f9 100644
--- a/public/r/doc-1.json
+++ b/public/r/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\" data-doc-content>\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document.querySelectorAll(\"[data-doc-content] > pre\").forEach((pre) => {\n      if (pre.closest(\".docs-code-block\")) return\n      const wrapper = document.createElement(\"div\")\n      const button = document.createElement(\"button\")\n      wrapper.className = \"docs-code-block\"\n      wrapper.dataset.notTypeset = \"\"\n      button.type = \"button\"\n      button.className = \"docs-code-copy\"\n      button.ariaLabel = \"Copy code\"\n      button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n      pre.before(wrapper)\n      wrapper.append(pre, button)\n    })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/faqs-1.json b/public/r/faqs-1.json
index e33726343..92d59430a 100644
--- a/public/r/faqs-1.json
+++ b/public/r/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/faqs-2.json b/public/r/faqs-2.json
index 5d669bafe..7662c1100 100644
--- a/public/r/faqs-2.json
+++ b/public/r/faqs-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-8 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/faqs-3.json b/public/r/faqs-3.json
index 794ef5a59..a0d634566 100644
--- a/public/r/faqs-3.json
+++ b/public/r/faqs-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/features-1.json b/public/r/features-1.json
index e4cd92254..585c6b7f2 100644
--- a/public/r/features-1.json
+++ b/public/r/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/features-2.json b/public/r/features-2.json
index 51c9a088e..467338413 100644
--- a/public/r/features-2.json
+++ b/public/r/features-2.json
@@ -7,14 +7,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/features-4.json b/public/r/features-4.json
index 6210bc332..6cadcba43 100644
--- a/public/r/features-4.json
+++ b/public/r/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/features-5.json b/public/r/features-5.json
index 8575743db..61eba406f 100644
--- a/public/r/features-5.json
+++ b/public/r/features-5.json
@@ -7,14 +7,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/features-6.json b/public/r/features-6.json
index 5e729533e..d21ff5c93 100644
--- a/public/r/features-6.json
+++ b/public/r/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/footer-1.json b/public/r/footer-1.json
index 3d06945e5..7ac3e8331 100644
--- a/public/r/footer-1.json
+++ b/public/r/footer-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials && socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/footer-2.json b/public/r/footer-2.json
index 2820c1f64..217f595bb 100644
--- a/public/r/footer-2.json
+++ b/public/r/footer-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links?: {\n    label: string\n    href: string\n  }[]\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel?: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel = \"Footer navigation\",\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      {links && links.length > 0 && (\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n        >\n          {links.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      )}\n      {socials && socials.length > 0 && (\n        <div class=\"flex items-center justify-center gap-3\">\n          {socials.map((social) => (\n            <a\n              href={social.href}\n              class=\"text-muted-foreground hover:text-foreground transition-colors\"\n              aria-label={social.label}\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              <Icon name={social.icon} href={social.href} class=\"size-4\" />\n            </a>\n          ))}\n        </div>\n      )}\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      <div class=\"flex items-center justify-center gap-3\">\n        {socials.map((social) => (\n          <a\n            href={social.href}\n            class=\"text-muted-foreground hover:text-foreground transition-colors\"\n            aria-label={social.label}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n          >\n            <Icon name={social.icon} href={social.href} class=\"size-4\" />\n          </a>\n        ))}\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/footer-3.json b/public/r/footer-3.json
index 6c9882990..b5bc278e9 100644
--- a/public/r/footer-3.json
+++ b/public/r/footer-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks?: {\n    label: string\n    href: string\n  }[]\n  navigationLabel?: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel = \"Footer navigation\",\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials && socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        {bottomLinks && bottomLinks.length > 0 && (\n          <nav\n            aria-label={navigationLabel}\n            class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n          >\n            {bottomLinks.map((link) => (\n              <a\n                href={link.href}\n                class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                {link.label}\n              </a>\n            ))}\n          </nav>\n        )}\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/header-1.json b/public/r/header-1.json
index 8baebe0f5..5b7896a87 100644
--- a/public/r/header-1.json
+++ b/public/r/header-1.json
@@ -3,6 +3,9 @@
   "name": "header-1",
   "title": "Header 1",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/header-2.json b/public/r/header-2.json
index a1039f8b2..6a35ca3c4 100644
--- a/public/r/header-2.json
+++ b/public/r/header-2.json
@@ -3,6 +3,9 @@
   "name": "header-2",
   "title": "Header 2",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/header-3.json b/public/r/header-3.json
index e511a92e7..70418bc87 100644
--- a/public/r/header-3.json
+++ b/public/r/header-3.json
@@ -3,6 +3,9 @@
   "name": "header-3",
   "title": "Header 3",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -15,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/header-4.json b/public/r/header-4.json
index 3bd445ad1..0a7d02adf 100644
--- a/public/r/header-4.json
+++ b/public/r/header-4.json
@@ -3,6 +3,9 @@
   "name": "header-4",
   "title": "Header 4",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/header-5.json b/public/r/header-5.json
index 5f781e13c..97bc283a6 100644
--- a/public/r/header-5.json
+++ b/public/r/header-5.json
@@ -3,6 +3,9 @@
   "name": "header-5",
   "title": "Header 5",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -15,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/hero-1.json b/public/r/hero-1.json
index fd7eef979..74dc8b92d 100644
--- a/public/r/hero-1.json
+++ b/public/r/hero-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge?: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    {badge && (\n      <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n        {badge.label}\n      </Badge>\n    )}\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n      {badge.label}\n    </Badge>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/hero-10.json b/public/r/hero-10.json
index 1d044e3e4..96ed3c089 100644
--- a/public/r/hero-10.json
+++ b/public/r/hero-10.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-10.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/hero-11.json b/public/r/hero-11.json
index dcb5f5ffc..86a7f5e03 100644
--- a/public/r/hero-11.json
+++ b/public/r/hero-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-11.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating value={socialProof.rating} />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/hero-12.json b/public/r/hero-12.json
index fb5fd9794..a88805751 100644
--- a/public/r/hero-12.json
+++ b/public/r/hero-12.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-12.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/hero-13.json b/public/r/hero-13.json
index c30e39ca1..f25d55373 100644
--- a/public/r/hero-13.json
+++ b/public/r/hero-13.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-13.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/hero-2.json b/public/r/hero-2.json
index c4b5093a0..672b023de 100644
--- a/public/r/hero-2.json
+++ b/public/r/hero-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating value={socialProof.rating} />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/hero-3.json b/public/r/hero-3.json
index c2dc41368..03cde7001 100644
--- a/public/r/hero-3.json
+++ b/public/r/hero-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/hero-4.json b/public/r/hero-4.json
index 76565d570..ccdf499cf 100644
--- a/public/r/hero-4.json
+++ b/public/r/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/hero-5.json b/public/r/hero-5.json
index ae42c57cb..a11173eff 100644
--- a/public/r/hero-5.json
+++ b/public/r/hero-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/hero-6.json b/public/r/hero-6.json
index 8ac3412a2..f458c5879 100644
--- a/public/r/hero-6.json
+++ b/public/r/hero-6.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/hero-7.json b/public/r/hero-7.json
index fec1634cc..e417ccade 100644
--- a/public/r/hero-7.json
+++ b/public/r/hero-7.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/hero-8.json b/public/r/hero-8.json
index 3e484825c..a3db6ba64 100644
--- a/public/r/hero-8.json
+++ b/public/r/hero-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-8.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/hero-9.json b/public/r/hero-9.json
index 8bbbab3b8..22397aa77 100644
--- a/public/r/hero-9.json
+++ b/public/r/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/links-2.json b/public/r/links-2.json
index 3d1b59a93..9e1d20ae8 100644
--- a/public/r/links-2.json
+++ b/public/r/links-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/links-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n    preview?: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/logos-1.json b/public/r/logos-1.json
index 19dcad093..de017ff6a 100644
--- a/public/r/logos-1.json
+++ b/public/r/logos-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/logos-2.json b/public/r/logos-2.json
index 49feb4f1a..3d3960693 100644
--- a/public/r/logos-2.json
+++ b/public/r/logos-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/pricing-1.json b/public/r/pricing-1.json
index ec4c2a50e..69ddbb891 100644
--- a/public/r/pricing-1.json
+++ b/public/r/pricing-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>Popular</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={\n                plan.button.variant ?? (plan.featured ? \"default\" : \"outline\")\n              }\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/pricing-2.json b/public/r/pricing-2.json
index d474a8d12..6f6a446c3 100644
--- a/public/r/pricing-2.json
+++ b/public/r/pricing-2.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={\n                plan.button.variant ?? (index === 0 ? \"outline\" : \"default\")\n              }\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={index === 0 ? \"outline\" : \"default\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/pricing-3.json b/public/r/pricing-3.json
index f924ce05f..cf14ce08c 100644
--- a/public/r/pricing-3.json
+++ b/public/r/pricing-3.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button\n          as=\"a\"\n          href={offer.button.href}\n          variant={offer.button.variant ?? \"default\"}\n          class=\"w-full\"\n        >\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/product-1.json b/public/r/product-1.json
index 69e448d08..74777c9da 100644
--- a/public/r/product-1.json
+++ b/public/r/product-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/product-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/products-4.json b/public/r/products-4.json
index b5deb3d87..5c64e3d1f 100644
--- a/public/r/products-4.json
+++ b/public/r/products-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/products-5.json b/public/r/products-5.json
index d0bae90d8..c9420d383 100644
--- a/public/r/products-5.json
+++ b/public/r/products-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/registry.json b/public/r/registry.json
index ea0465cff..e5fcf8263 100644
--- a/public/r/registry.json
+++ b/public/r/registry.json
@@ -2535,7 +2535,6 @@
       "docs": "https://ui.full.dev/blocks/article/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2556,7 +2555,6 @@
       "docs": "https://ui.full.dev/blocks/article/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2577,7 +2575,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2619,7 +2616,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2640,7 +2636,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -3257,7 +3252,6 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
@@ -3324,7 +3318,6 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
@@ -3431,6 +3424,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3455,6 +3451,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3479,6 +3478,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3504,6 +3506,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3528,6 +3533,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -4376,7 +4384,6 @@
       ],
       "registryDependencies": [
         "@fulldev/badge",
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
diff --git a/public/r/reviews-1.json b/public/r/reviews-1.json
index ac00928ae..1a508f17b 100644
--- a/public/r/reviews-1.json
+++ b/public/r/reviews-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/reviews-2.json b/public/r/reviews-2.json
index 353359080..d5ae29850 100644
--- a/public/r/reviews-2.json
+++ b/public/r/reviews-2.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/reviews-3.json b/public/r/reviews-3.json
index 7642fe047..e58b82609 100644
--- a/public/r/reviews-3.json
+++ b/public/r/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  previousLabel: string\n  nextLabel: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  previousLabel,\n  nextLabel,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{previousLabel}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{nextLabel}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/reviews-4.json b/public/r/reviews-4.json
index c7bab1225..03ac5fc3e 100644
--- a/public/r/reviews-4.json
+++ b/public/r/reviews-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/reviews-5.json b/public/r/reviews-5.json
index 0369cd763..8b3458106 100644
--- a/public/r/reviews-5.json
+++ b/public/r/reviews-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/services-1.json b/public/r/services-1.json
index 3fef88847..4d5ac713e 100644
--- a/public/r/services-1.json
+++ b/public/r/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href != null && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/services-2.json b/public/r/services-2.json
index 22252912d..f2b3db6bc 100644
--- a/public/r/services-2.json
+++ b/public/r/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/services-3.json b/public/r/services-3.json
index 6f77bedb6..f259c104f 100644
--- a/public/r/services-3.json
+++ b/public/r/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/services-4.json b/public/r/services-4.json
index 112b8fe30..d357efabf 100644
--- a/public/r/services-4.json
+++ b/public/r/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/services-5.json b/public/r/services-5.json
index 02476c58a..def369794 100644
--- a/public/r/services-5.json
+++ b/public/r/services-5.json
@@ -8,14 +8,13 @@
   ],
   "registryDependencies": [
     "@fulldev/badge",
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/services-6.json b/public/r/services-6.json
index 76d0bd582..70206a046 100644
--- a/public/r/services-6.json
+++ b/public/r/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/services-7.json b/public/r/services-7.json
index 091def64d..623952170 100644
--- a/public/r/services-7.json
+++ b/public/r/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 1024px) 66vw, 100vw\"\n                  : \"(min-width: 1024px) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/sidebar-1.json b/public/r/sidebar-1.json
index 66f778967..3476f325b 100644
--- a/public/r/sidebar-1.json
+++ b/public/r/sidebar-1.json
@@ -22,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? \"Stars\"\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebar: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar\n    class={cn(\"\", className)}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebar} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={labels.github}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/sidebar.json b/public/r/sidebar.json
index 07ce66f00..40c1605c9 100644
--- a/public/r/sidebar.json
+++ b/public/r/sidebar.json
@@ -24,7 +24,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>Sidebar</SheetTitle>\n          <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/article-1.json b/public/r/styles/base-luma/article-1.json
index 6bdf16d1f..c45df6988 100644
--- a/public/r/styles/base-luma/article-1.json
+++ b/public/r/styles/base-luma/article-1.json
@@ -5,13 +5,12 @@
   "description": "Editorial article layouts for long-form stories, interviews, and analysis.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/article-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      {badge && (\n        <Badge variant=\"secondary\" class=\"w-fit\">\n          {badge}\n        </Badge>\n      )}\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/article-2.json b/public/r/styles/base-luma/article-2.json
index 01da358a6..6511245f3 100644
--- a/public/r/styles/base-luma/article-2.json
+++ b/public/r/styles/base-luma/article-2.json
@@ -5,13 +5,12 @@
   "description": "Editorial article layouts for long-form stories, interviews, and analysis.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/article-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/articles-1.json b/public/r/styles/base-luma/articles-1.json
index e742cb898..30aa52bd2 100644
--- a/public/r/styles/base-luma/articles-1.json
+++ b/public/r/styles/base-luma/articles-1.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      {badge && (\n        <Badge variant=\"secondary\" class=\"w-fit\">\n          {badge}\n        </Badge>\n      )}\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720, 960]}\n            sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/articles-2.json b/public/r/styles/base-luma/articles-2.json
index 266269748..a9d78a9f5 100644
--- a/public/r/styles/base-luma/articles-2.json
+++ b/public/r/styles/base-luma/articles-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class={cn(\n          \"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\",\n          badge && \"mt-4\"\n        )}\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <a\n      href={featured.href ?? \"#\"}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </a>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720]}\n            sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/articles-3.json b/public/r/styles/base-luma/articles-3.json
index aecb82d0d..e4182724a 100644
--- a/public/r/styles/base-luma/articles-3.json
+++ b/public/r/styles/base-luma/articles-3.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        {badge && (\n          <Badge variant=\"secondary\" class=\"w-fit\">\n            {badge}\n          </Badge>\n        )}\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720]}\n            sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/articles-4.json b/public/r/styles/base-luma/articles-4.json
index 222f11bc5..b0c908073 100644
--- a/public/r/styles/base-luma/articles-4.json
+++ b/public/r/styles/base-luma/articles-4.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class={cn(\n          \"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\",\n          badge && \"mt-4\"\n        )}\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/banner-1.json b/public/r/styles/base-luma/banner-1.json
index f83aa2ac3..3d0e3d2b1 100644
--- a/public/r/styles/base-luma/banner-1.json
+++ b/public/r/styles/base-luma/banner-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  link?: {\n    label: string\n    href: string\n  }\n}\n\nconst { class: className, title, description, link, ...props } = Astro.props\n---\n\n<Banner\n  storageKey=\"banner-1\"\n  class={cn(\"dark bg-background text-foreground\", className)}\n  {...props}\n>\n  <BannerContainer class=\"flex-row items-center gap-x-4 gap-y-1\">\n    <p class=\"text-sm leading-relaxed\">\n      <span class=\"font-semibold\">{title}</span>{\" \"}\n      <span class=\"mx-1.5 hidden opacity-50 sm:inline\">&mdash;</span>{\" \"}\n      <span class=\"opacity-80\">{description}</span>\n    </p>\n    {link && (\n      <a\n        href={link.href}\n        class=\"group/link inline-flex shrink-0 items-center gap-1 text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80\"\n      >\n        {link.label}\n        <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/link:translate-x-0.5\" />\n      </a>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  link: {\n    label: string\n    href: string\n  }\n  closeLabel: string\n  storageKey?: string\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  link,\n  closeLabel,\n  storageKey,\n  ...props\n} = Astro.props\n---\n\n<Banner\n  storageKey={storageKey}\n  class={cn(\"dark bg-background text-foreground\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-row items-center gap-x-4 gap-y-1\"\n    closeLabel={closeLabel}\n  >\n    <p class=\"text-sm leading-relaxed\">\n      <span class=\"font-semibold\">{title}</span>{\" \"}\n      <span class=\"mx-1.5 hidden opacity-50 sm:inline\">&middot;</span>{\" \"}\n      <span class=\"opacity-80\">{description}</span>\n    </p>\n    <a\n      href={link.href}\n      class=\"group/link inline-flex shrink-0 items-center gap-1 text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80\"\n    >\n      {link.label}\n      <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/link:translate-x-0.5\" />\n    </a>\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/banner-2.json b/public/r/styles/base-luma/banner-2.json
index 6ea880320..eb1d06077 100644
--- a/public/r/styles/base-luma/banner-2.json
+++ b/public/r/styles/base-luma/banner-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner variant=\"floating\" class={cn(\"@container\", className)} {...props}>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"sm\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/banner.json b/public/r/styles/base-luma/banner.json
index 9736e5864..b22c14584 100644
--- a/public/r/styles/base-luma/banner.json
+++ b/public/r/styles/base-luma/banner.json
@@ -14,7 +14,7 @@
     },
     {
       "path": "src/components/ui/banner/banner-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst {\n  class: className,\n  showClose = true,\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-full text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n  closeLabel?: string\n}\n\nconst {\n  class: className,\n  showClose = true,\n  closeLabel = \"Close\",\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-full text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label={closeLabel}\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">{closeLabel}</span>\n    </button>\n  )}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/blocks-1.json b/public/r/styles/base-luma/blocks-1.json
index 5f875b246..a0da615ca 100644
--- a/public/r/styles/base-luma/blocks-1.json
+++ b/public/r/styles/base-luma/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/breadcrumb.json b/public/r/styles/base-luma/breadcrumb.json
index e97c174a8..ada28b337 100644
--- a/public/r/styles/base-luma/breadcrumb.json
+++ b/public/r/styles/base-luma/breadcrumb.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/breadcrumb/breadcrumb.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"nav\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<nav\n  aria-label=\"breadcrumb\"\n  data-slot=\"breadcrumb\"\n  class={cn(className)}\n  {...props}\n>\n  <slot />\n</nav>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"nav\">\n\nconst {\n  class: className,\n  \"aria-label\": ariaLabel = \"breadcrumb\",\n  ...props\n} = Astro.props\n---\n\n<nav\n  aria-label={ariaLabel}\n  data-slot=\"breadcrumb\"\n  class={cn(className)}\n  {...props}\n>\n  <slot />\n</nav>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/contact-3.json b/public/r/styles/base-luma/contact-3.json
index 5a344d9fc..15a42d48f 100644
--- a/public/r/styles/base-luma/contact-3.json
+++ b/public/r/styles/base-luma/contact-3.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/contact-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"Contact image\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/content-1.json b/public/r/styles/base-luma/content-1.json
index 9bd4e3cc6..37cc98379 100644
--- a/public/r/styles/base-luma/content-1.json
+++ b/public/r/styles/base-luma/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features && features.length > 0 && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-3 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/content-2.json b/public/r/styles/base-luma/content-2.json
index 14af2df66..693b5d9bb 100644
--- a/public/r/styles/base-luma/content-2.json
+++ b/public/r/styles/base-luma/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/content-3.json b/public/r/styles/base-luma/content-3.json
index 6ae269ebc..fdc0b7afd 100644
--- a/public/r/styles/base-luma/content-3.json
+++ b/public/r/styles/base-luma/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/content-4.json b/public/r/styles/base-luma/content-4.json
index 09aa3dfbf..4dd1cd6f3 100644
--- a/public/r/styles/base-luma/content-4.json
+++ b/public/r/styles/base-luma/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features && features.length > 0 && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons && buttons.length > 0 && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/cta-1.json b/public/r/styles/base-luma/cta-1.json
index d4b30fd2d..880fa60eb 100644
--- a/public/r/styles/base-luma/cta-1.json
+++ b/public/r/styles/base-luma/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/cta-2.json b/public/r/styles/base-luma/cta-2.json
index 458de6318..05cfb2687 100644
--- a/public/r/styles/base-luma/cta-2.json
+++ b/public/r/styles/base-luma/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/cta-3.json b/public/r/styles/base-luma/cta-3.json
index dba896177..caf08c91a 100644
--- a/public/r/styles/base-luma/cta-3.json
+++ b/public/r/styles/base-luma/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/cta-4.json b/public/r/styles/base-luma/cta-4.json
index 244bfa2cd..2ed196c48 100644
--- a/public/r/styles/base-luma/cta-4.json
+++ b/public/r/styles/base-luma/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/cta-5.json b/public/r/styles/base-luma/cta-5.json
index 9c655d7ac..39ff0c7bb 100644
--- a/public/r/styles/base-luma/cta-5.json
+++ b/public/r/styles/base-luma/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/cta-6.json b/public/r/styles/base-luma/cta-6.json
index 8b4d735ee..cbd7368fe 100644
--- a/public/r/styles/base-luma/cta-6.json
+++ b/public/r/styles/base-luma/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/cta-7.json b/public/r/styles/base-luma/cta-7.json
index 961d6855d..86813e6c0 100644
--- a/public/r/styles/base-luma/cta-7.json
+++ b/public/r/styles/base-luma/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-muted-foreground text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/cta-8.json b/public/r/styles/base-luma/cta-8.json
index 4b2d77e41..eaac34d78 100644
--- a/public/r/styles/base-luma/cta-8.json
+++ b/public/r/styles/base-luma/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/doc-1.json b/public/r/styles/base-luma/doc-1.json
index 4806861e6..9c98b34f9 100644
--- a/public/r/styles/base-luma/doc-1.json
+++ b/public/r/styles/base-luma/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\" data-doc-content>\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document.querySelectorAll(\"[data-doc-content] > pre\").forEach((pre) => {\n      if (pre.closest(\".docs-code-block\")) return\n      const wrapper = document.createElement(\"div\")\n      const button = document.createElement(\"button\")\n      wrapper.className = \"docs-code-block\"\n      wrapper.dataset.notTypeset = \"\"\n      button.type = \"button\"\n      button.className = \"docs-code-copy\"\n      button.ariaLabel = \"Copy code\"\n      button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n      pre.before(wrapper)\n      wrapper.append(pre, button)\n    })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/faqs-1.json b/public/r/styles/base-luma/faqs-1.json
index e33726343..92d59430a 100644
--- a/public/r/styles/base-luma/faqs-1.json
+++ b/public/r/styles/base-luma/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/faqs-2.json b/public/r/styles/base-luma/faqs-2.json
index 5d669bafe..7662c1100 100644
--- a/public/r/styles/base-luma/faqs-2.json
+++ b/public/r/styles/base-luma/faqs-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-8 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/faqs-3.json b/public/r/styles/base-luma/faqs-3.json
index 794ef5a59..a0d634566 100644
--- a/public/r/styles/base-luma/faqs-3.json
+++ b/public/r/styles/base-luma/faqs-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/features-1.json b/public/r/styles/base-luma/features-1.json
index e4cd92254..585c6b7f2 100644
--- a/public/r/styles/base-luma/features-1.json
+++ b/public/r/styles/base-luma/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/features-2.json b/public/r/styles/base-luma/features-2.json
index 51c9a088e..467338413 100644
--- a/public/r/styles/base-luma/features-2.json
+++ b/public/r/styles/base-luma/features-2.json
@@ -7,14 +7,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/features-4.json b/public/r/styles/base-luma/features-4.json
index 6210bc332..6cadcba43 100644
--- a/public/r/styles/base-luma/features-4.json
+++ b/public/r/styles/base-luma/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/features-5.json b/public/r/styles/base-luma/features-5.json
index 8575743db..61eba406f 100644
--- a/public/r/styles/base-luma/features-5.json
+++ b/public/r/styles/base-luma/features-5.json
@@ -7,14 +7,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/features-6.json b/public/r/styles/base-luma/features-6.json
index 5e729533e..d21ff5c93 100644
--- a/public/r/styles/base-luma/features-6.json
+++ b/public/r/styles/base-luma/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/footer-1.json b/public/r/styles/base-luma/footer-1.json
index 3d06945e5..7ac3e8331 100644
--- a/public/r/styles/base-luma/footer-1.json
+++ b/public/r/styles/base-luma/footer-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials && socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/footer-2.json b/public/r/styles/base-luma/footer-2.json
index 2820c1f64..217f595bb 100644
--- a/public/r/styles/base-luma/footer-2.json
+++ b/public/r/styles/base-luma/footer-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links?: {\n    label: string\n    href: string\n  }[]\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel?: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel = \"Footer navigation\",\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      {links && links.length > 0 && (\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n        >\n          {links.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      )}\n      {socials && socials.length > 0 && (\n        <div class=\"flex items-center justify-center gap-3\">\n          {socials.map((social) => (\n            <a\n              href={social.href}\n              class=\"text-muted-foreground hover:text-foreground transition-colors\"\n              aria-label={social.label}\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              <Icon name={social.icon} href={social.href} class=\"size-4\" />\n            </a>\n          ))}\n        </div>\n      )}\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      <div class=\"flex items-center justify-center gap-3\">\n        {socials.map((social) => (\n          <a\n            href={social.href}\n            class=\"text-muted-foreground hover:text-foreground transition-colors\"\n            aria-label={social.label}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n          >\n            <Icon name={social.icon} href={social.href} class=\"size-4\" />\n          </a>\n        ))}\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/footer-3.json b/public/r/styles/base-luma/footer-3.json
index 6c9882990..b5bc278e9 100644
--- a/public/r/styles/base-luma/footer-3.json
+++ b/public/r/styles/base-luma/footer-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks?: {\n    label: string\n    href: string\n  }[]\n  navigationLabel?: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel = \"Footer navigation\",\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials && socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        {bottomLinks && bottomLinks.length > 0 && (\n          <nav\n            aria-label={navigationLabel}\n            class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n          >\n            {bottomLinks.map((link) => (\n              <a\n                href={link.href}\n                class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                {link.label}\n              </a>\n            ))}\n          </nav>\n        )}\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/header-1.json b/public/r/styles/base-luma/header-1.json
index 8baebe0f5..df82b249a 100644
--- a/public/r/styles/base-luma/header-1.json
+++ b/public/r/styles/base-luma/header-1.json
@@ -3,6 +3,9 @@
   "name": "header-1",
   "title": "Header 1",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/header-2.json b/public/r/styles/base-luma/header-2.json
index a1039f8b2..8b36cd0c2 100644
--- a/public/r/styles/base-luma/header-2.json
+++ b/public/r/styles/base-luma/header-2.json
@@ -3,6 +3,9 @@
   "name": "header-2",
   "title": "Header 2",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/header-3.json b/public/r/styles/base-luma/header-3.json
index e511a92e7..45ef24dbf 100644
--- a/public/r/styles/base-luma/header-3.json
+++ b/public/r/styles/base-luma/header-3.json
@@ -3,6 +3,9 @@
   "name": "header-3",
   "title": "Header 3",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -15,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/header-4.json b/public/r/styles/base-luma/header-4.json
index 3bd445ad1..4e6f46ac7 100644
--- a/public/r/styles/base-luma/header-4.json
+++ b/public/r/styles/base-luma/header-4.json
@@ -3,6 +3,9 @@
   "name": "header-4",
   "title": "Header 4",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/header-5.json b/public/r/styles/base-luma/header-5.json
index 5f781e13c..c6a7b4990 100644
--- a/public/r/styles/base-luma/header-5.json
+++ b/public/r/styles/base-luma/header-5.json
@@ -3,6 +3,9 @@
   "name": "header-5",
   "title": "Header 5",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -15,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/hero-1.json b/public/r/styles/base-luma/hero-1.json
index fd7eef979..74dc8b92d 100644
--- a/public/r/styles/base-luma/hero-1.json
+++ b/public/r/styles/base-luma/hero-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge?: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    {badge && (\n      <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n        {badge.label}\n      </Badge>\n    )}\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n      {badge.label}\n    </Badge>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/hero-10.json b/public/r/styles/base-luma/hero-10.json
index 1d044e3e4..96ed3c089 100644
--- a/public/r/styles/base-luma/hero-10.json
+++ b/public/r/styles/base-luma/hero-10.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-10.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/hero-11.json b/public/r/styles/base-luma/hero-11.json
index dcb5f5ffc..86a7f5e03 100644
--- a/public/r/styles/base-luma/hero-11.json
+++ b/public/r/styles/base-luma/hero-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-11.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating value={socialProof.rating} />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/hero-12.json b/public/r/styles/base-luma/hero-12.json
index fb5fd9794..a88805751 100644
--- a/public/r/styles/base-luma/hero-12.json
+++ b/public/r/styles/base-luma/hero-12.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-12.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/hero-13.json b/public/r/styles/base-luma/hero-13.json
index c30e39ca1..f25d55373 100644
--- a/public/r/styles/base-luma/hero-13.json
+++ b/public/r/styles/base-luma/hero-13.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-13.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/hero-2.json b/public/r/styles/base-luma/hero-2.json
index c4b5093a0..672b023de 100644
--- a/public/r/styles/base-luma/hero-2.json
+++ b/public/r/styles/base-luma/hero-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating value={socialProof.rating} />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/hero-3.json b/public/r/styles/base-luma/hero-3.json
index c2dc41368..03cde7001 100644
--- a/public/r/styles/base-luma/hero-3.json
+++ b/public/r/styles/base-luma/hero-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/hero-4.json b/public/r/styles/base-luma/hero-4.json
index 76565d570..ccdf499cf 100644
--- a/public/r/styles/base-luma/hero-4.json
+++ b/public/r/styles/base-luma/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/hero-5.json b/public/r/styles/base-luma/hero-5.json
index ae42c57cb..a11173eff 100644
--- a/public/r/styles/base-luma/hero-5.json
+++ b/public/r/styles/base-luma/hero-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/hero-6.json b/public/r/styles/base-luma/hero-6.json
index 8ac3412a2..f458c5879 100644
--- a/public/r/styles/base-luma/hero-6.json
+++ b/public/r/styles/base-luma/hero-6.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/hero-7.json b/public/r/styles/base-luma/hero-7.json
index fec1634cc..e417ccade 100644
--- a/public/r/styles/base-luma/hero-7.json
+++ b/public/r/styles/base-luma/hero-7.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/hero-8.json b/public/r/styles/base-luma/hero-8.json
index 3e484825c..a3db6ba64 100644
--- a/public/r/styles/base-luma/hero-8.json
+++ b/public/r/styles/base-luma/hero-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-8.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/hero-9.json b/public/r/styles/base-luma/hero-9.json
index 8bbbab3b8..22397aa77 100644
--- a/public/r/styles/base-luma/hero-9.json
+++ b/public/r/styles/base-luma/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/links-2.json b/public/r/styles/base-luma/links-2.json
index 3d1b59a93..9e1d20ae8 100644
--- a/public/r/styles/base-luma/links-2.json
+++ b/public/r/styles/base-luma/links-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/links-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n    preview?: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/logos-1.json b/public/r/styles/base-luma/logos-1.json
index 19dcad093..de017ff6a 100644
--- a/public/r/styles/base-luma/logos-1.json
+++ b/public/r/styles/base-luma/logos-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/logos-2.json b/public/r/styles/base-luma/logos-2.json
index 49feb4f1a..3d3960693 100644
--- a/public/r/styles/base-luma/logos-2.json
+++ b/public/r/styles/base-luma/logos-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/pricing-1.json b/public/r/styles/base-luma/pricing-1.json
index ec4c2a50e..69ddbb891 100644
--- a/public/r/styles/base-luma/pricing-1.json
+++ b/public/r/styles/base-luma/pricing-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>Popular</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={\n                plan.button.variant ?? (plan.featured ? \"default\" : \"outline\")\n              }\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/pricing-2.json b/public/r/styles/base-luma/pricing-2.json
index d474a8d12..6f6a446c3 100644
--- a/public/r/styles/base-luma/pricing-2.json
+++ b/public/r/styles/base-luma/pricing-2.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={\n                plan.button.variant ?? (index === 0 ? \"outline\" : \"default\")\n              }\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={index === 0 ? \"outline\" : \"default\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/pricing-3.json b/public/r/styles/base-luma/pricing-3.json
index f924ce05f..cf14ce08c 100644
--- a/public/r/styles/base-luma/pricing-3.json
+++ b/public/r/styles/base-luma/pricing-3.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button\n          as=\"a\"\n          href={offer.button.href}\n          variant={offer.button.variant ?? \"default\"}\n          class=\"w-full\"\n        >\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/product-1.json b/public/r/styles/base-luma/product-1.json
index 69e448d08..74777c9da 100644
--- a/public/r/styles/base-luma/product-1.json
+++ b/public/r/styles/base-luma/product-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/product-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/products-4.json b/public/r/styles/base-luma/products-4.json
index b5deb3d87..5c64e3d1f 100644
--- a/public/r/styles/base-luma/products-4.json
+++ b/public/r/styles/base-luma/products-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/products-5.json b/public/r/styles/base-luma/products-5.json
index d0bae90d8..c9420d383 100644
--- a/public/r/styles/base-luma/products-5.json
+++ b/public/r/styles/base-luma/products-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/registry.json b/public/r/styles/base-luma/registry.json
index 8c9ec1bd8..545d9123b 100644
--- a/public/r/styles/base-luma/registry.json
+++ b/public/r/styles/base-luma/registry.json
@@ -2535,7 +2535,6 @@
       "docs": "https://ui.full.dev/blocks/article/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2556,7 +2555,6 @@
       "docs": "https://ui.full.dev/blocks/article/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2577,7 +2575,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2619,7 +2616,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2640,7 +2636,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -3257,7 +3252,6 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
@@ -3324,7 +3318,6 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
@@ -3431,6 +3424,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3455,6 +3451,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3479,6 +3478,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3504,6 +3506,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3528,6 +3533,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -4376,7 +4384,6 @@
       ],
       "registryDependencies": [
         "@fulldev/badge",
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
diff --git a/public/r/styles/base-luma/reviews-1.json b/public/r/styles/base-luma/reviews-1.json
index ac00928ae..1a508f17b 100644
--- a/public/r/styles/base-luma/reviews-1.json
+++ b/public/r/styles/base-luma/reviews-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/reviews-2.json b/public/r/styles/base-luma/reviews-2.json
index 353359080..d5ae29850 100644
--- a/public/r/styles/base-luma/reviews-2.json
+++ b/public/r/styles/base-luma/reviews-2.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/reviews-3.json b/public/r/styles/base-luma/reviews-3.json
index 7642fe047..e58b82609 100644
--- a/public/r/styles/base-luma/reviews-3.json
+++ b/public/r/styles/base-luma/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  previousLabel: string\n  nextLabel: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  previousLabel,\n  nextLabel,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{previousLabel}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{nextLabel}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/reviews-4.json b/public/r/styles/base-luma/reviews-4.json
index c7bab1225..03ac5fc3e 100644
--- a/public/r/styles/base-luma/reviews-4.json
+++ b/public/r/styles/base-luma/reviews-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/reviews-5.json b/public/r/styles/base-luma/reviews-5.json
index 0369cd763..8b3458106 100644
--- a/public/r/styles/base-luma/reviews-5.json
+++ b/public/r/styles/base-luma/reviews-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/services-1.json b/public/r/styles/base-luma/services-1.json
index 3fef88847..4d5ac713e 100644
--- a/public/r/styles/base-luma/services-1.json
+++ b/public/r/styles/base-luma/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href != null && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/services-2.json b/public/r/styles/base-luma/services-2.json
index 22252912d..f2b3db6bc 100644
--- a/public/r/styles/base-luma/services-2.json
+++ b/public/r/styles/base-luma/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/services-3.json b/public/r/styles/base-luma/services-3.json
index 6f77bedb6..f259c104f 100644
--- a/public/r/styles/base-luma/services-3.json
+++ b/public/r/styles/base-luma/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/services-4.json b/public/r/styles/base-luma/services-4.json
index 112b8fe30..d357efabf 100644
--- a/public/r/styles/base-luma/services-4.json
+++ b/public/r/styles/base-luma/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/services-5.json b/public/r/styles/base-luma/services-5.json
index 02476c58a..def369794 100644
--- a/public/r/styles/base-luma/services-5.json
+++ b/public/r/styles/base-luma/services-5.json
@@ -8,14 +8,13 @@
   ],
   "registryDependencies": [
     "@fulldev/badge",
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/services-6.json b/public/r/styles/base-luma/services-6.json
index 76d0bd582..70206a046 100644
--- a/public/r/styles/base-luma/services-6.json
+++ b/public/r/styles/base-luma/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/services-7.json b/public/r/styles/base-luma/services-7.json
index 091def64d..623952170 100644
--- a/public/r/styles/base-luma/services-7.json
+++ b/public/r/styles/base-luma/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 1024px) 66vw, 100vw\"\n                  : \"(min-width: 1024px) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/sidebar-1.json b/public/r/styles/base-luma/sidebar-1.json
index 66f778967..3476f325b 100644
--- a/public/r/styles/base-luma/sidebar-1.json
+++ b/public/r/styles/base-luma/sidebar-1.json
@@ -22,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? \"Stars\"\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebar: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar\n    class={cn(\"\", className)}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebar} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={labels.github}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/sidebar.json b/public/r/styles/base-luma/sidebar.json
index e9a44d953..c5a69d7d5 100644
--- a/public/r/styles/base-luma/sidebar.json
+++ b/public/r/styles/base-luma/sidebar.json
@@ -24,7 +24,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>Sidebar</SheetTitle>\n          <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-2xl group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-2xl group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/article-1.json b/public/r/styles/base-lyra/article-1.json
index 6bdf16d1f..c45df6988 100644
--- a/public/r/styles/base-lyra/article-1.json
+++ b/public/r/styles/base-lyra/article-1.json
@@ -5,13 +5,12 @@
   "description": "Editorial article layouts for long-form stories, interviews, and analysis.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/article-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      {badge && (\n        <Badge variant=\"secondary\" class=\"w-fit\">\n          {badge}\n        </Badge>\n      )}\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/article-2.json b/public/r/styles/base-lyra/article-2.json
index 01da358a6..6511245f3 100644
--- a/public/r/styles/base-lyra/article-2.json
+++ b/public/r/styles/base-lyra/article-2.json
@@ -5,13 +5,12 @@
   "description": "Editorial article layouts for long-form stories, interviews, and analysis.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/article-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/articles-1.json b/public/r/styles/base-lyra/articles-1.json
index e742cb898..30aa52bd2 100644
--- a/public/r/styles/base-lyra/articles-1.json
+++ b/public/r/styles/base-lyra/articles-1.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      {badge && (\n        <Badge variant=\"secondary\" class=\"w-fit\">\n          {badge}\n        </Badge>\n      )}\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720, 960]}\n            sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/articles-2.json b/public/r/styles/base-lyra/articles-2.json
index 266269748..a9d78a9f5 100644
--- a/public/r/styles/base-lyra/articles-2.json
+++ b/public/r/styles/base-lyra/articles-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class={cn(\n          \"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\",\n          badge && \"mt-4\"\n        )}\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <a\n      href={featured.href ?? \"#\"}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </a>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720]}\n            sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/articles-3.json b/public/r/styles/base-lyra/articles-3.json
index aecb82d0d..e4182724a 100644
--- a/public/r/styles/base-lyra/articles-3.json
+++ b/public/r/styles/base-lyra/articles-3.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        {badge && (\n          <Badge variant=\"secondary\" class=\"w-fit\">\n            {badge}\n          </Badge>\n        )}\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720]}\n            sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/articles-4.json b/public/r/styles/base-lyra/articles-4.json
index 222f11bc5..b0c908073 100644
--- a/public/r/styles/base-lyra/articles-4.json
+++ b/public/r/styles/base-lyra/articles-4.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class={cn(\n          \"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\",\n          badge && \"mt-4\"\n        )}\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/banner-1.json b/public/r/styles/base-lyra/banner-1.json
index f83aa2ac3..3d0e3d2b1 100644
--- a/public/r/styles/base-lyra/banner-1.json
+++ b/public/r/styles/base-lyra/banner-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  link?: {\n    label: string\n    href: string\n  }\n}\n\nconst { class: className, title, description, link, ...props } = Astro.props\n---\n\n<Banner\n  storageKey=\"banner-1\"\n  class={cn(\"dark bg-background text-foreground\", className)}\n  {...props}\n>\n  <BannerContainer class=\"flex-row items-center gap-x-4 gap-y-1\">\n    <p class=\"text-sm leading-relaxed\">\n      <span class=\"font-semibold\">{title}</span>{\" \"}\n      <span class=\"mx-1.5 hidden opacity-50 sm:inline\">&mdash;</span>{\" \"}\n      <span class=\"opacity-80\">{description}</span>\n    </p>\n    {link && (\n      <a\n        href={link.href}\n        class=\"group/link inline-flex shrink-0 items-center gap-1 text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80\"\n      >\n        {link.label}\n        <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/link:translate-x-0.5\" />\n      </a>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  link: {\n    label: string\n    href: string\n  }\n  closeLabel: string\n  storageKey?: string\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  link,\n  closeLabel,\n  storageKey,\n  ...props\n} = Astro.props\n---\n\n<Banner\n  storageKey={storageKey}\n  class={cn(\"dark bg-background text-foreground\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-row items-center gap-x-4 gap-y-1\"\n    closeLabel={closeLabel}\n  >\n    <p class=\"text-sm leading-relaxed\">\n      <span class=\"font-semibold\">{title}</span>{\" \"}\n      <span class=\"mx-1.5 hidden opacity-50 sm:inline\">&middot;</span>{\" \"}\n      <span class=\"opacity-80\">{description}</span>\n    </p>\n    <a\n      href={link.href}\n      class=\"group/link inline-flex shrink-0 items-center gap-1 text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80\"\n    >\n      {link.label}\n      <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/link:translate-x-0.5\" />\n    </a>\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/banner-2.json b/public/r/styles/base-lyra/banner-2.json
index 6ea880320..eb1d06077 100644
--- a/public/r/styles/base-lyra/banner-2.json
+++ b/public/r/styles/base-lyra/banner-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner variant=\"floating\" class={cn(\"@container\", className)} {...props}>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"sm\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/banner.json b/public/r/styles/base-lyra/banner.json
index 86ea95fd6..13c5e9be8 100644
--- a/public/r/styles/base-lyra/banner.json
+++ b/public/r/styles/base-lyra/banner.json
@@ -14,7 +14,7 @@
     },
     {
       "path": "src/components/ui/banner/banner-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst {\n  class: className,\n  showClose = true,\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-none text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n  closeLabel?: string\n}\n\nconst {\n  class: className,\n  showClose = true,\n  closeLabel = \"Close\",\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-none text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label={closeLabel}\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">{closeLabel}</span>\n    </button>\n  )}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/blocks-1.json b/public/r/styles/base-lyra/blocks-1.json
index 5f875b246..a0da615ca 100644
--- a/public/r/styles/base-lyra/blocks-1.json
+++ b/public/r/styles/base-lyra/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/breadcrumb.json b/public/r/styles/base-lyra/breadcrumb.json
index 9375ad6eb..308f9334a 100644
--- a/public/r/styles/base-lyra/breadcrumb.json
+++ b/public/r/styles/base-lyra/breadcrumb.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/breadcrumb/breadcrumb.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"nav\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<nav\n  aria-label=\"breadcrumb\"\n  data-slot=\"breadcrumb\"\n  class={cn(className)}\n  {...props}\n>\n  <slot />\n</nav>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"nav\">\n\nconst {\n  class: className,\n  \"aria-label\": ariaLabel = \"breadcrumb\",\n  ...props\n} = Astro.props\n---\n\n<nav\n  aria-label={ariaLabel}\n  data-slot=\"breadcrumb\"\n  class={cn(className)}\n  {...props}\n>\n  <slot />\n</nav>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/contact-3.json b/public/r/styles/base-lyra/contact-3.json
index 5a344d9fc..15a42d48f 100644
--- a/public/r/styles/base-lyra/contact-3.json
+++ b/public/r/styles/base-lyra/contact-3.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/contact-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"Contact image\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/content-1.json b/public/r/styles/base-lyra/content-1.json
index 9bd4e3cc6..37cc98379 100644
--- a/public/r/styles/base-lyra/content-1.json
+++ b/public/r/styles/base-lyra/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features && features.length > 0 && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-3 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/content-2.json b/public/r/styles/base-lyra/content-2.json
index 14af2df66..693b5d9bb 100644
--- a/public/r/styles/base-lyra/content-2.json
+++ b/public/r/styles/base-lyra/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/content-3.json b/public/r/styles/base-lyra/content-3.json
index 6ae269ebc..fdc0b7afd 100644
--- a/public/r/styles/base-lyra/content-3.json
+++ b/public/r/styles/base-lyra/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/content-4.json b/public/r/styles/base-lyra/content-4.json
index 09aa3dfbf..4dd1cd6f3 100644
--- a/public/r/styles/base-lyra/content-4.json
+++ b/public/r/styles/base-lyra/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features && features.length > 0 && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons && buttons.length > 0 && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/cta-1.json b/public/r/styles/base-lyra/cta-1.json
index d4b30fd2d..880fa60eb 100644
--- a/public/r/styles/base-lyra/cta-1.json
+++ b/public/r/styles/base-lyra/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/cta-2.json b/public/r/styles/base-lyra/cta-2.json
index 458de6318..05cfb2687 100644
--- a/public/r/styles/base-lyra/cta-2.json
+++ b/public/r/styles/base-lyra/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/cta-3.json b/public/r/styles/base-lyra/cta-3.json
index dba896177..caf08c91a 100644
--- a/public/r/styles/base-lyra/cta-3.json
+++ b/public/r/styles/base-lyra/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/cta-4.json b/public/r/styles/base-lyra/cta-4.json
index 244bfa2cd..2ed196c48 100644
--- a/public/r/styles/base-lyra/cta-4.json
+++ b/public/r/styles/base-lyra/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/cta-5.json b/public/r/styles/base-lyra/cta-5.json
index 9c655d7ac..39ff0c7bb 100644
--- a/public/r/styles/base-lyra/cta-5.json
+++ b/public/r/styles/base-lyra/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/cta-6.json b/public/r/styles/base-lyra/cta-6.json
index 8b4d735ee..cbd7368fe 100644
--- a/public/r/styles/base-lyra/cta-6.json
+++ b/public/r/styles/base-lyra/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/cta-7.json b/public/r/styles/base-lyra/cta-7.json
index 961d6855d..86813e6c0 100644
--- a/public/r/styles/base-lyra/cta-7.json
+++ b/public/r/styles/base-lyra/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-muted-foreground text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/cta-8.json b/public/r/styles/base-lyra/cta-8.json
index 4b2d77e41..eaac34d78 100644
--- a/public/r/styles/base-lyra/cta-8.json
+++ b/public/r/styles/base-lyra/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/doc-1.json b/public/r/styles/base-lyra/doc-1.json
index 4806861e6..9c98b34f9 100644
--- a/public/r/styles/base-lyra/doc-1.json
+++ b/public/r/styles/base-lyra/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\" data-doc-content>\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document.querySelectorAll(\"[data-doc-content] > pre\").forEach((pre) => {\n      if (pre.closest(\".docs-code-block\")) return\n      const wrapper = document.createElement(\"div\")\n      const button = document.createElement(\"button\")\n      wrapper.className = \"docs-code-block\"\n      wrapper.dataset.notTypeset = \"\"\n      button.type = \"button\"\n      button.className = \"docs-code-copy\"\n      button.ariaLabel = \"Copy code\"\n      button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n      pre.before(wrapper)\n      wrapper.append(pre, button)\n    })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/faqs-1.json b/public/r/styles/base-lyra/faqs-1.json
index e33726343..92d59430a 100644
--- a/public/r/styles/base-lyra/faqs-1.json
+++ b/public/r/styles/base-lyra/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/faqs-2.json b/public/r/styles/base-lyra/faqs-2.json
index 5d669bafe..7662c1100 100644
--- a/public/r/styles/base-lyra/faqs-2.json
+++ b/public/r/styles/base-lyra/faqs-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-8 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/faqs-3.json b/public/r/styles/base-lyra/faqs-3.json
index 794ef5a59..a0d634566 100644
--- a/public/r/styles/base-lyra/faqs-3.json
+++ b/public/r/styles/base-lyra/faqs-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/features-1.json b/public/r/styles/base-lyra/features-1.json
index e4cd92254..585c6b7f2 100644
--- a/public/r/styles/base-lyra/features-1.json
+++ b/public/r/styles/base-lyra/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/features-2.json b/public/r/styles/base-lyra/features-2.json
index 51c9a088e..467338413 100644
--- a/public/r/styles/base-lyra/features-2.json
+++ b/public/r/styles/base-lyra/features-2.json
@@ -7,14 +7,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/features-4.json b/public/r/styles/base-lyra/features-4.json
index 6210bc332..6cadcba43 100644
--- a/public/r/styles/base-lyra/features-4.json
+++ b/public/r/styles/base-lyra/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/features-5.json b/public/r/styles/base-lyra/features-5.json
index 8575743db..61eba406f 100644
--- a/public/r/styles/base-lyra/features-5.json
+++ b/public/r/styles/base-lyra/features-5.json
@@ -7,14 +7,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/features-6.json b/public/r/styles/base-lyra/features-6.json
index 5e729533e..d21ff5c93 100644
--- a/public/r/styles/base-lyra/features-6.json
+++ b/public/r/styles/base-lyra/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/footer-1.json b/public/r/styles/base-lyra/footer-1.json
index 3d06945e5..7ac3e8331 100644
--- a/public/r/styles/base-lyra/footer-1.json
+++ b/public/r/styles/base-lyra/footer-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials && socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/footer-2.json b/public/r/styles/base-lyra/footer-2.json
index 2820c1f64..217f595bb 100644
--- a/public/r/styles/base-lyra/footer-2.json
+++ b/public/r/styles/base-lyra/footer-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links?: {\n    label: string\n    href: string\n  }[]\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel?: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel = \"Footer navigation\",\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      {links && links.length > 0 && (\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n        >\n          {links.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      )}\n      {socials && socials.length > 0 && (\n        <div class=\"flex items-center justify-center gap-3\">\n          {socials.map((social) => (\n            <a\n              href={social.href}\n              class=\"text-muted-foreground hover:text-foreground transition-colors\"\n              aria-label={social.label}\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              <Icon name={social.icon} href={social.href} class=\"size-4\" />\n            </a>\n          ))}\n        </div>\n      )}\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      <div class=\"flex items-center justify-center gap-3\">\n        {socials.map((social) => (\n          <a\n            href={social.href}\n            class=\"text-muted-foreground hover:text-foreground transition-colors\"\n            aria-label={social.label}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n          >\n            <Icon name={social.icon} href={social.href} class=\"size-4\" />\n          </a>\n        ))}\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/footer-3.json b/public/r/styles/base-lyra/footer-3.json
index 6c9882990..b5bc278e9 100644
--- a/public/r/styles/base-lyra/footer-3.json
+++ b/public/r/styles/base-lyra/footer-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks?: {\n    label: string\n    href: string\n  }[]\n  navigationLabel?: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel = \"Footer navigation\",\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials && socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        {bottomLinks && bottomLinks.length > 0 && (\n          <nav\n            aria-label={navigationLabel}\n            class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n          >\n            {bottomLinks.map((link) => (\n              <a\n                href={link.href}\n                class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                {link.label}\n              </a>\n            ))}\n          </nav>\n        )}\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/header-1.json b/public/r/styles/base-lyra/header-1.json
index 8baebe0f5..04e97f870 100644
--- a/public/r/styles/base-lyra/header-1.json
+++ b/public/r/styles/base-lyra/header-1.json
@@ -3,6 +3,9 @@
   "name": "header-1",
   "title": "Header 1",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/header-2.json b/public/r/styles/base-lyra/header-2.json
index a1039f8b2..bf90c1ae2 100644
--- a/public/r/styles/base-lyra/header-2.json
+++ b/public/r/styles/base-lyra/header-2.json
@@ -3,6 +3,9 @@
   "name": "header-2",
   "title": "Header 2",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/header-3.json b/public/r/styles/base-lyra/header-3.json
index e511a92e7..47c08e12a 100644
--- a/public/r/styles/base-lyra/header-3.json
+++ b/public/r/styles/base-lyra/header-3.json
@@ -3,6 +3,9 @@
   "name": "header-3",
   "title": "Header 3",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -15,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/header-4.json b/public/r/styles/base-lyra/header-4.json
index 3bd445ad1..ffb2e5781 100644
--- a/public/r/styles/base-lyra/header-4.json
+++ b/public/r/styles/base-lyra/header-4.json
@@ -3,6 +3,9 @@
   "name": "header-4",
   "title": "Header 4",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/header-5.json b/public/r/styles/base-lyra/header-5.json
index 5f781e13c..385f2d55a 100644
--- a/public/r/styles/base-lyra/header-5.json
+++ b/public/r/styles/base-lyra/header-5.json
@@ -3,6 +3,9 @@
   "name": "header-5",
   "title": "Header 5",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -15,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/hero-1.json b/public/r/styles/base-lyra/hero-1.json
index fd7eef979..74dc8b92d 100644
--- a/public/r/styles/base-lyra/hero-1.json
+++ b/public/r/styles/base-lyra/hero-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge?: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    {badge && (\n      <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n        {badge.label}\n      </Badge>\n    )}\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n      {badge.label}\n    </Badge>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/hero-10.json b/public/r/styles/base-lyra/hero-10.json
index 1d044e3e4..96ed3c089 100644
--- a/public/r/styles/base-lyra/hero-10.json
+++ b/public/r/styles/base-lyra/hero-10.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-10.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/hero-11.json b/public/r/styles/base-lyra/hero-11.json
index dcb5f5ffc..86a7f5e03 100644
--- a/public/r/styles/base-lyra/hero-11.json
+++ b/public/r/styles/base-lyra/hero-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-11.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating value={socialProof.rating} />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/hero-12.json b/public/r/styles/base-lyra/hero-12.json
index fb5fd9794..a88805751 100644
--- a/public/r/styles/base-lyra/hero-12.json
+++ b/public/r/styles/base-lyra/hero-12.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-12.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/hero-13.json b/public/r/styles/base-lyra/hero-13.json
index c30e39ca1..f25d55373 100644
--- a/public/r/styles/base-lyra/hero-13.json
+++ b/public/r/styles/base-lyra/hero-13.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-13.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/hero-2.json b/public/r/styles/base-lyra/hero-2.json
index c4b5093a0..672b023de 100644
--- a/public/r/styles/base-lyra/hero-2.json
+++ b/public/r/styles/base-lyra/hero-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating value={socialProof.rating} />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/hero-3.json b/public/r/styles/base-lyra/hero-3.json
index c2dc41368..03cde7001 100644
--- a/public/r/styles/base-lyra/hero-3.json
+++ b/public/r/styles/base-lyra/hero-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/hero-4.json b/public/r/styles/base-lyra/hero-4.json
index 76565d570..ccdf499cf 100644
--- a/public/r/styles/base-lyra/hero-4.json
+++ b/public/r/styles/base-lyra/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/hero-5.json b/public/r/styles/base-lyra/hero-5.json
index ae42c57cb..a11173eff 100644
--- a/public/r/styles/base-lyra/hero-5.json
+++ b/public/r/styles/base-lyra/hero-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/hero-6.json b/public/r/styles/base-lyra/hero-6.json
index 8ac3412a2..f458c5879 100644
--- a/public/r/styles/base-lyra/hero-6.json
+++ b/public/r/styles/base-lyra/hero-6.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/hero-7.json b/public/r/styles/base-lyra/hero-7.json
index fec1634cc..e417ccade 100644
--- a/public/r/styles/base-lyra/hero-7.json
+++ b/public/r/styles/base-lyra/hero-7.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/hero-8.json b/public/r/styles/base-lyra/hero-8.json
index 3e484825c..a3db6ba64 100644
--- a/public/r/styles/base-lyra/hero-8.json
+++ b/public/r/styles/base-lyra/hero-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-8.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/hero-9.json b/public/r/styles/base-lyra/hero-9.json
index 8bbbab3b8..22397aa77 100644
--- a/public/r/styles/base-lyra/hero-9.json
+++ b/public/r/styles/base-lyra/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/links-2.json b/public/r/styles/base-lyra/links-2.json
index 3d1b59a93..9e1d20ae8 100644
--- a/public/r/styles/base-lyra/links-2.json
+++ b/public/r/styles/base-lyra/links-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/links-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n    preview?: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/logos-1.json b/public/r/styles/base-lyra/logos-1.json
index 19dcad093..de017ff6a 100644
--- a/public/r/styles/base-lyra/logos-1.json
+++ b/public/r/styles/base-lyra/logos-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/logos-2.json b/public/r/styles/base-lyra/logos-2.json
index 49feb4f1a..3d3960693 100644
--- a/public/r/styles/base-lyra/logos-2.json
+++ b/public/r/styles/base-lyra/logos-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/pricing-1.json b/public/r/styles/base-lyra/pricing-1.json
index ec4c2a50e..69ddbb891 100644
--- a/public/r/styles/base-lyra/pricing-1.json
+++ b/public/r/styles/base-lyra/pricing-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>Popular</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={\n                plan.button.variant ?? (plan.featured ? \"default\" : \"outline\")\n              }\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/pricing-2.json b/public/r/styles/base-lyra/pricing-2.json
index d474a8d12..6f6a446c3 100644
--- a/public/r/styles/base-lyra/pricing-2.json
+++ b/public/r/styles/base-lyra/pricing-2.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={\n                plan.button.variant ?? (index === 0 ? \"outline\" : \"default\")\n              }\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={index === 0 ? \"outline\" : \"default\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/pricing-3.json b/public/r/styles/base-lyra/pricing-3.json
index f924ce05f..cf14ce08c 100644
--- a/public/r/styles/base-lyra/pricing-3.json
+++ b/public/r/styles/base-lyra/pricing-3.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button\n          as=\"a\"\n          href={offer.button.href}\n          variant={offer.button.variant ?? \"default\"}\n          class=\"w-full\"\n        >\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/product-1.json b/public/r/styles/base-lyra/product-1.json
index 69e448d08..74777c9da 100644
--- a/public/r/styles/base-lyra/product-1.json
+++ b/public/r/styles/base-lyra/product-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/product-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/products-4.json b/public/r/styles/base-lyra/products-4.json
index b5deb3d87..5c64e3d1f 100644
--- a/public/r/styles/base-lyra/products-4.json
+++ b/public/r/styles/base-lyra/products-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/products-5.json b/public/r/styles/base-lyra/products-5.json
index d0bae90d8..c9420d383 100644
--- a/public/r/styles/base-lyra/products-5.json
+++ b/public/r/styles/base-lyra/products-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/registry.json b/public/r/styles/base-lyra/registry.json
index a70677f3a..e2df0ee10 100644
--- a/public/r/styles/base-lyra/registry.json
+++ b/public/r/styles/base-lyra/registry.json
@@ -2535,7 +2535,6 @@
       "docs": "https://ui.full.dev/blocks/article/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2556,7 +2555,6 @@
       "docs": "https://ui.full.dev/blocks/article/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2577,7 +2575,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2619,7 +2616,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2640,7 +2636,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -3257,7 +3252,6 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
@@ -3324,7 +3318,6 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
@@ -3431,6 +3424,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3455,6 +3451,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3479,6 +3478,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3504,6 +3506,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3528,6 +3533,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -4376,7 +4384,6 @@
       ],
       "registryDependencies": [
         "@fulldev/badge",
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
diff --git a/public/r/styles/base-lyra/reviews-1.json b/public/r/styles/base-lyra/reviews-1.json
index ac00928ae..1a508f17b 100644
--- a/public/r/styles/base-lyra/reviews-1.json
+++ b/public/r/styles/base-lyra/reviews-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/reviews-2.json b/public/r/styles/base-lyra/reviews-2.json
index 353359080..d5ae29850 100644
--- a/public/r/styles/base-lyra/reviews-2.json
+++ b/public/r/styles/base-lyra/reviews-2.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/reviews-3.json b/public/r/styles/base-lyra/reviews-3.json
index 7642fe047..e58b82609 100644
--- a/public/r/styles/base-lyra/reviews-3.json
+++ b/public/r/styles/base-lyra/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  previousLabel: string\n  nextLabel: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  previousLabel,\n  nextLabel,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{previousLabel}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{nextLabel}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/reviews-4.json b/public/r/styles/base-lyra/reviews-4.json
index c7bab1225..03ac5fc3e 100644
--- a/public/r/styles/base-lyra/reviews-4.json
+++ b/public/r/styles/base-lyra/reviews-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/reviews-5.json b/public/r/styles/base-lyra/reviews-5.json
index 0369cd763..8b3458106 100644
--- a/public/r/styles/base-lyra/reviews-5.json
+++ b/public/r/styles/base-lyra/reviews-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/services-1.json b/public/r/styles/base-lyra/services-1.json
index 3fef88847..4d5ac713e 100644
--- a/public/r/styles/base-lyra/services-1.json
+++ b/public/r/styles/base-lyra/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href != null && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/services-2.json b/public/r/styles/base-lyra/services-2.json
index 22252912d..f2b3db6bc 100644
--- a/public/r/styles/base-lyra/services-2.json
+++ b/public/r/styles/base-lyra/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/services-3.json b/public/r/styles/base-lyra/services-3.json
index 6f77bedb6..f259c104f 100644
--- a/public/r/styles/base-lyra/services-3.json
+++ b/public/r/styles/base-lyra/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/services-4.json b/public/r/styles/base-lyra/services-4.json
index 112b8fe30..d357efabf 100644
--- a/public/r/styles/base-lyra/services-4.json
+++ b/public/r/styles/base-lyra/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/services-5.json b/public/r/styles/base-lyra/services-5.json
index 02476c58a..def369794 100644
--- a/public/r/styles/base-lyra/services-5.json
+++ b/public/r/styles/base-lyra/services-5.json
@@ -8,14 +8,13 @@
   ],
   "registryDependencies": [
     "@fulldev/badge",
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/services-6.json b/public/r/styles/base-lyra/services-6.json
index 76d0bd582..70206a046 100644
--- a/public/r/styles/base-lyra/services-6.json
+++ b/public/r/styles/base-lyra/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/services-7.json b/public/r/styles/base-lyra/services-7.json
index 091def64d..623952170 100644
--- a/public/r/styles/base-lyra/services-7.json
+++ b/public/r/styles/base-lyra/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 1024px) 66vw, 100vw\"\n                  : \"(min-width: 1024px) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/sidebar-1.json b/public/r/styles/base-lyra/sidebar-1.json
index 66f778967..3476f325b 100644
--- a/public/r/styles/base-lyra/sidebar-1.json
+++ b/public/r/styles/base-lyra/sidebar-1.json
@@ -22,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? \"Stars\"\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebar: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar\n    class={cn(\"\", className)}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebar} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={labels.github}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/sidebar.json b/public/r/styles/base-lyra/sidebar.json
index e8b5756dc..20925bd63 100644
--- a/public/r/styles/base-lyra/sidebar.json
+++ b/public/r/styles/base-lyra/sidebar.json
@@ -24,7 +24,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>Sidebar</SheetTitle>\n          <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/article-1.json b/public/r/styles/base-maia/article-1.json
index 6bdf16d1f..c45df6988 100644
--- a/public/r/styles/base-maia/article-1.json
+++ b/public/r/styles/base-maia/article-1.json
@@ -5,13 +5,12 @@
   "description": "Editorial article layouts for long-form stories, interviews, and analysis.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/article-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      {badge && (\n        <Badge variant=\"secondary\" class=\"w-fit\">\n          {badge}\n        </Badge>\n      )}\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/article-2.json b/public/r/styles/base-maia/article-2.json
index 01da358a6..6511245f3 100644
--- a/public/r/styles/base-maia/article-2.json
+++ b/public/r/styles/base-maia/article-2.json
@@ -5,13 +5,12 @@
   "description": "Editorial article layouts for long-form stories, interviews, and analysis.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/article-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/articles-1.json b/public/r/styles/base-maia/articles-1.json
index e742cb898..30aa52bd2 100644
--- a/public/r/styles/base-maia/articles-1.json
+++ b/public/r/styles/base-maia/articles-1.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      {badge && (\n        <Badge variant=\"secondary\" class=\"w-fit\">\n          {badge}\n        </Badge>\n      )}\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720, 960]}\n            sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/articles-2.json b/public/r/styles/base-maia/articles-2.json
index 266269748..a9d78a9f5 100644
--- a/public/r/styles/base-maia/articles-2.json
+++ b/public/r/styles/base-maia/articles-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class={cn(\n          \"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\",\n          badge && \"mt-4\"\n        )}\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <a\n      href={featured.href ?? \"#\"}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </a>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720]}\n            sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/articles-3.json b/public/r/styles/base-maia/articles-3.json
index aecb82d0d..e4182724a 100644
--- a/public/r/styles/base-maia/articles-3.json
+++ b/public/r/styles/base-maia/articles-3.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        {badge && (\n          <Badge variant=\"secondary\" class=\"w-fit\">\n            {badge}\n          </Badge>\n        )}\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720]}\n            sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/articles-4.json b/public/r/styles/base-maia/articles-4.json
index 222f11bc5..b0c908073 100644
--- a/public/r/styles/base-maia/articles-4.json
+++ b/public/r/styles/base-maia/articles-4.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class={cn(\n          \"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\",\n          badge && \"mt-4\"\n        )}\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/banner-1.json b/public/r/styles/base-maia/banner-1.json
index f83aa2ac3..3d0e3d2b1 100644
--- a/public/r/styles/base-maia/banner-1.json
+++ b/public/r/styles/base-maia/banner-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  link?: {\n    label: string\n    href: string\n  }\n}\n\nconst { class: className, title, description, link, ...props } = Astro.props\n---\n\n<Banner\n  storageKey=\"banner-1\"\n  class={cn(\"dark bg-background text-foreground\", className)}\n  {...props}\n>\n  <BannerContainer class=\"flex-row items-center gap-x-4 gap-y-1\">\n    <p class=\"text-sm leading-relaxed\">\n      <span class=\"font-semibold\">{title}</span>{\" \"}\n      <span class=\"mx-1.5 hidden opacity-50 sm:inline\">&mdash;</span>{\" \"}\n      <span class=\"opacity-80\">{description}</span>\n    </p>\n    {link && (\n      <a\n        href={link.href}\n        class=\"group/link inline-flex shrink-0 items-center gap-1 text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80\"\n      >\n        {link.label}\n        <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/link:translate-x-0.5\" />\n      </a>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  link: {\n    label: string\n    href: string\n  }\n  closeLabel: string\n  storageKey?: string\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  link,\n  closeLabel,\n  storageKey,\n  ...props\n} = Astro.props\n---\n\n<Banner\n  storageKey={storageKey}\n  class={cn(\"dark bg-background text-foreground\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-row items-center gap-x-4 gap-y-1\"\n    closeLabel={closeLabel}\n  >\n    <p class=\"text-sm leading-relaxed\">\n      <span class=\"font-semibold\">{title}</span>{\" \"}\n      <span class=\"mx-1.5 hidden opacity-50 sm:inline\">&middot;</span>{\" \"}\n      <span class=\"opacity-80\">{description}</span>\n    </p>\n    <a\n      href={link.href}\n      class=\"group/link inline-flex shrink-0 items-center gap-1 text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80\"\n    >\n      {link.label}\n      <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/link:translate-x-0.5\" />\n    </a>\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/banner-2.json b/public/r/styles/base-maia/banner-2.json
index 6ea880320..eb1d06077 100644
--- a/public/r/styles/base-maia/banner-2.json
+++ b/public/r/styles/base-maia/banner-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner variant=\"floating\" class={cn(\"@container\", className)} {...props}>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"sm\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/banner.json b/public/r/styles/base-maia/banner.json
index e10d8edef..22679e72a 100644
--- a/public/r/styles/base-maia/banner.json
+++ b/public/r/styles/base-maia/banner.json
@@ -14,7 +14,7 @@
     },
     {
       "path": "src/components/ui/banner/banner-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst {\n  class: className,\n  showClose = true,\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-full text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n  closeLabel?: string\n}\n\nconst {\n  class: className,\n  showClose = true,\n  closeLabel = \"Close\",\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-full text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label={closeLabel}\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">{closeLabel}</span>\n    </button>\n  )}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/blocks-1.json b/public/r/styles/base-maia/blocks-1.json
index 5f875b246..a0da615ca 100644
--- a/public/r/styles/base-maia/blocks-1.json
+++ b/public/r/styles/base-maia/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/breadcrumb.json b/public/r/styles/base-maia/breadcrumb.json
index e97c174a8..ada28b337 100644
--- a/public/r/styles/base-maia/breadcrumb.json
+++ b/public/r/styles/base-maia/breadcrumb.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/breadcrumb/breadcrumb.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"nav\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<nav\n  aria-label=\"breadcrumb\"\n  data-slot=\"breadcrumb\"\n  class={cn(className)}\n  {...props}\n>\n  <slot />\n</nav>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"nav\">\n\nconst {\n  class: className,\n  \"aria-label\": ariaLabel = \"breadcrumb\",\n  ...props\n} = Astro.props\n---\n\n<nav\n  aria-label={ariaLabel}\n  data-slot=\"breadcrumb\"\n  class={cn(className)}\n  {...props}\n>\n  <slot />\n</nav>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/contact-3.json b/public/r/styles/base-maia/contact-3.json
index 5a344d9fc..15a42d48f 100644
--- a/public/r/styles/base-maia/contact-3.json
+++ b/public/r/styles/base-maia/contact-3.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/contact-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"Contact image\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/content-1.json b/public/r/styles/base-maia/content-1.json
index 9bd4e3cc6..37cc98379 100644
--- a/public/r/styles/base-maia/content-1.json
+++ b/public/r/styles/base-maia/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features && features.length > 0 && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-3 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/content-2.json b/public/r/styles/base-maia/content-2.json
index 14af2df66..693b5d9bb 100644
--- a/public/r/styles/base-maia/content-2.json
+++ b/public/r/styles/base-maia/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/content-3.json b/public/r/styles/base-maia/content-3.json
index 6ae269ebc..fdc0b7afd 100644
--- a/public/r/styles/base-maia/content-3.json
+++ b/public/r/styles/base-maia/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/content-4.json b/public/r/styles/base-maia/content-4.json
index 09aa3dfbf..4dd1cd6f3 100644
--- a/public/r/styles/base-maia/content-4.json
+++ b/public/r/styles/base-maia/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features && features.length > 0 && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons && buttons.length > 0 && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/cta-1.json b/public/r/styles/base-maia/cta-1.json
index d4b30fd2d..880fa60eb 100644
--- a/public/r/styles/base-maia/cta-1.json
+++ b/public/r/styles/base-maia/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/cta-2.json b/public/r/styles/base-maia/cta-2.json
index 458de6318..05cfb2687 100644
--- a/public/r/styles/base-maia/cta-2.json
+++ b/public/r/styles/base-maia/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/cta-3.json b/public/r/styles/base-maia/cta-3.json
index dba896177..caf08c91a 100644
--- a/public/r/styles/base-maia/cta-3.json
+++ b/public/r/styles/base-maia/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/cta-4.json b/public/r/styles/base-maia/cta-4.json
index 244bfa2cd..2ed196c48 100644
--- a/public/r/styles/base-maia/cta-4.json
+++ b/public/r/styles/base-maia/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/cta-5.json b/public/r/styles/base-maia/cta-5.json
index 9c655d7ac..39ff0c7bb 100644
--- a/public/r/styles/base-maia/cta-5.json
+++ b/public/r/styles/base-maia/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/cta-6.json b/public/r/styles/base-maia/cta-6.json
index 8b4d735ee..cbd7368fe 100644
--- a/public/r/styles/base-maia/cta-6.json
+++ b/public/r/styles/base-maia/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/cta-7.json b/public/r/styles/base-maia/cta-7.json
index 961d6855d..86813e6c0 100644
--- a/public/r/styles/base-maia/cta-7.json
+++ b/public/r/styles/base-maia/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-muted-foreground text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/cta-8.json b/public/r/styles/base-maia/cta-8.json
index 4b2d77e41..eaac34d78 100644
--- a/public/r/styles/base-maia/cta-8.json
+++ b/public/r/styles/base-maia/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/doc-1.json b/public/r/styles/base-maia/doc-1.json
index 4806861e6..9c98b34f9 100644
--- a/public/r/styles/base-maia/doc-1.json
+++ b/public/r/styles/base-maia/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\" data-doc-content>\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document.querySelectorAll(\"[data-doc-content] > pre\").forEach((pre) => {\n      if (pre.closest(\".docs-code-block\")) return\n      const wrapper = document.createElement(\"div\")\n      const button = document.createElement(\"button\")\n      wrapper.className = \"docs-code-block\"\n      wrapper.dataset.notTypeset = \"\"\n      button.type = \"button\"\n      button.className = \"docs-code-copy\"\n      button.ariaLabel = \"Copy code\"\n      button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n      pre.before(wrapper)\n      wrapper.append(pre, button)\n    })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/faqs-1.json b/public/r/styles/base-maia/faqs-1.json
index e33726343..92d59430a 100644
--- a/public/r/styles/base-maia/faqs-1.json
+++ b/public/r/styles/base-maia/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/faqs-2.json b/public/r/styles/base-maia/faqs-2.json
index 5d669bafe..7662c1100 100644
--- a/public/r/styles/base-maia/faqs-2.json
+++ b/public/r/styles/base-maia/faqs-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-8 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/faqs-3.json b/public/r/styles/base-maia/faqs-3.json
index 794ef5a59..a0d634566 100644
--- a/public/r/styles/base-maia/faqs-3.json
+++ b/public/r/styles/base-maia/faqs-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/features-1.json b/public/r/styles/base-maia/features-1.json
index e4cd92254..585c6b7f2 100644
--- a/public/r/styles/base-maia/features-1.json
+++ b/public/r/styles/base-maia/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/features-2.json b/public/r/styles/base-maia/features-2.json
index 51c9a088e..467338413 100644
--- a/public/r/styles/base-maia/features-2.json
+++ b/public/r/styles/base-maia/features-2.json
@@ -7,14 +7,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/features-4.json b/public/r/styles/base-maia/features-4.json
index 6210bc332..6cadcba43 100644
--- a/public/r/styles/base-maia/features-4.json
+++ b/public/r/styles/base-maia/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/features-5.json b/public/r/styles/base-maia/features-5.json
index 8575743db..61eba406f 100644
--- a/public/r/styles/base-maia/features-5.json
+++ b/public/r/styles/base-maia/features-5.json
@@ -7,14 +7,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/features-6.json b/public/r/styles/base-maia/features-6.json
index 5e729533e..d21ff5c93 100644
--- a/public/r/styles/base-maia/features-6.json
+++ b/public/r/styles/base-maia/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/footer-1.json b/public/r/styles/base-maia/footer-1.json
index 3d06945e5..7ac3e8331 100644
--- a/public/r/styles/base-maia/footer-1.json
+++ b/public/r/styles/base-maia/footer-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials && socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/footer-2.json b/public/r/styles/base-maia/footer-2.json
index 2820c1f64..217f595bb 100644
--- a/public/r/styles/base-maia/footer-2.json
+++ b/public/r/styles/base-maia/footer-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links?: {\n    label: string\n    href: string\n  }[]\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel?: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel = \"Footer navigation\",\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      {links && links.length > 0 && (\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n        >\n          {links.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      )}\n      {socials && socials.length > 0 && (\n        <div class=\"flex items-center justify-center gap-3\">\n          {socials.map((social) => (\n            <a\n              href={social.href}\n              class=\"text-muted-foreground hover:text-foreground transition-colors\"\n              aria-label={social.label}\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              <Icon name={social.icon} href={social.href} class=\"size-4\" />\n            </a>\n          ))}\n        </div>\n      )}\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      <div class=\"flex items-center justify-center gap-3\">\n        {socials.map((social) => (\n          <a\n            href={social.href}\n            class=\"text-muted-foreground hover:text-foreground transition-colors\"\n            aria-label={social.label}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n          >\n            <Icon name={social.icon} href={social.href} class=\"size-4\" />\n          </a>\n        ))}\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/footer-3.json b/public/r/styles/base-maia/footer-3.json
index 6c9882990..b5bc278e9 100644
--- a/public/r/styles/base-maia/footer-3.json
+++ b/public/r/styles/base-maia/footer-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks?: {\n    label: string\n    href: string\n  }[]\n  navigationLabel?: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel = \"Footer navigation\",\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials && socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        {bottomLinks && bottomLinks.length > 0 && (\n          <nav\n            aria-label={navigationLabel}\n            class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n          >\n            {bottomLinks.map((link) => (\n              <a\n                href={link.href}\n                class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                {link.label}\n              </a>\n            ))}\n          </nav>\n        )}\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/header-1.json b/public/r/styles/base-maia/header-1.json
index 8baebe0f5..5b7896a87 100644
--- a/public/r/styles/base-maia/header-1.json
+++ b/public/r/styles/base-maia/header-1.json
@@ -3,6 +3,9 @@
   "name": "header-1",
   "title": "Header 1",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/header-2.json b/public/r/styles/base-maia/header-2.json
index a1039f8b2..6a35ca3c4 100644
--- a/public/r/styles/base-maia/header-2.json
+++ b/public/r/styles/base-maia/header-2.json
@@ -3,6 +3,9 @@
   "name": "header-2",
   "title": "Header 2",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/header-3.json b/public/r/styles/base-maia/header-3.json
index e511a92e7..70418bc87 100644
--- a/public/r/styles/base-maia/header-3.json
+++ b/public/r/styles/base-maia/header-3.json
@@ -3,6 +3,9 @@
   "name": "header-3",
   "title": "Header 3",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -15,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/header-4.json b/public/r/styles/base-maia/header-4.json
index 3bd445ad1..0a7d02adf 100644
--- a/public/r/styles/base-maia/header-4.json
+++ b/public/r/styles/base-maia/header-4.json
@@ -3,6 +3,9 @@
   "name": "header-4",
   "title": "Header 4",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/header-5.json b/public/r/styles/base-maia/header-5.json
index 5f781e13c..97bc283a6 100644
--- a/public/r/styles/base-maia/header-5.json
+++ b/public/r/styles/base-maia/header-5.json
@@ -3,6 +3,9 @@
   "name": "header-5",
   "title": "Header 5",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -15,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/hero-1.json b/public/r/styles/base-maia/hero-1.json
index fd7eef979..74dc8b92d 100644
--- a/public/r/styles/base-maia/hero-1.json
+++ b/public/r/styles/base-maia/hero-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge?: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    {badge && (\n      <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n        {badge.label}\n      </Badge>\n    )}\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n      {badge.label}\n    </Badge>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/hero-10.json b/public/r/styles/base-maia/hero-10.json
index 1d044e3e4..96ed3c089 100644
--- a/public/r/styles/base-maia/hero-10.json
+++ b/public/r/styles/base-maia/hero-10.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-10.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/hero-11.json b/public/r/styles/base-maia/hero-11.json
index dcb5f5ffc..86a7f5e03 100644
--- a/public/r/styles/base-maia/hero-11.json
+++ b/public/r/styles/base-maia/hero-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-11.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating value={socialProof.rating} />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/hero-12.json b/public/r/styles/base-maia/hero-12.json
index fb5fd9794..a88805751 100644
--- a/public/r/styles/base-maia/hero-12.json
+++ b/public/r/styles/base-maia/hero-12.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-12.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/hero-13.json b/public/r/styles/base-maia/hero-13.json
index c30e39ca1..f25d55373 100644
--- a/public/r/styles/base-maia/hero-13.json
+++ b/public/r/styles/base-maia/hero-13.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-13.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/hero-2.json b/public/r/styles/base-maia/hero-2.json
index c4b5093a0..672b023de 100644
--- a/public/r/styles/base-maia/hero-2.json
+++ b/public/r/styles/base-maia/hero-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating value={socialProof.rating} />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/hero-3.json b/public/r/styles/base-maia/hero-3.json
index c2dc41368..03cde7001 100644
--- a/public/r/styles/base-maia/hero-3.json
+++ b/public/r/styles/base-maia/hero-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/hero-4.json b/public/r/styles/base-maia/hero-4.json
index 76565d570..ccdf499cf 100644
--- a/public/r/styles/base-maia/hero-4.json
+++ b/public/r/styles/base-maia/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/hero-5.json b/public/r/styles/base-maia/hero-5.json
index ae42c57cb..a11173eff 100644
--- a/public/r/styles/base-maia/hero-5.json
+++ b/public/r/styles/base-maia/hero-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/hero-6.json b/public/r/styles/base-maia/hero-6.json
index 8ac3412a2..f458c5879 100644
--- a/public/r/styles/base-maia/hero-6.json
+++ b/public/r/styles/base-maia/hero-6.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/hero-7.json b/public/r/styles/base-maia/hero-7.json
index fec1634cc..e417ccade 100644
--- a/public/r/styles/base-maia/hero-7.json
+++ b/public/r/styles/base-maia/hero-7.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/hero-8.json b/public/r/styles/base-maia/hero-8.json
index 3e484825c..a3db6ba64 100644
--- a/public/r/styles/base-maia/hero-8.json
+++ b/public/r/styles/base-maia/hero-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-8.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/hero-9.json b/public/r/styles/base-maia/hero-9.json
index 8bbbab3b8..22397aa77 100644
--- a/public/r/styles/base-maia/hero-9.json
+++ b/public/r/styles/base-maia/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/links-2.json b/public/r/styles/base-maia/links-2.json
index 3d1b59a93..9e1d20ae8 100644
--- a/public/r/styles/base-maia/links-2.json
+++ b/public/r/styles/base-maia/links-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/links-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n    preview?: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/logos-1.json b/public/r/styles/base-maia/logos-1.json
index 19dcad093..de017ff6a 100644
--- a/public/r/styles/base-maia/logos-1.json
+++ b/public/r/styles/base-maia/logos-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/logos-2.json b/public/r/styles/base-maia/logos-2.json
index 49feb4f1a..3d3960693 100644
--- a/public/r/styles/base-maia/logos-2.json
+++ b/public/r/styles/base-maia/logos-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/pricing-1.json b/public/r/styles/base-maia/pricing-1.json
index ec4c2a50e..69ddbb891 100644
--- a/public/r/styles/base-maia/pricing-1.json
+++ b/public/r/styles/base-maia/pricing-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>Popular</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={\n                plan.button.variant ?? (plan.featured ? \"default\" : \"outline\")\n              }\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/pricing-2.json b/public/r/styles/base-maia/pricing-2.json
index d474a8d12..6f6a446c3 100644
--- a/public/r/styles/base-maia/pricing-2.json
+++ b/public/r/styles/base-maia/pricing-2.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={\n                plan.button.variant ?? (index === 0 ? \"outline\" : \"default\")\n              }\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={index === 0 ? \"outline\" : \"default\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/pricing-3.json b/public/r/styles/base-maia/pricing-3.json
index f924ce05f..cf14ce08c 100644
--- a/public/r/styles/base-maia/pricing-3.json
+++ b/public/r/styles/base-maia/pricing-3.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button\n          as=\"a\"\n          href={offer.button.href}\n          variant={offer.button.variant ?? \"default\"}\n          class=\"w-full\"\n        >\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/product-1.json b/public/r/styles/base-maia/product-1.json
index 69e448d08..74777c9da 100644
--- a/public/r/styles/base-maia/product-1.json
+++ b/public/r/styles/base-maia/product-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/product-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/products-4.json b/public/r/styles/base-maia/products-4.json
index b5deb3d87..5c64e3d1f 100644
--- a/public/r/styles/base-maia/products-4.json
+++ b/public/r/styles/base-maia/products-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/products-5.json b/public/r/styles/base-maia/products-5.json
index d0bae90d8..c9420d383 100644
--- a/public/r/styles/base-maia/products-5.json
+++ b/public/r/styles/base-maia/products-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/registry.json b/public/r/styles/base-maia/registry.json
index 404d1980d..bf209a6ad 100644
--- a/public/r/styles/base-maia/registry.json
+++ b/public/r/styles/base-maia/registry.json
@@ -2535,7 +2535,6 @@
       "docs": "https://ui.full.dev/blocks/article/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2556,7 +2555,6 @@
       "docs": "https://ui.full.dev/blocks/article/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2577,7 +2575,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2619,7 +2616,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2640,7 +2636,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -3257,7 +3252,6 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
@@ -3324,7 +3318,6 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
@@ -3431,6 +3424,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3455,6 +3451,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3479,6 +3478,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3504,6 +3506,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3528,6 +3533,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -4376,7 +4384,6 @@
       ],
       "registryDependencies": [
         "@fulldev/badge",
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
diff --git a/public/r/styles/base-maia/reviews-1.json b/public/r/styles/base-maia/reviews-1.json
index ac00928ae..1a508f17b 100644
--- a/public/r/styles/base-maia/reviews-1.json
+++ b/public/r/styles/base-maia/reviews-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/reviews-2.json b/public/r/styles/base-maia/reviews-2.json
index 353359080..d5ae29850 100644
--- a/public/r/styles/base-maia/reviews-2.json
+++ b/public/r/styles/base-maia/reviews-2.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/reviews-3.json b/public/r/styles/base-maia/reviews-3.json
index 7642fe047..e58b82609 100644
--- a/public/r/styles/base-maia/reviews-3.json
+++ b/public/r/styles/base-maia/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  previousLabel: string\n  nextLabel: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  previousLabel,\n  nextLabel,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{previousLabel}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{nextLabel}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/reviews-4.json b/public/r/styles/base-maia/reviews-4.json
index c7bab1225..03ac5fc3e 100644
--- a/public/r/styles/base-maia/reviews-4.json
+++ b/public/r/styles/base-maia/reviews-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/reviews-5.json b/public/r/styles/base-maia/reviews-5.json
index 0369cd763..8b3458106 100644
--- a/public/r/styles/base-maia/reviews-5.json
+++ b/public/r/styles/base-maia/reviews-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/services-1.json b/public/r/styles/base-maia/services-1.json
index 3fef88847..4d5ac713e 100644
--- a/public/r/styles/base-maia/services-1.json
+++ b/public/r/styles/base-maia/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href != null && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/services-2.json b/public/r/styles/base-maia/services-2.json
index 22252912d..f2b3db6bc 100644
--- a/public/r/styles/base-maia/services-2.json
+++ b/public/r/styles/base-maia/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/services-3.json b/public/r/styles/base-maia/services-3.json
index 6f77bedb6..f259c104f 100644
--- a/public/r/styles/base-maia/services-3.json
+++ b/public/r/styles/base-maia/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/services-4.json b/public/r/styles/base-maia/services-4.json
index 112b8fe30..d357efabf 100644
--- a/public/r/styles/base-maia/services-4.json
+++ b/public/r/styles/base-maia/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/services-5.json b/public/r/styles/base-maia/services-5.json
index 02476c58a..def369794 100644
--- a/public/r/styles/base-maia/services-5.json
+++ b/public/r/styles/base-maia/services-5.json
@@ -8,14 +8,13 @@
   ],
   "registryDependencies": [
     "@fulldev/badge",
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/services-6.json b/public/r/styles/base-maia/services-6.json
index 76d0bd582..70206a046 100644
--- a/public/r/styles/base-maia/services-6.json
+++ b/public/r/styles/base-maia/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/services-7.json b/public/r/styles/base-maia/services-7.json
index 091def64d..623952170 100644
--- a/public/r/styles/base-maia/services-7.json
+++ b/public/r/styles/base-maia/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 1024px) 66vw, 100vw\"\n                  : \"(min-width: 1024px) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/sidebar-1.json b/public/r/styles/base-maia/sidebar-1.json
index 66f778967..3476f325b 100644
--- a/public/r/styles/base-maia/sidebar-1.json
+++ b/public/r/styles/base-maia/sidebar-1.json
@@ -22,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? \"Stars\"\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebar: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar\n    class={cn(\"\", className)}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebar} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={labels.github}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/sidebar.json b/public/r/styles/base-maia/sidebar.json
index 1d890a1f5..6e9311e7b 100644
--- a/public/r/styles/base-maia/sidebar.json
+++ b/public/r/styles/base-maia/sidebar.json
@@ -24,7 +24,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>Sidebar</SheetTitle>\n          <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/article-1.json b/public/r/styles/base-mira/article-1.json
index 6bdf16d1f..c45df6988 100644
--- a/public/r/styles/base-mira/article-1.json
+++ b/public/r/styles/base-mira/article-1.json
@@ -5,13 +5,12 @@
   "description": "Editorial article layouts for long-form stories, interviews, and analysis.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/article-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      {badge && (\n        <Badge variant=\"secondary\" class=\"w-fit\">\n          {badge}\n        </Badge>\n      )}\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/article-2.json b/public/r/styles/base-mira/article-2.json
index 01da358a6..6511245f3 100644
--- a/public/r/styles/base-mira/article-2.json
+++ b/public/r/styles/base-mira/article-2.json
@@ -5,13 +5,12 @@
   "description": "Editorial article layouts for long-form stories, interviews, and analysis.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/article-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/articles-1.json b/public/r/styles/base-mira/articles-1.json
index e742cb898..30aa52bd2 100644
--- a/public/r/styles/base-mira/articles-1.json
+++ b/public/r/styles/base-mira/articles-1.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      {badge && (\n        <Badge variant=\"secondary\" class=\"w-fit\">\n          {badge}\n        </Badge>\n      )}\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720, 960]}\n            sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/articles-2.json b/public/r/styles/base-mira/articles-2.json
index 266269748..a9d78a9f5 100644
--- a/public/r/styles/base-mira/articles-2.json
+++ b/public/r/styles/base-mira/articles-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class={cn(\n          \"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\",\n          badge && \"mt-4\"\n        )}\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <a\n      href={featured.href ?? \"#\"}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </a>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720]}\n            sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/articles-3.json b/public/r/styles/base-mira/articles-3.json
index aecb82d0d..e4182724a 100644
--- a/public/r/styles/base-mira/articles-3.json
+++ b/public/r/styles/base-mira/articles-3.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        {badge && (\n          <Badge variant=\"secondary\" class=\"w-fit\">\n            {badge}\n          </Badge>\n        )}\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720]}\n            sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/articles-4.json b/public/r/styles/base-mira/articles-4.json
index 222f11bc5..b0c908073 100644
--- a/public/r/styles/base-mira/articles-4.json
+++ b/public/r/styles/base-mira/articles-4.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class={cn(\n          \"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\",\n          badge && \"mt-4\"\n        )}\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/banner-1.json b/public/r/styles/base-mira/banner-1.json
index f83aa2ac3..3d0e3d2b1 100644
--- a/public/r/styles/base-mira/banner-1.json
+++ b/public/r/styles/base-mira/banner-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  link?: {\n    label: string\n    href: string\n  }\n}\n\nconst { class: className, title, description, link, ...props } = Astro.props\n---\n\n<Banner\n  storageKey=\"banner-1\"\n  class={cn(\"dark bg-background text-foreground\", className)}\n  {...props}\n>\n  <BannerContainer class=\"flex-row items-center gap-x-4 gap-y-1\">\n    <p class=\"text-sm leading-relaxed\">\n      <span class=\"font-semibold\">{title}</span>{\" \"}\n      <span class=\"mx-1.5 hidden opacity-50 sm:inline\">&mdash;</span>{\" \"}\n      <span class=\"opacity-80\">{description}</span>\n    </p>\n    {link && (\n      <a\n        href={link.href}\n        class=\"group/link inline-flex shrink-0 items-center gap-1 text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80\"\n      >\n        {link.label}\n        <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/link:translate-x-0.5\" />\n      </a>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  link: {\n    label: string\n    href: string\n  }\n  closeLabel: string\n  storageKey?: string\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  link,\n  closeLabel,\n  storageKey,\n  ...props\n} = Astro.props\n---\n\n<Banner\n  storageKey={storageKey}\n  class={cn(\"dark bg-background text-foreground\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-row items-center gap-x-4 gap-y-1\"\n    closeLabel={closeLabel}\n  >\n    <p class=\"text-sm leading-relaxed\">\n      <span class=\"font-semibold\">{title}</span>{\" \"}\n      <span class=\"mx-1.5 hidden opacity-50 sm:inline\">&middot;</span>{\" \"}\n      <span class=\"opacity-80\">{description}</span>\n    </p>\n    <a\n      href={link.href}\n      class=\"group/link inline-flex shrink-0 items-center gap-1 text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80\"\n    >\n      {link.label}\n      <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/link:translate-x-0.5\" />\n    </a>\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/banner-2.json b/public/r/styles/base-mira/banner-2.json
index 6ea880320..eb1d06077 100644
--- a/public/r/styles/base-mira/banner-2.json
+++ b/public/r/styles/base-mira/banner-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner variant=\"floating\" class={cn(\"@container\", className)} {...props}>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"sm\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/banner.json b/public/r/styles/base-mira/banner.json
index a1a51b99e..4b5b39887 100644
--- a/public/r/styles/base-mira/banner.json
+++ b/public/r/styles/base-mira/banner.json
@@ -14,7 +14,7 @@
     },
     {
       "path": "src/components/ui/banner/banner-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst {\n  class: className,\n  showClose = true,\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-sm text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n  closeLabel?: string\n}\n\nconst {\n  class: className,\n  showClose = true,\n  closeLabel = \"Close\",\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-sm text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label={closeLabel}\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">{closeLabel}</span>\n    </button>\n  )}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/blocks-1.json b/public/r/styles/base-mira/blocks-1.json
index 5f875b246..a0da615ca 100644
--- a/public/r/styles/base-mira/blocks-1.json
+++ b/public/r/styles/base-mira/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/breadcrumb.json b/public/r/styles/base-mira/breadcrumb.json
index b0343ba43..a47b1892e 100644
--- a/public/r/styles/base-mira/breadcrumb.json
+++ b/public/r/styles/base-mira/breadcrumb.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/breadcrumb/breadcrumb.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"nav\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<nav\n  aria-label=\"breadcrumb\"\n  data-slot=\"breadcrumb\"\n  class={cn(className)}\n  {...props}\n>\n  <slot />\n</nav>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"nav\">\n\nconst {\n  class: className,\n  \"aria-label\": ariaLabel = \"breadcrumb\",\n  ...props\n} = Astro.props\n---\n\n<nav\n  aria-label={ariaLabel}\n  data-slot=\"breadcrumb\"\n  class={cn(className)}\n  {...props}\n>\n  <slot />\n</nav>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/contact-3.json b/public/r/styles/base-mira/contact-3.json
index 5a344d9fc..15a42d48f 100644
--- a/public/r/styles/base-mira/contact-3.json
+++ b/public/r/styles/base-mira/contact-3.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/contact-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"Contact image\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/content-1.json b/public/r/styles/base-mira/content-1.json
index 9bd4e3cc6..37cc98379 100644
--- a/public/r/styles/base-mira/content-1.json
+++ b/public/r/styles/base-mira/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features && features.length > 0 && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-3 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/content-2.json b/public/r/styles/base-mira/content-2.json
index 14af2df66..693b5d9bb 100644
--- a/public/r/styles/base-mira/content-2.json
+++ b/public/r/styles/base-mira/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/content-3.json b/public/r/styles/base-mira/content-3.json
index 6ae269ebc..fdc0b7afd 100644
--- a/public/r/styles/base-mira/content-3.json
+++ b/public/r/styles/base-mira/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/content-4.json b/public/r/styles/base-mira/content-4.json
index 09aa3dfbf..4dd1cd6f3 100644
--- a/public/r/styles/base-mira/content-4.json
+++ b/public/r/styles/base-mira/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features && features.length > 0 && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons && buttons.length > 0 && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/cta-1.json b/public/r/styles/base-mira/cta-1.json
index d4b30fd2d..880fa60eb 100644
--- a/public/r/styles/base-mira/cta-1.json
+++ b/public/r/styles/base-mira/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/cta-2.json b/public/r/styles/base-mira/cta-2.json
index 458de6318..05cfb2687 100644
--- a/public/r/styles/base-mira/cta-2.json
+++ b/public/r/styles/base-mira/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/cta-3.json b/public/r/styles/base-mira/cta-3.json
index dba896177..caf08c91a 100644
--- a/public/r/styles/base-mira/cta-3.json
+++ b/public/r/styles/base-mira/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/cta-4.json b/public/r/styles/base-mira/cta-4.json
index 244bfa2cd..2ed196c48 100644
--- a/public/r/styles/base-mira/cta-4.json
+++ b/public/r/styles/base-mira/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/cta-5.json b/public/r/styles/base-mira/cta-5.json
index 9c655d7ac..39ff0c7bb 100644
--- a/public/r/styles/base-mira/cta-5.json
+++ b/public/r/styles/base-mira/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/cta-6.json b/public/r/styles/base-mira/cta-6.json
index 8b4d735ee..cbd7368fe 100644
--- a/public/r/styles/base-mira/cta-6.json
+++ b/public/r/styles/base-mira/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/cta-7.json b/public/r/styles/base-mira/cta-7.json
index 961d6855d..86813e6c0 100644
--- a/public/r/styles/base-mira/cta-7.json
+++ b/public/r/styles/base-mira/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-muted-foreground text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/cta-8.json b/public/r/styles/base-mira/cta-8.json
index 4b2d77e41..eaac34d78 100644
--- a/public/r/styles/base-mira/cta-8.json
+++ b/public/r/styles/base-mira/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/doc-1.json b/public/r/styles/base-mira/doc-1.json
index 4806861e6..9c98b34f9 100644
--- a/public/r/styles/base-mira/doc-1.json
+++ b/public/r/styles/base-mira/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\" data-doc-content>\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document.querySelectorAll(\"[data-doc-content] > pre\").forEach((pre) => {\n      if (pre.closest(\".docs-code-block\")) return\n      const wrapper = document.createElement(\"div\")\n      const button = document.createElement(\"button\")\n      wrapper.className = \"docs-code-block\"\n      wrapper.dataset.notTypeset = \"\"\n      button.type = \"button\"\n      button.className = \"docs-code-copy\"\n      button.ariaLabel = \"Copy code\"\n      button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n      pre.before(wrapper)\n      wrapper.append(pre, button)\n    })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/faqs-1.json b/public/r/styles/base-mira/faqs-1.json
index e33726343..92d59430a 100644
--- a/public/r/styles/base-mira/faqs-1.json
+++ b/public/r/styles/base-mira/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/faqs-2.json b/public/r/styles/base-mira/faqs-2.json
index 5d669bafe..7662c1100 100644
--- a/public/r/styles/base-mira/faqs-2.json
+++ b/public/r/styles/base-mira/faqs-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-8 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/faqs-3.json b/public/r/styles/base-mira/faqs-3.json
index 794ef5a59..a0d634566 100644
--- a/public/r/styles/base-mira/faqs-3.json
+++ b/public/r/styles/base-mira/faqs-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/features-1.json b/public/r/styles/base-mira/features-1.json
index e4cd92254..585c6b7f2 100644
--- a/public/r/styles/base-mira/features-1.json
+++ b/public/r/styles/base-mira/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/features-2.json b/public/r/styles/base-mira/features-2.json
index 51c9a088e..467338413 100644
--- a/public/r/styles/base-mira/features-2.json
+++ b/public/r/styles/base-mira/features-2.json
@@ -7,14 +7,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/features-4.json b/public/r/styles/base-mira/features-4.json
index 6210bc332..6cadcba43 100644
--- a/public/r/styles/base-mira/features-4.json
+++ b/public/r/styles/base-mira/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/features-5.json b/public/r/styles/base-mira/features-5.json
index 8575743db..61eba406f 100644
--- a/public/r/styles/base-mira/features-5.json
+++ b/public/r/styles/base-mira/features-5.json
@@ -7,14 +7,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/features-6.json b/public/r/styles/base-mira/features-6.json
index 5e729533e..d21ff5c93 100644
--- a/public/r/styles/base-mira/features-6.json
+++ b/public/r/styles/base-mira/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/footer-1.json b/public/r/styles/base-mira/footer-1.json
index 3d06945e5..7ac3e8331 100644
--- a/public/r/styles/base-mira/footer-1.json
+++ b/public/r/styles/base-mira/footer-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials && socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/footer-2.json b/public/r/styles/base-mira/footer-2.json
index 2820c1f64..217f595bb 100644
--- a/public/r/styles/base-mira/footer-2.json
+++ b/public/r/styles/base-mira/footer-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links?: {\n    label: string\n    href: string\n  }[]\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel?: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel = \"Footer navigation\",\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      {links && links.length > 0 && (\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n        >\n          {links.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      )}\n      {socials && socials.length > 0 && (\n        <div class=\"flex items-center justify-center gap-3\">\n          {socials.map((social) => (\n            <a\n              href={social.href}\n              class=\"text-muted-foreground hover:text-foreground transition-colors\"\n              aria-label={social.label}\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              <Icon name={social.icon} href={social.href} class=\"size-4\" />\n            </a>\n          ))}\n        </div>\n      )}\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      <div class=\"flex items-center justify-center gap-3\">\n        {socials.map((social) => (\n          <a\n            href={social.href}\n            class=\"text-muted-foreground hover:text-foreground transition-colors\"\n            aria-label={social.label}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n          >\n            <Icon name={social.icon} href={social.href} class=\"size-4\" />\n          </a>\n        ))}\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/footer-3.json b/public/r/styles/base-mira/footer-3.json
index 6c9882990..b5bc278e9 100644
--- a/public/r/styles/base-mira/footer-3.json
+++ b/public/r/styles/base-mira/footer-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks?: {\n    label: string\n    href: string\n  }[]\n  navigationLabel?: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel = \"Footer navigation\",\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials && socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        {bottomLinks && bottomLinks.length > 0 && (\n          <nav\n            aria-label={navigationLabel}\n            class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n          >\n            {bottomLinks.map((link) => (\n              <a\n                href={link.href}\n                class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                {link.label}\n              </a>\n            ))}\n          </nav>\n        )}\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/header-1.json b/public/r/styles/base-mira/header-1.json
index 8baebe0f5..5b7896a87 100644
--- a/public/r/styles/base-mira/header-1.json
+++ b/public/r/styles/base-mira/header-1.json
@@ -3,6 +3,9 @@
   "name": "header-1",
   "title": "Header 1",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/header-2.json b/public/r/styles/base-mira/header-2.json
index a1039f8b2..6a35ca3c4 100644
--- a/public/r/styles/base-mira/header-2.json
+++ b/public/r/styles/base-mira/header-2.json
@@ -3,6 +3,9 @@
   "name": "header-2",
   "title": "Header 2",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/header-3.json b/public/r/styles/base-mira/header-3.json
index e511a92e7..70418bc87 100644
--- a/public/r/styles/base-mira/header-3.json
+++ b/public/r/styles/base-mira/header-3.json
@@ -3,6 +3,9 @@
   "name": "header-3",
   "title": "Header 3",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -15,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/header-4.json b/public/r/styles/base-mira/header-4.json
index 3bd445ad1..0a7d02adf 100644
--- a/public/r/styles/base-mira/header-4.json
+++ b/public/r/styles/base-mira/header-4.json
@@ -3,6 +3,9 @@
   "name": "header-4",
   "title": "Header 4",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/header-5.json b/public/r/styles/base-mira/header-5.json
index 5f781e13c..97bc283a6 100644
--- a/public/r/styles/base-mira/header-5.json
+++ b/public/r/styles/base-mira/header-5.json
@@ -3,6 +3,9 @@
   "name": "header-5",
   "title": "Header 5",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -15,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/hero-1.json b/public/r/styles/base-mira/hero-1.json
index fd7eef979..74dc8b92d 100644
--- a/public/r/styles/base-mira/hero-1.json
+++ b/public/r/styles/base-mira/hero-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge?: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    {badge && (\n      <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n        {badge.label}\n      </Badge>\n    )}\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n      {badge.label}\n    </Badge>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/hero-10.json b/public/r/styles/base-mira/hero-10.json
index 1d044e3e4..96ed3c089 100644
--- a/public/r/styles/base-mira/hero-10.json
+++ b/public/r/styles/base-mira/hero-10.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-10.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/hero-11.json b/public/r/styles/base-mira/hero-11.json
index dcb5f5ffc..86a7f5e03 100644
--- a/public/r/styles/base-mira/hero-11.json
+++ b/public/r/styles/base-mira/hero-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-11.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating value={socialProof.rating} />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/hero-12.json b/public/r/styles/base-mira/hero-12.json
index fb5fd9794..a88805751 100644
--- a/public/r/styles/base-mira/hero-12.json
+++ b/public/r/styles/base-mira/hero-12.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-12.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/hero-13.json b/public/r/styles/base-mira/hero-13.json
index c30e39ca1..f25d55373 100644
--- a/public/r/styles/base-mira/hero-13.json
+++ b/public/r/styles/base-mira/hero-13.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-13.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/hero-2.json b/public/r/styles/base-mira/hero-2.json
index c4b5093a0..672b023de 100644
--- a/public/r/styles/base-mira/hero-2.json
+++ b/public/r/styles/base-mira/hero-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating value={socialProof.rating} />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/hero-3.json b/public/r/styles/base-mira/hero-3.json
index c2dc41368..03cde7001 100644
--- a/public/r/styles/base-mira/hero-3.json
+++ b/public/r/styles/base-mira/hero-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/hero-4.json b/public/r/styles/base-mira/hero-4.json
index 76565d570..ccdf499cf 100644
--- a/public/r/styles/base-mira/hero-4.json
+++ b/public/r/styles/base-mira/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/hero-5.json b/public/r/styles/base-mira/hero-5.json
index ae42c57cb..a11173eff 100644
--- a/public/r/styles/base-mira/hero-5.json
+++ b/public/r/styles/base-mira/hero-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/hero-6.json b/public/r/styles/base-mira/hero-6.json
index 8ac3412a2..f458c5879 100644
--- a/public/r/styles/base-mira/hero-6.json
+++ b/public/r/styles/base-mira/hero-6.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/hero-7.json b/public/r/styles/base-mira/hero-7.json
index fec1634cc..e417ccade 100644
--- a/public/r/styles/base-mira/hero-7.json
+++ b/public/r/styles/base-mira/hero-7.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/hero-8.json b/public/r/styles/base-mira/hero-8.json
index 3e484825c..a3db6ba64 100644
--- a/public/r/styles/base-mira/hero-8.json
+++ b/public/r/styles/base-mira/hero-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-8.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/hero-9.json b/public/r/styles/base-mira/hero-9.json
index 8bbbab3b8..22397aa77 100644
--- a/public/r/styles/base-mira/hero-9.json
+++ b/public/r/styles/base-mira/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/links-2.json b/public/r/styles/base-mira/links-2.json
index 3d1b59a93..9e1d20ae8 100644
--- a/public/r/styles/base-mira/links-2.json
+++ b/public/r/styles/base-mira/links-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/links-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n    preview?: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/logos-1.json b/public/r/styles/base-mira/logos-1.json
index 19dcad093..de017ff6a 100644
--- a/public/r/styles/base-mira/logos-1.json
+++ b/public/r/styles/base-mira/logos-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/logos-2.json b/public/r/styles/base-mira/logos-2.json
index 49feb4f1a..3d3960693 100644
--- a/public/r/styles/base-mira/logos-2.json
+++ b/public/r/styles/base-mira/logos-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/pricing-1.json b/public/r/styles/base-mira/pricing-1.json
index ec4c2a50e..69ddbb891 100644
--- a/public/r/styles/base-mira/pricing-1.json
+++ b/public/r/styles/base-mira/pricing-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>Popular</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={\n                plan.button.variant ?? (plan.featured ? \"default\" : \"outline\")\n              }\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/pricing-2.json b/public/r/styles/base-mira/pricing-2.json
index d474a8d12..6f6a446c3 100644
--- a/public/r/styles/base-mira/pricing-2.json
+++ b/public/r/styles/base-mira/pricing-2.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={\n                plan.button.variant ?? (index === 0 ? \"outline\" : \"default\")\n              }\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={index === 0 ? \"outline\" : \"default\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/pricing-3.json b/public/r/styles/base-mira/pricing-3.json
index f924ce05f..cf14ce08c 100644
--- a/public/r/styles/base-mira/pricing-3.json
+++ b/public/r/styles/base-mira/pricing-3.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button\n          as=\"a\"\n          href={offer.button.href}\n          variant={offer.button.variant ?? \"default\"}\n          class=\"w-full\"\n        >\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/product-1.json b/public/r/styles/base-mira/product-1.json
index 69e448d08..74777c9da 100644
--- a/public/r/styles/base-mira/product-1.json
+++ b/public/r/styles/base-mira/product-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/product-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/products-4.json b/public/r/styles/base-mira/products-4.json
index b5deb3d87..5c64e3d1f 100644
--- a/public/r/styles/base-mira/products-4.json
+++ b/public/r/styles/base-mira/products-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/products-5.json b/public/r/styles/base-mira/products-5.json
index d0bae90d8..c9420d383 100644
--- a/public/r/styles/base-mira/products-5.json
+++ b/public/r/styles/base-mira/products-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/registry.json b/public/r/styles/base-mira/registry.json
index bc676ec63..e6f391646 100644
--- a/public/r/styles/base-mira/registry.json
+++ b/public/r/styles/base-mira/registry.json
@@ -2535,7 +2535,6 @@
       "docs": "https://ui.full.dev/blocks/article/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2556,7 +2555,6 @@
       "docs": "https://ui.full.dev/blocks/article/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2577,7 +2575,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2619,7 +2616,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2640,7 +2636,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -3257,7 +3252,6 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
@@ -3324,7 +3318,6 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
@@ -3431,6 +3424,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3455,6 +3451,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3479,6 +3478,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3504,6 +3506,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3528,6 +3533,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -4376,7 +4384,6 @@
       ],
       "registryDependencies": [
         "@fulldev/badge",
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
diff --git a/public/r/styles/base-mira/reviews-1.json b/public/r/styles/base-mira/reviews-1.json
index ac00928ae..1a508f17b 100644
--- a/public/r/styles/base-mira/reviews-1.json
+++ b/public/r/styles/base-mira/reviews-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/reviews-2.json b/public/r/styles/base-mira/reviews-2.json
index 353359080..d5ae29850 100644
--- a/public/r/styles/base-mira/reviews-2.json
+++ b/public/r/styles/base-mira/reviews-2.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/reviews-3.json b/public/r/styles/base-mira/reviews-3.json
index 7642fe047..e58b82609 100644
--- a/public/r/styles/base-mira/reviews-3.json
+++ b/public/r/styles/base-mira/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  previousLabel: string\n  nextLabel: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  previousLabel,\n  nextLabel,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{previousLabel}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{nextLabel}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/reviews-4.json b/public/r/styles/base-mira/reviews-4.json
index c7bab1225..03ac5fc3e 100644
--- a/public/r/styles/base-mira/reviews-4.json
+++ b/public/r/styles/base-mira/reviews-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/reviews-5.json b/public/r/styles/base-mira/reviews-5.json
index 0369cd763..8b3458106 100644
--- a/public/r/styles/base-mira/reviews-5.json
+++ b/public/r/styles/base-mira/reviews-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/services-1.json b/public/r/styles/base-mira/services-1.json
index 3fef88847..4d5ac713e 100644
--- a/public/r/styles/base-mira/services-1.json
+++ b/public/r/styles/base-mira/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href != null && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/services-2.json b/public/r/styles/base-mira/services-2.json
index 22252912d..f2b3db6bc 100644
--- a/public/r/styles/base-mira/services-2.json
+++ b/public/r/styles/base-mira/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/services-3.json b/public/r/styles/base-mira/services-3.json
index 6f77bedb6..f259c104f 100644
--- a/public/r/styles/base-mira/services-3.json
+++ b/public/r/styles/base-mira/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/services-4.json b/public/r/styles/base-mira/services-4.json
index 112b8fe30..d357efabf 100644
--- a/public/r/styles/base-mira/services-4.json
+++ b/public/r/styles/base-mira/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/services-5.json b/public/r/styles/base-mira/services-5.json
index 02476c58a..def369794 100644
--- a/public/r/styles/base-mira/services-5.json
+++ b/public/r/styles/base-mira/services-5.json
@@ -8,14 +8,13 @@
   ],
   "registryDependencies": [
     "@fulldev/badge",
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/services-6.json b/public/r/styles/base-mira/services-6.json
index 76d0bd582..70206a046 100644
--- a/public/r/styles/base-mira/services-6.json
+++ b/public/r/styles/base-mira/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/services-7.json b/public/r/styles/base-mira/services-7.json
index 091def64d..623952170 100644
--- a/public/r/styles/base-mira/services-7.json
+++ b/public/r/styles/base-mira/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 1024px) 66vw, 100vw\"\n                  : \"(min-width: 1024px) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/sidebar-1.json b/public/r/styles/base-mira/sidebar-1.json
index 66f778967..3476f325b 100644
--- a/public/r/styles/base-mira/sidebar-1.json
+++ b/public/r/styles/base-mira/sidebar-1.json
@@ -22,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? \"Stars\"\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebar: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar\n    class={cn(\"\", className)}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebar} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={labels.github}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/sidebar.json b/public/r/styles/base-mira/sidebar.json
index 1aa0cb503..7e0aa5523 100644
--- a/public/r/styles/base-mira/sidebar.json
+++ b/public/r/styles/base-mira/sidebar.json
@@ -24,7 +24,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>Sidebar</SheetTitle>\n          <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"px-2 py-1 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"px-2 py-1 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/article-1.json b/public/r/styles/base-nova/article-1.json
index 6bdf16d1f..c45df6988 100644
--- a/public/r/styles/base-nova/article-1.json
+++ b/public/r/styles/base-nova/article-1.json
@@ -5,13 +5,12 @@
   "description": "Editorial article layouts for long-form stories, interviews, and analysis.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/article-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      {badge && (\n        <Badge variant=\"secondary\" class=\"w-fit\">\n          {badge}\n        </Badge>\n      )}\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/article-2.json b/public/r/styles/base-nova/article-2.json
index 01da358a6..6511245f3 100644
--- a/public/r/styles/base-nova/article-2.json
+++ b/public/r/styles/base-nova/article-2.json
@@ -5,13 +5,12 @@
   "description": "Editorial article layouts for long-form stories, interviews, and analysis.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/article-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/articles-1.json b/public/r/styles/base-nova/articles-1.json
index e742cb898..30aa52bd2 100644
--- a/public/r/styles/base-nova/articles-1.json
+++ b/public/r/styles/base-nova/articles-1.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      {badge && (\n        <Badge variant=\"secondary\" class=\"w-fit\">\n          {badge}\n        </Badge>\n      )}\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720, 960]}\n            sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/articles-2.json b/public/r/styles/base-nova/articles-2.json
index 266269748..a9d78a9f5 100644
--- a/public/r/styles/base-nova/articles-2.json
+++ b/public/r/styles/base-nova/articles-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class={cn(\n          \"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\",\n          badge && \"mt-4\"\n        )}\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <a\n      href={featured.href ?? \"#\"}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </a>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720]}\n            sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/articles-3.json b/public/r/styles/base-nova/articles-3.json
index aecb82d0d..e4182724a 100644
--- a/public/r/styles/base-nova/articles-3.json
+++ b/public/r/styles/base-nova/articles-3.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        {badge && (\n          <Badge variant=\"secondary\" class=\"w-fit\">\n            {badge}\n          </Badge>\n        )}\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720]}\n            sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/articles-4.json b/public/r/styles/base-nova/articles-4.json
index 222f11bc5..b0c908073 100644
--- a/public/r/styles/base-nova/articles-4.json
+++ b/public/r/styles/base-nova/articles-4.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class={cn(\n          \"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\",\n          badge && \"mt-4\"\n        )}\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/banner-1.json b/public/r/styles/base-nova/banner-1.json
index f83aa2ac3..3d0e3d2b1 100644
--- a/public/r/styles/base-nova/banner-1.json
+++ b/public/r/styles/base-nova/banner-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  link?: {\n    label: string\n    href: string\n  }\n}\n\nconst { class: className, title, description, link, ...props } = Astro.props\n---\n\n<Banner\n  storageKey=\"banner-1\"\n  class={cn(\"dark bg-background text-foreground\", className)}\n  {...props}\n>\n  <BannerContainer class=\"flex-row items-center gap-x-4 gap-y-1\">\n    <p class=\"text-sm leading-relaxed\">\n      <span class=\"font-semibold\">{title}</span>{\" \"}\n      <span class=\"mx-1.5 hidden opacity-50 sm:inline\">&mdash;</span>{\" \"}\n      <span class=\"opacity-80\">{description}</span>\n    </p>\n    {link && (\n      <a\n        href={link.href}\n        class=\"group/link inline-flex shrink-0 items-center gap-1 text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80\"\n      >\n        {link.label}\n        <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/link:translate-x-0.5\" />\n      </a>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  link: {\n    label: string\n    href: string\n  }\n  closeLabel: string\n  storageKey?: string\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  link,\n  closeLabel,\n  storageKey,\n  ...props\n} = Astro.props\n---\n\n<Banner\n  storageKey={storageKey}\n  class={cn(\"dark bg-background text-foreground\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-row items-center gap-x-4 gap-y-1\"\n    closeLabel={closeLabel}\n  >\n    <p class=\"text-sm leading-relaxed\">\n      <span class=\"font-semibold\">{title}</span>{\" \"}\n      <span class=\"mx-1.5 hidden opacity-50 sm:inline\">&middot;</span>{\" \"}\n      <span class=\"opacity-80\">{description}</span>\n    </p>\n    <a\n      href={link.href}\n      class=\"group/link inline-flex shrink-0 items-center gap-1 text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80\"\n    >\n      {link.label}\n      <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/link:translate-x-0.5\" />\n    </a>\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/banner-2.json b/public/r/styles/base-nova/banner-2.json
index 6ea880320..eb1d06077 100644
--- a/public/r/styles/base-nova/banner-2.json
+++ b/public/r/styles/base-nova/banner-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner variant=\"floating\" class={cn(\"@container\", className)} {...props}>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"sm\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/banner.json b/public/r/styles/base-nova/banner.json
index c35bd66d0..ce34959a4 100644
--- a/public/r/styles/base-nova/banner.json
+++ b/public/r/styles/base-nova/banner.json
@@ -14,7 +14,7 @@
     },
     {
       "path": "src/components/ui/banner/banner-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst {\n  class: className,\n  showClose = true,\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-sm text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n  closeLabel?: string\n}\n\nconst {\n  class: className,\n  showClose = true,\n  closeLabel = \"Close\",\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-sm text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label={closeLabel}\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">{closeLabel}</span>\n    </button>\n  )}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/blocks-1.json b/public/r/styles/base-nova/blocks-1.json
index 5f875b246..a0da615ca 100644
--- a/public/r/styles/base-nova/blocks-1.json
+++ b/public/r/styles/base-nova/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/breadcrumb.json b/public/r/styles/base-nova/breadcrumb.json
index eaa260f3d..53ff25b17 100644
--- a/public/r/styles/base-nova/breadcrumb.json
+++ b/public/r/styles/base-nova/breadcrumb.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/breadcrumb/breadcrumb.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"nav\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<nav\n  aria-label=\"breadcrumb\"\n  data-slot=\"breadcrumb\"\n  class={cn(className)}\n  {...props}\n>\n  <slot />\n</nav>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"nav\">\n\nconst {\n  class: className,\n  \"aria-label\": ariaLabel = \"breadcrumb\",\n  ...props\n} = Astro.props\n---\n\n<nav\n  aria-label={ariaLabel}\n  data-slot=\"breadcrumb\"\n  class={cn(className)}\n  {...props}\n>\n  <slot />\n</nav>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/contact-3.json b/public/r/styles/base-nova/contact-3.json
index 5a344d9fc..15a42d48f 100644
--- a/public/r/styles/base-nova/contact-3.json
+++ b/public/r/styles/base-nova/contact-3.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/contact-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"Contact image\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/content-1.json b/public/r/styles/base-nova/content-1.json
index 9bd4e3cc6..37cc98379 100644
--- a/public/r/styles/base-nova/content-1.json
+++ b/public/r/styles/base-nova/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features && features.length > 0 && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-3 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/content-2.json b/public/r/styles/base-nova/content-2.json
index 14af2df66..693b5d9bb 100644
--- a/public/r/styles/base-nova/content-2.json
+++ b/public/r/styles/base-nova/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/content-3.json b/public/r/styles/base-nova/content-3.json
index 6ae269ebc..fdc0b7afd 100644
--- a/public/r/styles/base-nova/content-3.json
+++ b/public/r/styles/base-nova/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/content-4.json b/public/r/styles/base-nova/content-4.json
index 09aa3dfbf..4dd1cd6f3 100644
--- a/public/r/styles/base-nova/content-4.json
+++ b/public/r/styles/base-nova/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features && features.length > 0 && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons && buttons.length > 0 && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/cta-1.json b/public/r/styles/base-nova/cta-1.json
index d4b30fd2d..880fa60eb 100644
--- a/public/r/styles/base-nova/cta-1.json
+++ b/public/r/styles/base-nova/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/cta-2.json b/public/r/styles/base-nova/cta-2.json
index 458de6318..05cfb2687 100644
--- a/public/r/styles/base-nova/cta-2.json
+++ b/public/r/styles/base-nova/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/cta-3.json b/public/r/styles/base-nova/cta-3.json
index dba896177..caf08c91a 100644
--- a/public/r/styles/base-nova/cta-3.json
+++ b/public/r/styles/base-nova/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/cta-4.json b/public/r/styles/base-nova/cta-4.json
index 244bfa2cd..2ed196c48 100644
--- a/public/r/styles/base-nova/cta-4.json
+++ b/public/r/styles/base-nova/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/cta-5.json b/public/r/styles/base-nova/cta-5.json
index 9c655d7ac..39ff0c7bb 100644
--- a/public/r/styles/base-nova/cta-5.json
+++ b/public/r/styles/base-nova/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/cta-6.json b/public/r/styles/base-nova/cta-6.json
index 8b4d735ee..cbd7368fe 100644
--- a/public/r/styles/base-nova/cta-6.json
+++ b/public/r/styles/base-nova/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/cta-7.json b/public/r/styles/base-nova/cta-7.json
index 961d6855d..86813e6c0 100644
--- a/public/r/styles/base-nova/cta-7.json
+++ b/public/r/styles/base-nova/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-muted-foreground text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/cta-8.json b/public/r/styles/base-nova/cta-8.json
index 4b2d77e41..eaac34d78 100644
--- a/public/r/styles/base-nova/cta-8.json
+++ b/public/r/styles/base-nova/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/doc-1.json b/public/r/styles/base-nova/doc-1.json
index 4806861e6..9c98b34f9 100644
--- a/public/r/styles/base-nova/doc-1.json
+++ b/public/r/styles/base-nova/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\" data-doc-content>\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document.querySelectorAll(\"[data-doc-content] > pre\").forEach((pre) => {\n      if (pre.closest(\".docs-code-block\")) return\n      const wrapper = document.createElement(\"div\")\n      const button = document.createElement(\"button\")\n      wrapper.className = \"docs-code-block\"\n      wrapper.dataset.notTypeset = \"\"\n      button.type = \"button\"\n      button.className = \"docs-code-copy\"\n      button.ariaLabel = \"Copy code\"\n      button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n      pre.before(wrapper)\n      wrapper.append(pre, button)\n    })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/faqs-1.json b/public/r/styles/base-nova/faqs-1.json
index e33726343..92d59430a 100644
--- a/public/r/styles/base-nova/faqs-1.json
+++ b/public/r/styles/base-nova/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/faqs-2.json b/public/r/styles/base-nova/faqs-2.json
index 5d669bafe..7662c1100 100644
--- a/public/r/styles/base-nova/faqs-2.json
+++ b/public/r/styles/base-nova/faqs-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-8 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/faqs-3.json b/public/r/styles/base-nova/faqs-3.json
index 794ef5a59..a0d634566 100644
--- a/public/r/styles/base-nova/faqs-3.json
+++ b/public/r/styles/base-nova/faqs-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/features-1.json b/public/r/styles/base-nova/features-1.json
index e4cd92254..585c6b7f2 100644
--- a/public/r/styles/base-nova/features-1.json
+++ b/public/r/styles/base-nova/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/features-2.json b/public/r/styles/base-nova/features-2.json
index 51c9a088e..467338413 100644
--- a/public/r/styles/base-nova/features-2.json
+++ b/public/r/styles/base-nova/features-2.json
@@ -7,14 +7,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/features-4.json b/public/r/styles/base-nova/features-4.json
index 6210bc332..6cadcba43 100644
--- a/public/r/styles/base-nova/features-4.json
+++ b/public/r/styles/base-nova/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/features-5.json b/public/r/styles/base-nova/features-5.json
index 8575743db..61eba406f 100644
--- a/public/r/styles/base-nova/features-5.json
+++ b/public/r/styles/base-nova/features-5.json
@@ -7,14 +7,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/features-6.json b/public/r/styles/base-nova/features-6.json
index 5e729533e..d21ff5c93 100644
--- a/public/r/styles/base-nova/features-6.json
+++ b/public/r/styles/base-nova/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/footer-1.json b/public/r/styles/base-nova/footer-1.json
index 3d06945e5..7ac3e8331 100644
--- a/public/r/styles/base-nova/footer-1.json
+++ b/public/r/styles/base-nova/footer-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials && socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/footer-2.json b/public/r/styles/base-nova/footer-2.json
index 2820c1f64..217f595bb 100644
--- a/public/r/styles/base-nova/footer-2.json
+++ b/public/r/styles/base-nova/footer-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links?: {\n    label: string\n    href: string\n  }[]\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel?: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel = \"Footer navigation\",\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      {links && links.length > 0 && (\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n        >\n          {links.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      )}\n      {socials && socials.length > 0 && (\n        <div class=\"flex items-center justify-center gap-3\">\n          {socials.map((social) => (\n            <a\n              href={social.href}\n              class=\"text-muted-foreground hover:text-foreground transition-colors\"\n              aria-label={social.label}\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              <Icon name={social.icon} href={social.href} class=\"size-4\" />\n            </a>\n          ))}\n        </div>\n      )}\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      <div class=\"flex items-center justify-center gap-3\">\n        {socials.map((social) => (\n          <a\n            href={social.href}\n            class=\"text-muted-foreground hover:text-foreground transition-colors\"\n            aria-label={social.label}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n          >\n            <Icon name={social.icon} href={social.href} class=\"size-4\" />\n          </a>\n        ))}\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/footer-3.json b/public/r/styles/base-nova/footer-3.json
index 6c9882990..b5bc278e9 100644
--- a/public/r/styles/base-nova/footer-3.json
+++ b/public/r/styles/base-nova/footer-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks?: {\n    label: string\n    href: string\n  }[]\n  navigationLabel?: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel = \"Footer navigation\",\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials && socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        {bottomLinks && bottomLinks.length > 0 && (\n          <nav\n            aria-label={navigationLabel}\n            class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n          >\n            {bottomLinks.map((link) => (\n              <a\n                href={link.href}\n                class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                {link.label}\n              </a>\n            ))}\n          </nav>\n        )}\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/header-1.json b/public/r/styles/base-nova/header-1.json
index 8baebe0f5..04e97f870 100644
--- a/public/r/styles/base-nova/header-1.json
+++ b/public/r/styles/base-nova/header-1.json
@@ -3,6 +3,9 @@
   "name": "header-1",
   "title": "Header 1",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/header-2.json b/public/r/styles/base-nova/header-2.json
index a1039f8b2..bf90c1ae2 100644
--- a/public/r/styles/base-nova/header-2.json
+++ b/public/r/styles/base-nova/header-2.json
@@ -3,6 +3,9 @@
   "name": "header-2",
   "title": "Header 2",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/header-3.json b/public/r/styles/base-nova/header-3.json
index e511a92e7..47c08e12a 100644
--- a/public/r/styles/base-nova/header-3.json
+++ b/public/r/styles/base-nova/header-3.json
@@ -3,6 +3,9 @@
   "name": "header-3",
   "title": "Header 3",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -15,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/header-4.json b/public/r/styles/base-nova/header-4.json
index 3bd445ad1..ffb2e5781 100644
--- a/public/r/styles/base-nova/header-4.json
+++ b/public/r/styles/base-nova/header-4.json
@@ -3,6 +3,9 @@
   "name": "header-4",
   "title": "Header 4",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/header-5.json b/public/r/styles/base-nova/header-5.json
index 5f781e13c..385f2d55a 100644
--- a/public/r/styles/base-nova/header-5.json
+++ b/public/r/styles/base-nova/header-5.json
@@ -3,6 +3,9 @@
   "name": "header-5",
   "title": "Header 5",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -15,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/hero-1.json b/public/r/styles/base-nova/hero-1.json
index fd7eef979..74dc8b92d 100644
--- a/public/r/styles/base-nova/hero-1.json
+++ b/public/r/styles/base-nova/hero-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge?: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    {badge && (\n      <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n        {badge.label}\n      </Badge>\n    )}\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n      {badge.label}\n    </Badge>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/hero-10.json b/public/r/styles/base-nova/hero-10.json
index 1d044e3e4..96ed3c089 100644
--- a/public/r/styles/base-nova/hero-10.json
+++ b/public/r/styles/base-nova/hero-10.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-10.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/hero-11.json b/public/r/styles/base-nova/hero-11.json
index dcb5f5ffc..86a7f5e03 100644
--- a/public/r/styles/base-nova/hero-11.json
+++ b/public/r/styles/base-nova/hero-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-11.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating value={socialProof.rating} />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/hero-12.json b/public/r/styles/base-nova/hero-12.json
index fb5fd9794..a88805751 100644
--- a/public/r/styles/base-nova/hero-12.json
+++ b/public/r/styles/base-nova/hero-12.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-12.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/hero-13.json b/public/r/styles/base-nova/hero-13.json
index c30e39ca1..f25d55373 100644
--- a/public/r/styles/base-nova/hero-13.json
+++ b/public/r/styles/base-nova/hero-13.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-13.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/hero-2.json b/public/r/styles/base-nova/hero-2.json
index c4b5093a0..672b023de 100644
--- a/public/r/styles/base-nova/hero-2.json
+++ b/public/r/styles/base-nova/hero-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating value={socialProof.rating} />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/hero-3.json b/public/r/styles/base-nova/hero-3.json
index c2dc41368..03cde7001 100644
--- a/public/r/styles/base-nova/hero-3.json
+++ b/public/r/styles/base-nova/hero-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/hero-4.json b/public/r/styles/base-nova/hero-4.json
index 76565d570..ccdf499cf 100644
--- a/public/r/styles/base-nova/hero-4.json
+++ b/public/r/styles/base-nova/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/hero-5.json b/public/r/styles/base-nova/hero-5.json
index ae42c57cb..a11173eff 100644
--- a/public/r/styles/base-nova/hero-5.json
+++ b/public/r/styles/base-nova/hero-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/hero-6.json b/public/r/styles/base-nova/hero-6.json
index 8ac3412a2..f458c5879 100644
--- a/public/r/styles/base-nova/hero-6.json
+++ b/public/r/styles/base-nova/hero-6.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/hero-7.json b/public/r/styles/base-nova/hero-7.json
index fec1634cc..e417ccade 100644
--- a/public/r/styles/base-nova/hero-7.json
+++ b/public/r/styles/base-nova/hero-7.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/hero-8.json b/public/r/styles/base-nova/hero-8.json
index 3e484825c..a3db6ba64 100644
--- a/public/r/styles/base-nova/hero-8.json
+++ b/public/r/styles/base-nova/hero-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-8.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/hero-9.json b/public/r/styles/base-nova/hero-9.json
index 8bbbab3b8..22397aa77 100644
--- a/public/r/styles/base-nova/hero-9.json
+++ b/public/r/styles/base-nova/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/links-2.json b/public/r/styles/base-nova/links-2.json
index 3d1b59a93..9e1d20ae8 100644
--- a/public/r/styles/base-nova/links-2.json
+++ b/public/r/styles/base-nova/links-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/links-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n    preview?: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/logos-1.json b/public/r/styles/base-nova/logos-1.json
index 19dcad093..de017ff6a 100644
--- a/public/r/styles/base-nova/logos-1.json
+++ b/public/r/styles/base-nova/logos-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/logos-2.json b/public/r/styles/base-nova/logos-2.json
index 49feb4f1a..3d3960693 100644
--- a/public/r/styles/base-nova/logos-2.json
+++ b/public/r/styles/base-nova/logos-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/pricing-1.json b/public/r/styles/base-nova/pricing-1.json
index ec4c2a50e..69ddbb891 100644
--- a/public/r/styles/base-nova/pricing-1.json
+++ b/public/r/styles/base-nova/pricing-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>Popular</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={\n                plan.button.variant ?? (plan.featured ? \"default\" : \"outline\")\n              }\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/pricing-2.json b/public/r/styles/base-nova/pricing-2.json
index d474a8d12..6f6a446c3 100644
--- a/public/r/styles/base-nova/pricing-2.json
+++ b/public/r/styles/base-nova/pricing-2.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={\n                plan.button.variant ?? (index === 0 ? \"outline\" : \"default\")\n              }\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={index === 0 ? \"outline\" : \"default\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/pricing-3.json b/public/r/styles/base-nova/pricing-3.json
index f924ce05f..cf14ce08c 100644
--- a/public/r/styles/base-nova/pricing-3.json
+++ b/public/r/styles/base-nova/pricing-3.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button\n          as=\"a\"\n          href={offer.button.href}\n          variant={offer.button.variant ?? \"default\"}\n          class=\"w-full\"\n        >\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/product-1.json b/public/r/styles/base-nova/product-1.json
index 69e448d08..74777c9da 100644
--- a/public/r/styles/base-nova/product-1.json
+++ b/public/r/styles/base-nova/product-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/product-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/products-4.json b/public/r/styles/base-nova/products-4.json
index b5deb3d87..5c64e3d1f 100644
--- a/public/r/styles/base-nova/products-4.json
+++ b/public/r/styles/base-nova/products-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/products-5.json b/public/r/styles/base-nova/products-5.json
index d0bae90d8..c9420d383 100644
--- a/public/r/styles/base-nova/products-5.json
+++ b/public/r/styles/base-nova/products-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/registry.json b/public/r/styles/base-nova/registry.json
index 18971b7ed..96b11bb81 100644
--- a/public/r/styles/base-nova/registry.json
+++ b/public/r/styles/base-nova/registry.json
@@ -2535,7 +2535,6 @@
       "docs": "https://ui.full.dev/blocks/article/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2556,7 +2555,6 @@
       "docs": "https://ui.full.dev/blocks/article/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2577,7 +2575,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2619,7 +2616,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2640,7 +2636,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -3257,7 +3252,6 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
@@ -3324,7 +3318,6 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
@@ -3431,6 +3424,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3455,6 +3451,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3479,6 +3478,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3504,6 +3506,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3528,6 +3533,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -4376,7 +4384,6 @@
       ],
       "registryDependencies": [
         "@fulldev/badge",
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
diff --git a/public/r/styles/base-nova/reviews-1.json b/public/r/styles/base-nova/reviews-1.json
index ac00928ae..1a508f17b 100644
--- a/public/r/styles/base-nova/reviews-1.json
+++ b/public/r/styles/base-nova/reviews-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/reviews-2.json b/public/r/styles/base-nova/reviews-2.json
index 353359080..d5ae29850 100644
--- a/public/r/styles/base-nova/reviews-2.json
+++ b/public/r/styles/base-nova/reviews-2.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/reviews-3.json b/public/r/styles/base-nova/reviews-3.json
index 7642fe047..e58b82609 100644
--- a/public/r/styles/base-nova/reviews-3.json
+++ b/public/r/styles/base-nova/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  previousLabel: string\n  nextLabel: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  previousLabel,\n  nextLabel,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{previousLabel}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{nextLabel}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/reviews-4.json b/public/r/styles/base-nova/reviews-4.json
index c7bab1225..03ac5fc3e 100644
--- a/public/r/styles/base-nova/reviews-4.json
+++ b/public/r/styles/base-nova/reviews-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/reviews-5.json b/public/r/styles/base-nova/reviews-5.json
index 0369cd763..8b3458106 100644
--- a/public/r/styles/base-nova/reviews-5.json
+++ b/public/r/styles/base-nova/reviews-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/services-1.json b/public/r/styles/base-nova/services-1.json
index 3fef88847..4d5ac713e 100644
--- a/public/r/styles/base-nova/services-1.json
+++ b/public/r/styles/base-nova/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href != null && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/services-2.json b/public/r/styles/base-nova/services-2.json
index 22252912d..f2b3db6bc 100644
--- a/public/r/styles/base-nova/services-2.json
+++ b/public/r/styles/base-nova/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/services-3.json b/public/r/styles/base-nova/services-3.json
index 6f77bedb6..f259c104f 100644
--- a/public/r/styles/base-nova/services-3.json
+++ b/public/r/styles/base-nova/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/services-4.json b/public/r/styles/base-nova/services-4.json
index 112b8fe30..d357efabf 100644
--- a/public/r/styles/base-nova/services-4.json
+++ b/public/r/styles/base-nova/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/services-5.json b/public/r/styles/base-nova/services-5.json
index 02476c58a..def369794 100644
--- a/public/r/styles/base-nova/services-5.json
+++ b/public/r/styles/base-nova/services-5.json
@@ -8,14 +8,13 @@
   ],
   "registryDependencies": [
     "@fulldev/badge",
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/services-6.json b/public/r/styles/base-nova/services-6.json
index 76d0bd582..70206a046 100644
--- a/public/r/styles/base-nova/services-6.json
+++ b/public/r/styles/base-nova/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/services-7.json b/public/r/styles/base-nova/services-7.json
index 091def64d..623952170 100644
--- a/public/r/styles/base-nova/services-7.json
+++ b/public/r/styles/base-nova/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 1024px) 66vw, 100vw\"\n                  : \"(min-width: 1024px) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/sidebar-1.json b/public/r/styles/base-nova/sidebar-1.json
index 66f778967..3476f325b 100644
--- a/public/r/styles/base-nova/sidebar-1.json
+++ b/public/r/styles/base-nova/sidebar-1.json
@@ -22,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? \"Stars\"\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebar: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar\n    class={cn(\"\", className)}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebar} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={labels.github}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/sidebar.json b/public/r/styles/base-nova/sidebar.json
index 8fd4eb5d7..8f37a1469 100644
--- a/public/r/styles/base-nova/sidebar.json
+++ b/public/r/styles/base-nova/sidebar.json
@@ -24,7 +24,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>Sidebar</SheetTitle>\n          <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/article-1.json b/public/r/styles/base-rhea/article-1.json
index 6bdf16d1f..c45df6988 100644
--- a/public/r/styles/base-rhea/article-1.json
+++ b/public/r/styles/base-rhea/article-1.json
@@ -5,13 +5,12 @@
   "description": "Editorial article layouts for long-form stories, interviews, and analysis.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/article-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      {badge && (\n        <Badge variant=\"secondary\" class=\"w-fit\">\n          {badge}\n        </Badge>\n      )}\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/article-2.json b/public/r/styles/base-rhea/article-2.json
index 01da358a6..6511245f3 100644
--- a/public/r/styles/base-rhea/article-2.json
+++ b/public/r/styles/base-rhea/article-2.json
@@ -5,13 +5,12 @@
   "description": "Editorial article layouts for long-form stories, interviews, and analysis.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/article-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/articles-1.json b/public/r/styles/base-rhea/articles-1.json
index e742cb898..30aa52bd2 100644
--- a/public/r/styles/base-rhea/articles-1.json
+++ b/public/r/styles/base-rhea/articles-1.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      {badge && (\n        <Badge variant=\"secondary\" class=\"w-fit\">\n          {badge}\n        </Badge>\n      )}\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720, 960]}\n            sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/articles-2.json b/public/r/styles/base-rhea/articles-2.json
index 266269748..a9d78a9f5 100644
--- a/public/r/styles/base-rhea/articles-2.json
+++ b/public/r/styles/base-rhea/articles-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class={cn(\n          \"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\",\n          badge && \"mt-4\"\n        )}\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <a\n      href={featured.href ?? \"#\"}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </a>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720]}\n            sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/articles-3.json b/public/r/styles/base-rhea/articles-3.json
index aecb82d0d..e4182724a 100644
--- a/public/r/styles/base-rhea/articles-3.json
+++ b/public/r/styles/base-rhea/articles-3.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        {badge && (\n          <Badge variant=\"secondary\" class=\"w-fit\">\n            {badge}\n          </Badge>\n        )}\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720]}\n            sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/articles-4.json b/public/r/styles/base-rhea/articles-4.json
index 222f11bc5..b0c908073 100644
--- a/public/r/styles/base-rhea/articles-4.json
+++ b/public/r/styles/base-rhea/articles-4.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class={cn(\n          \"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\",\n          badge && \"mt-4\"\n        )}\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/banner-1.json b/public/r/styles/base-rhea/banner-1.json
index f83aa2ac3..3d0e3d2b1 100644
--- a/public/r/styles/base-rhea/banner-1.json
+++ b/public/r/styles/base-rhea/banner-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  link?: {\n    label: string\n    href: string\n  }\n}\n\nconst { class: className, title, description, link, ...props } = Astro.props\n---\n\n<Banner\n  storageKey=\"banner-1\"\n  class={cn(\"dark bg-background text-foreground\", className)}\n  {...props}\n>\n  <BannerContainer class=\"flex-row items-center gap-x-4 gap-y-1\">\n    <p class=\"text-sm leading-relaxed\">\n      <span class=\"font-semibold\">{title}</span>{\" \"}\n      <span class=\"mx-1.5 hidden opacity-50 sm:inline\">&mdash;</span>{\" \"}\n      <span class=\"opacity-80\">{description}</span>\n    </p>\n    {link && (\n      <a\n        href={link.href}\n        class=\"group/link inline-flex shrink-0 items-center gap-1 text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80\"\n      >\n        {link.label}\n        <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/link:translate-x-0.5\" />\n      </a>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  link: {\n    label: string\n    href: string\n  }\n  closeLabel: string\n  storageKey?: string\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  link,\n  closeLabel,\n  storageKey,\n  ...props\n} = Astro.props\n---\n\n<Banner\n  storageKey={storageKey}\n  class={cn(\"dark bg-background text-foreground\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-row items-center gap-x-4 gap-y-1\"\n    closeLabel={closeLabel}\n  >\n    <p class=\"text-sm leading-relaxed\">\n      <span class=\"font-semibold\">{title}</span>{\" \"}\n      <span class=\"mx-1.5 hidden opacity-50 sm:inline\">&middot;</span>{\" \"}\n      <span class=\"opacity-80\">{description}</span>\n    </p>\n    <a\n      href={link.href}\n      class=\"group/link inline-flex shrink-0 items-center gap-1 text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80\"\n    >\n      {link.label}\n      <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/link:translate-x-0.5\" />\n    </a>\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/banner-2.json b/public/r/styles/base-rhea/banner-2.json
index 6ea880320..eb1d06077 100644
--- a/public/r/styles/base-rhea/banner-2.json
+++ b/public/r/styles/base-rhea/banner-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner variant=\"floating\" class={cn(\"@container\", className)} {...props}>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"sm\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/banner.json b/public/r/styles/base-rhea/banner.json
index 702d54488..4875d6190 100644
--- a/public/r/styles/base-rhea/banner.json
+++ b/public/r/styles/base-rhea/banner.json
@@ -14,7 +14,7 @@
     },
     {
       "path": "src/components/ui/banner/banner-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst {\n  class: className,\n  showClose = true,\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-lg text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n  closeLabel?: string\n}\n\nconst {\n  class: className,\n  showClose = true,\n  closeLabel = \"Close\",\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-lg text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label={closeLabel}\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">{closeLabel}</span>\n    </button>\n  )}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/blocks-1.json b/public/r/styles/base-rhea/blocks-1.json
index 5f875b246..a0da615ca 100644
--- a/public/r/styles/base-rhea/blocks-1.json
+++ b/public/r/styles/base-rhea/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/breadcrumb.json b/public/r/styles/base-rhea/breadcrumb.json
index e97c174a8..ada28b337 100644
--- a/public/r/styles/base-rhea/breadcrumb.json
+++ b/public/r/styles/base-rhea/breadcrumb.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/breadcrumb/breadcrumb.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"nav\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<nav\n  aria-label=\"breadcrumb\"\n  data-slot=\"breadcrumb\"\n  class={cn(className)}\n  {...props}\n>\n  <slot />\n</nav>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"nav\">\n\nconst {\n  class: className,\n  \"aria-label\": ariaLabel = \"breadcrumb\",\n  ...props\n} = Astro.props\n---\n\n<nav\n  aria-label={ariaLabel}\n  data-slot=\"breadcrumb\"\n  class={cn(className)}\n  {...props}\n>\n  <slot />\n</nav>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/contact-3.json b/public/r/styles/base-rhea/contact-3.json
index 5a344d9fc..15a42d48f 100644
--- a/public/r/styles/base-rhea/contact-3.json
+++ b/public/r/styles/base-rhea/contact-3.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/contact-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"Contact image\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/content-1.json b/public/r/styles/base-rhea/content-1.json
index 9bd4e3cc6..37cc98379 100644
--- a/public/r/styles/base-rhea/content-1.json
+++ b/public/r/styles/base-rhea/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features && features.length > 0 && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-3 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/content-2.json b/public/r/styles/base-rhea/content-2.json
index 14af2df66..693b5d9bb 100644
--- a/public/r/styles/base-rhea/content-2.json
+++ b/public/r/styles/base-rhea/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/content-3.json b/public/r/styles/base-rhea/content-3.json
index 6ae269ebc..fdc0b7afd 100644
--- a/public/r/styles/base-rhea/content-3.json
+++ b/public/r/styles/base-rhea/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/content-4.json b/public/r/styles/base-rhea/content-4.json
index 09aa3dfbf..4dd1cd6f3 100644
--- a/public/r/styles/base-rhea/content-4.json
+++ b/public/r/styles/base-rhea/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features && features.length > 0 && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons && buttons.length > 0 && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/cta-1.json b/public/r/styles/base-rhea/cta-1.json
index d4b30fd2d..880fa60eb 100644
--- a/public/r/styles/base-rhea/cta-1.json
+++ b/public/r/styles/base-rhea/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/cta-2.json b/public/r/styles/base-rhea/cta-2.json
index 458de6318..05cfb2687 100644
--- a/public/r/styles/base-rhea/cta-2.json
+++ b/public/r/styles/base-rhea/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/cta-3.json b/public/r/styles/base-rhea/cta-3.json
index dba896177..caf08c91a 100644
--- a/public/r/styles/base-rhea/cta-3.json
+++ b/public/r/styles/base-rhea/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/cta-4.json b/public/r/styles/base-rhea/cta-4.json
index 244bfa2cd..2ed196c48 100644
--- a/public/r/styles/base-rhea/cta-4.json
+++ b/public/r/styles/base-rhea/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/cta-5.json b/public/r/styles/base-rhea/cta-5.json
index 9c655d7ac..39ff0c7bb 100644
--- a/public/r/styles/base-rhea/cta-5.json
+++ b/public/r/styles/base-rhea/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/cta-6.json b/public/r/styles/base-rhea/cta-6.json
index 8b4d735ee..cbd7368fe 100644
--- a/public/r/styles/base-rhea/cta-6.json
+++ b/public/r/styles/base-rhea/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/cta-7.json b/public/r/styles/base-rhea/cta-7.json
index 961d6855d..86813e6c0 100644
--- a/public/r/styles/base-rhea/cta-7.json
+++ b/public/r/styles/base-rhea/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-muted-foreground text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/cta-8.json b/public/r/styles/base-rhea/cta-8.json
index 4b2d77e41..eaac34d78 100644
--- a/public/r/styles/base-rhea/cta-8.json
+++ b/public/r/styles/base-rhea/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/doc-1.json b/public/r/styles/base-rhea/doc-1.json
index 4806861e6..9c98b34f9 100644
--- a/public/r/styles/base-rhea/doc-1.json
+++ b/public/r/styles/base-rhea/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\" data-doc-content>\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document.querySelectorAll(\"[data-doc-content] > pre\").forEach((pre) => {\n      if (pre.closest(\".docs-code-block\")) return\n      const wrapper = document.createElement(\"div\")\n      const button = document.createElement(\"button\")\n      wrapper.className = \"docs-code-block\"\n      wrapper.dataset.notTypeset = \"\"\n      button.type = \"button\"\n      button.className = \"docs-code-copy\"\n      button.ariaLabel = \"Copy code\"\n      button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n      pre.before(wrapper)\n      wrapper.append(pre, button)\n    })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/faqs-1.json b/public/r/styles/base-rhea/faqs-1.json
index e33726343..92d59430a 100644
--- a/public/r/styles/base-rhea/faqs-1.json
+++ b/public/r/styles/base-rhea/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/faqs-2.json b/public/r/styles/base-rhea/faqs-2.json
index 5d669bafe..7662c1100 100644
--- a/public/r/styles/base-rhea/faqs-2.json
+++ b/public/r/styles/base-rhea/faqs-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-8 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/faqs-3.json b/public/r/styles/base-rhea/faqs-3.json
index 794ef5a59..a0d634566 100644
--- a/public/r/styles/base-rhea/faqs-3.json
+++ b/public/r/styles/base-rhea/faqs-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/features-1.json b/public/r/styles/base-rhea/features-1.json
index e4cd92254..585c6b7f2 100644
--- a/public/r/styles/base-rhea/features-1.json
+++ b/public/r/styles/base-rhea/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/features-2.json b/public/r/styles/base-rhea/features-2.json
index 51c9a088e..467338413 100644
--- a/public/r/styles/base-rhea/features-2.json
+++ b/public/r/styles/base-rhea/features-2.json
@@ -7,14 +7,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/features-4.json b/public/r/styles/base-rhea/features-4.json
index 6210bc332..6cadcba43 100644
--- a/public/r/styles/base-rhea/features-4.json
+++ b/public/r/styles/base-rhea/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/features-5.json b/public/r/styles/base-rhea/features-5.json
index 8575743db..61eba406f 100644
--- a/public/r/styles/base-rhea/features-5.json
+++ b/public/r/styles/base-rhea/features-5.json
@@ -7,14 +7,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/features-6.json b/public/r/styles/base-rhea/features-6.json
index 5e729533e..d21ff5c93 100644
--- a/public/r/styles/base-rhea/features-6.json
+++ b/public/r/styles/base-rhea/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/footer-1.json b/public/r/styles/base-rhea/footer-1.json
index 3d06945e5..7ac3e8331 100644
--- a/public/r/styles/base-rhea/footer-1.json
+++ b/public/r/styles/base-rhea/footer-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials && socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/footer-2.json b/public/r/styles/base-rhea/footer-2.json
index 2820c1f64..217f595bb 100644
--- a/public/r/styles/base-rhea/footer-2.json
+++ b/public/r/styles/base-rhea/footer-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links?: {\n    label: string\n    href: string\n  }[]\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel?: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel = \"Footer navigation\",\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      {links && links.length > 0 && (\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n        >\n          {links.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      )}\n      {socials && socials.length > 0 && (\n        <div class=\"flex items-center justify-center gap-3\">\n          {socials.map((social) => (\n            <a\n              href={social.href}\n              class=\"text-muted-foreground hover:text-foreground transition-colors\"\n              aria-label={social.label}\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              <Icon name={social.icon} href={social.href} class=\"size-4\" />\n            </a>\n          ))}\n        </div>\n      )}\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      <div class=\"flex items-center justify-center gap-3\">\n        {socials.map((social) => (\n          <a\n            href={social.href}\n            class=\"text-muted-foreground hover:text-foreground transition-colors\"\n            aria-label={social.label}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n          >\n            <Icon name={social.icon} href={social.href} class=\"size-4\" />\n          </a>\n        ))}\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/footer-3.json b/public/r/styles/base-rhea/footer-3.json
index 6c9882990..b5bc278e9 100644
--- a/public/r/styles/base-rhea/footer-3.json
+++ b/public/r/styles/base-rhea/footer-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks?: {\n    label: string\n    href: string\n  }[]\n  navigationLabel?: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel = \"Footer navigation\",\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials && socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        {bottomLinks && bottomLinks.length > 0 && (\n          <nav\n            aria-label={navigationLabel}\n            class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n          >\n            {bottomLinks.map((link) => (\n              <a\n                href={link.href}\n                class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                {link.label}\n              </a>\n            ))}\n          </nav>\n        )}\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/header-1.json b/public/r/styles/base-rhea/header-1.json
index 8baebe0f5..df82b249a 100644
--- a/public/r/styles/base-rhea/header-1.json
+++ b/public/r/styles/base-rhea/header-1.json
@@ -3,6 +3,9 @@
   "name": "header-1",
   "title": "Header 1",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/header-2.json b/public/r/styles/base-rhea/header-2.json
index a1039f8b2..8b36cd0c2 100644
--- a/public/r/styles/base-rhea/header-2.json
+++ b/public/r/styles/base-rhea/header-2.json
@@ -3,6 +3,9 @@
   "name": "header-2",
   "title": "Header 2",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/header-3.json b/public/r/styles/base-rhea/header-3.json
index e511a92e7..45ef24dbf 100644
--- a/public/r/styles/base-rhea/header-3.json
+++ b/public/r/styles/base-rhea/header-3.json
@@ -3,6 +3,9 @@
   "name": "header-3",
   "title": "Header 3",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -15,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/header-4.json b/public/r/styles/base-rhea/header-4.json
index 3bd445ad1..4e6f46ac7 100644
--- a/public/r/styles/base-rhea/header-4.json
+++ b/public/r/styles/base-rhea/header-4.json
@@ -3,6 +3,9 @@
   "name": "header-4",
   "title": "Header 4",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/header-5.json b/public/r/styles/base-rhea/header-5.json
index 5f781e13c..c6a7b4990 100644
--- a/public/r/styles/base-rhea/header-5.json
+++ b/public/r/styles/base-rhea/header-5.json
@@ -3,6 +3,9 @@
   "name": "header-5",
   "title": "Header 5",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -15,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/hero-1.json b/public/r/styles/base-rhea/hero-1.json
index fd7eef979..74dc8b92d 100644
--- a/public/r/styles/base-rhea/hero-1.json
+++ b/public/r/styles/base-rhea/hero-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge?: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    {badge && (\n      <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n        {badge.label}\n      </Badge>\n    )}\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n      {badge.label}\n    </Badge>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/hero-10.json b/public/r/styles/base-rhea/hero-10.json
index 1d044e3e4..96ed3c089 100644
--- a/public/r/styles/base-rhea/hero-10.json
+++ b/public/r/styles/base-rhea/hero-10.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-10.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/hero-11.json b/public/r/styles/base-rhea/hero-11.json
index dcb5f5ffc..86a7f5e03 100644
--- a/public/r/styles/base-rhea/hero-11.json
+++ b/public/r/styles/base-rhea/hero-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-11.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating value={socialProof.rating} />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/hero-12.json b/public/r/styles/base-rhea/hero-12.json
index fb5fd9794..a88805751 100644
--- a/public/r/styles/base-rhea/hero-12.json
+++ b/public/r/styles/base-rhea/hero-12.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-12.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/hero-13.json b/public/r/styles/base-rhea/hero-13.json
index c30e39ca1..f25d55373 100644
--- a/public/r/styles/base-rhea/hero-13.json
+++ b/public/r/styles/base-rhea/hero-13.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-13.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/hero-2.json b/public/r/styles/base-rhea/hero-2.json
index c4b5093a0..672b023de 100644
--- a/public/r/styles/base-rhea/hero-2.json
+++ b/public/r/styles/base-rhea/hero-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating value={socialProof.rating} />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/hero-3.json b/public/r/styles/base-rhea/hero-3.json
index c2dc41368..03cde7001 100644
--- a/public/r/styles/base-rhea/hero-3.json
+++ b/public/r/styles/base-rhea/hero-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/hero-4.json b/public/r/styles/base-rhea/hero-4.json
index 76565d570..ccdf499cf 100644
--- a/public/r/styles/base-rhea/hero-4.json
+++ b/public/r/styles/base-rhea/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/hero-5.json b/public/r/styles/base-rhea/hero-5.json
index ae42c57cb..a11173eff 100644
--- a/public/r/styles/base-rhea/hero-5.json
+++ b/public/r/styles/base-rhea/hero-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/hero-6.json b/public/r/styles/base-rhea/hero-6.json
index 8ac3412a2..f458c5879 100644
--- a/public/r/styles/base-rhea/hero-6.json
+++ b/public/r/styles/base-rhea/hero-6.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/hero-7.json b/public/r/styles/base-rhea/hero-7.json
index fec1634cc..e417ccade 100644
--- a/public/r/styles/base-rhea/hero-7.json
+++ b/public/r/styles/base-rhea/hero-7.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/hero-8.json b/public/r/styles/base-rhea/hero-8.json
index 3e484825c..a3db6ba64 100644
--- a/public/r/styles/base-rhea/hero-8.json
+++ b/public/r/styles/base-rhea/hero-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-8.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/hero-9.json b/public/r/styles/base-rhea/hero-9.json
index 8bbbab3b8..22397aa77 100644
--- a/public/r/styles/base-rhea/hero-9.json
+++ b/public/r/styles/base-rhea/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/links-2.json b/public/r/styles/base-rhea/links-2.json
index 3d1b59a93..9e1d20ae8 100644
--- a/public/r/styles/base-rhea/links-2.json
+++ b/public/r/styles/base-rhea/links-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/links-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n    preview?: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/logos-1.json b/public/r/styles/base-rhea/logos-1.json
index 19dcad093..de017ff6a 100644
--- a/public/r/styles/base-rhea/logos-1.json
+++ b/public/r/styles/base-rhea/logos-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/logos-2.json b/public/r/styles/base-rhea/logos-2.json
index 49feb4f1a..3d3960693 100644
--- a/public/r/styles/base-rhea/logos-2.json
+++ b/public/r/styles/base-rhea/logos-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/pricing-1.json b/public/r/styles/base-rhea/pricing-1.json
index ec4c2a50e..69ddbb891 100644
--- a/public/r/styles/base-rhea/pricing-1.json
+++ b/public/r/styles/base-rhea/pricing-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>Popular</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={\n                plan.button.variant ?? (plan.featured ? \"default\" : \"outline\")\n              }\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/pricing-2.json b/public/r/styles/base-rhea/pricing-2.json
index d474a8d12..6f6a446c3 100644
--- a/public/r/styles/base-rhea/pricing-2.json
+++ b/public/r/styles/base-rhea/pricing-2.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={\n                plan.button.variant ?? (index === 0 ? \"outline\" : \"default\")\n              }\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={index === 0 ? \"outline\" : \"default\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/pricing-3.json b/public/r/styles/base-rhea/pricing-3.json
index f924ce05f..cf14ce08c 100644
--- a/public/r/styles/base-rhea/pricing-3.json
+++ b/public/r/styles/base-rhea/pricing-3.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button\n          as=\"a\"\n          href={offer.button.href}\n          variant={offer.button.variant ?? \"default\"}\n          class=\"w-full\"\n        >\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/product-1.json b/public/r/styles/base-rhea/product-1.json
index 69e448d08..74777c9da 100644
--- a/public/r/styles/base-rhea/product-1.json
+++ b/public/r/styles/base-rhea/product-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/product-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/products-4.json b/public/r/styles/base-rhea/products-4.json
index b5deb3d87..5c64e3d1f 100644
--- a/public/r/styles/base-rhea/products-4.json
+++ b/public/r/styles/base-rhea/products-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/products-5.json b/public/r/styles/base-rhea/products-5.json
index d0bae90d8..c9420d383 100644
--- a/public/r/styles/base-rhea/products-5.json
+++ b/public/r/styles/base-rhea/products-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/registry.json b/public/r/styles/base-rhea/registry.json
index 9906c3899..3dadeb939 100644
--- a/public/r/styles/base-rhea/registry.json
+++ b/public/r/styles/base-rhea/registry.json
@@ -2535,7 +2535,6 @@
       "docs": "https://ui.full.dev/blocks/article/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2556,7 +2555,6 @@
       "docs": "https://ui.full.dev/blocks/article/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2577,7 +2575,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2619,7 +2616,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2640,7 +2636,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -3257,7 +3252,6 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
@@ -3324,7 +3318,6 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
@@ -3431,6 +3424,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3455,6 +3451,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3479,6 +3478,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3504,6 +3506,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3528,6 +3533,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -4376,7 +4384,6 @@
       ],
       "registryDependencies": [
         "@fulldev/badge",
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
diff --git a/public/r/styles/base-rhea/reviews-1.json b/public/r/styles/base-rhea/reviews-1.json
index ac00928ae..1a508f17b 100644
--- a/public/r/styles/base-rhea/reviews-1.json
+++ b/public/r/styles/base-rhea/reviews-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/reviews-2.json b/public/r/styles/base-rhea/reviews-2.json
index 353359080..d5ae29850 100644
--- a/public/r/styles/base-rhea/reviews-2.json
+++ b/public/r/styles/base-rhea/reviews-2.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/reviews-3.json b/public/r/styles/base-rhea/reviews-3.json
index 7642fe047..e58b82609 100644
--- a/public/r/styles/base-rhea/reviews-3.json
+++ b/public/r/styles/base-rhea/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  previousLabel: string\n  nextLabel: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  previousLabel,\n  nextLabel,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{previousLabel}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{nextLabel}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/reviews-4.json b/public/r/styles/base-rhea/reviews-4.json
index c7bab1225..03ac5fc3e 100644
--- a/public/r/styles/base-rhea/reviews-4.json
+++ b/public/r/styles/base-rhea/reviews-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/reviews-5.json b/public/r/styles/base-rhea/reviews-5.json
index 0369cd763..8b3458106 100644
--- a/public/r/styles/base-rhea/reviews-5.json
+++ b/public/r/styles/base-rhea/reviews-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/services-1.json b/public/r/styles/base-rhea/services-1.json
index 3fef88847..4d5ac713e 100644
--- a/public/r/styles/base-rhea/services-1.json
+++ b/public/r/styles/base-rhea/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href != null && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/services-2.json b/public/r/styles/base-rhea/services-2.json
index 22252912d..f2b3db6bc 100644
--- a/public/r/styles/base-rhea/services-2.json
+++ b/public/r/styles/base-rhea/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/services-3.json b/public/r/styles/base-rhea/services-3.json
index 6f77bedb6..f259c104f 100644
--- a/public/r/styles/base-rhea/services-3.json
+++ b/public/r/styles/base-rhea/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/services-4.json b/public/r/styles/base-rhea/services-4.json
index 112b8fe30..d357efabf 100644
--- a/public/r/styles/base-rhea/services-4.json
+++ b/public/r/styles/base-rhea/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/services-5.json b/public/r/styles/base-rhea/services-5.json
index 02476c58a..def369794 100644
--- a/public/r/styles/base-rhea/services-5.json
+++ b/public/r/styles/base-rhea/services-5.json
@@ -8,14 +8,13 @@
   ],
   "registryDependencies": [
     "@fulldev/badge",
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/services-6.json b/public/r/styles/base-rhea/services-6.json
index 76d0bd582..70206a046 100644
--- a/public/r/styles/base-rhea/services-6.json
+++ b/public/r/styles/base-rhea/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/services-7.json b/public/r/styles/base-rhea/services-7.json
index 091def64d..623952170 100644
--- a/public/r/styles/base-rhea/services-7.json
+++ b/public/r/styles/base-rhea/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 1024px) 66vw, 100vw\"\n                  : \"(min-width: 1024px) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/sidebar-1.json b/public/r/styles/base-rhea/sidebar-1.json
index 66f778967..3476f325b 100644
--- a/public/r/styles/base-rhea/sidebar-1.json
+++ b/public/r/styles/base-rhea/sidebar-1.json
@@ -22,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? \"Stars\"\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebar: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar\n    class={cn(\"\", className)}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebar} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={labels.github}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/sidebar.json b/public/r/styles/base-rhea/sidebar.json
index 73b493682..4ec3f1f0d 100644
--- a/public/r/styles/base-rhea/sidebar.json
+++ b/public/r/styles/base-rhea/sidebar.json
@@ -24,7 +24,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>Sidebar</SheetTitle>\n          <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-2xl group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-2xl group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/article-1.json b/public/r/styles/base-sera/article-1.json
index 6bdf16d1f..c45df6988 100644
--- a/public/r/styles/base-sera/article-1.json
+++ b/public/r/styles/base-sera/article-1.json
@@ -5,13 +5,12 @@
   "description": "Editorial article layouts for long-form stories, interviews, and analysis.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/article-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      {badge && (\n        <Badge variant=\"secondary\" class=\"w-fit\">\n          {badge}\n        </Badge>\n      )}\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/article-2.json b/public/r/styles/base-sera/article-2.json
index 01da358a6..6511245f3 100644
--- a/public/r/styles/base-sera/article-2.json
+++ b/public/r/styles/base-sera/article-2.json
@@ -5,13 +5,12 @@
   "description": "Editorial article layouts for long-form stories, interviews, and analysis.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/article-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/articles-1.json b/public/r/styles/base-sera/articles-1.json
index e742cb898..30aa52bd2 100644
--- a/public/r/styles/base-sera/articles-1.json
+++ b/public/r/styles/base-sera/articles-1.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      {badge && (\n        <Badge variant=\"secondary\" class=\"w-fit\">\n          {badge}\n        </Badge>\n      )}\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720, 960]}\n            sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/articles-2.json b/public/r/styles/base-sera/articles-2.json
index 266269748..a9d78a9f5 100644
--- a/public/r/styles/base-sera/articles-2.json
+++ b/public/r/styles/base-sera/articles-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class={cn(\n          \"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\",\n          badge && \"mt-4\"\n        )}\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <a\n      href={featured.href ?? \"#\"}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </a>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720]}\n            sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/articles-3.json b/public/r/styles/base-sera/articles-3.json
index aecb82d0d..e4182724a 100644
--- a/public/r/styles/base-sera/articles-3.json
+++ b/public/r/styles/base-sera/articles-3.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        {badge && (\n          <Badge variant=\"secondary\" class=\"w-fit\">\n            {badge}\n          </Badge>\n        )}\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720]}\n            sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/articles-4.json b/public/r/styles/base-sera/articles-4.json
index 222f11bc5..b0c908073 100644
--- a/public/r/styles/base-sera/articles-4.json
+++ b/public/r/styles/base-sera/articles-4.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class={cn(\n          \"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\",\n          badge && \"mt-4\"\n        )}\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/banner-1.json b/public/r/styles/base-sera/banner-1.json
index f83aa2ac3..3d0e3d2b1 100644
--- a/public/r/styles/base-sera/banner-1.json
+++ b/public/r/styles/base-sera/banner-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  link?: {\n    label: string\n    href: string\n  }\n}\n\nconst { class: className, title, description, link, ...props } = Astro.props\n---\n\n<Banner\n  storageKey=\"banner-1\"\n  class={cn(\"dark bg-background text-foreground\", className)}\n  {...props}\n>\n  <BannerContainer class=\"flex-row items-center gap-x-4 gap-y-1\">\n    <p class=\"text-sm leading-relaxed\">\n      <span class=\"font-semibold\">{title}</span>{\" \"}\n      <span class=\"mx-1.5 hidden opacity-50 sm:inline\">&mdash;</span>{\" \"}\n      <span class=\"opacity-80\">{description}</span>\n    </p>\n    {link && (\n      <a\n        href={link.href}\n        class=\"group/link inline-flex shrink-0 items-center gap-1 text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80\"\n      >\n        {link.label}\n        <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/link:translate-x-0.5\" />\n      </a>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  link: {\n    label: string\n    href: string\n  }\n  closeLabel: string\n  storageKey?: string\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  link,\n  closeLabel,\n  storageKey,\n  ...props\n} = Astro.props\n---\n\n<Banner\n  storageKey={storageKey}\n  class={cn(\"dark bg-background text-foreground\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-row items-center gap-x-4 gap-y-1\"\n    closeLabel={closeLabel}\n  >\n    <p class=\"text-sm leading-relaxed\">\n      <span class=\"font-semibold\">{title}</span>{\" \"}\n      <span class=\"mx-1.5 hidden opacity-50 sm:inline\">&middot;</span>{\" \"}\n      <span class=\"opacity-80\">{description}</span>\n    </p>\n    <a\n      href={link.href}\n      class=\"group/link inline-flex shrink-0 items-center gap-1 text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80\"\n    >\n      {link.label}\n      <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/link:translate-x-0.5\" />\n    </a>\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/banner-2.json b/public/r/styles/base-sera/banner-2.json
index 6ea880320..eb1d06077 100644
--- a/public/r/styles/base-sera/banner-2.json
+++ b/public/r/styles/base-sera/banner-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner variant=\"floating\" class={cn(\"@container\", className)} {...props}>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"sm\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/banner.json b/public/r/styles/base-sera/banner.json
index f6e90f253..dd485f8f8 100644
--- a/public/r/styles/base-sera/banner.json
+++ b/public/r/styles/base-sera/banner.json
@@ -14,7 +14,7 @@
     },
     {
       "path": "src/components/ui/banner/banner-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst {\n  class: className,\n  showClose = true,\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-none text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n  closeLabel?: string\n}\n\nconst {\n  class: className,\n  showClose = true,\n  closeLabel = \"Close\",\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-none text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label={closeLabel}\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">{closeLabel}</span>\n    </button>\n  )}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/blocks-1.json b/public/r/styles/base-sera/blocks-1.json
index 5f875b246..a0da615ca 100644
--- a/public/r/styles/base-sera/blocks-1.json
+++ b/public/r/styles/base-sera/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/breadcrumb.json b/public/r/styles/base-sera/breadcrumb.json
index 0050c5580..ec5d5483b 100644
--- a/public/r/styles/base-sera/breadcrumb.json
+++ b/public/r/styles/base-sera/breadcrumb.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/breadcrumb/breadcrumb.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"nav\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<nav\n  aria-label=\"breadcrumb\"\n  data-slot=\"breadcrumb\"\n  class={cn(className)}\n  {...props}\n>\n  <slot />\n</nav>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"nav\">\n\nconst {\n  class: className,\n  \"aria-label\": ariaLabel = \"breadcrumb\",\n  ...props\n} = Astro.props\n---\n\n<nav\n  aria-label={ariaLabel}\n  data-slot=\"breadcrumb\"\n  class={cn(className)}\n  {...props}\n>\n  <slot />\n</nav>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/contact-3.json b/public/r/styles/base-sera/contact-3.json
index 5a344d9fc..15a42d48f 100644
--- a/public/r/styles/base-sera/contact-3.json
+++ b/public/r/styles/base-sera/contact-3.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/contact-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"Contact image\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/content-1.json b/public/r/styles/base-sera/content-1.json
index 9bd4e3cc6..37cc98379 100644
--- a/public/r/styles/base-sera/content-1.json
+++ b/public/r/styles/base-sera/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features && features.length > 0 && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-3 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/content-2.json b/public/r/styles/base-sera/content-2.json
index 14af2df66..693b5d9bb 100644
--- a/public/r/styles/base-sera/content-2.json
+++ b/public/r/styles/base-sera/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/content-3.json b/public/r/styles/base-sera/content-3.json
index 6ae269ebc..fdc0b7afd 100644
--- a/public/r/styles/base-sera/content-3.json
+++ b/public/r/styles/base-sera/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/content-4.json b/public/r/styles/base-sera/content-4.json
index 09aa3dfbf..4dd1cd6f3 100644
--- a/public/r/styles/base-sera/content-4.json
+++ b/public/r/styles/base-sera/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features && features.length > 0 && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons && buttons.length > 0 && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/cta-1.json b/public/r/styles/base-sera/cta-1.json
index d4b30fd2d..880fa60eb 100644
--- a/public/r/styles/base-sera/cta-1.json
+++ b/public/r/styles/base-sera/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/cta-2.json b/public/r/styles/base-sera/cta-2.json
index 458de6318..05cfb2687 100644
--- a/public/r/styles/base-sera/cta-2.json
+++ b/public/r/styles/base-sera/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/cta-3.json b/public/r/styles/base-sera/cta-3.json
index dba896177..caf08c91a 100644
--- a/public/r/styles/base-sera/cta-3.json
+++ b/public/r/styles/base-sera/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/cta-4.json b/public/r/styles/base-sera/cta-4.json
index 244bfa2cd..2ed196c48 100644
--- a/public/r/styles/base-sera/cta-4.json
+++ b/public/r/styles/base-sera/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/cta-5.json b/public/r/styles/base-sera/cta-5.json
index 9c655d7ac..39ff0c7bb 100644
--- a/public/r/styles/base-sera/cta-5.json
+++ b/public/r/styles/base-sera/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/cta-6.json b/public/r/styles/base-sera/cta-6.json
index 8b4d735ee..cbd7368fe 100644
--- a/public/r/styles/base-sera/cta-6.json
+++ b/public/r/styles/base-sera/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/cta-7.json b/public/r/styles/base-sera/cta-7.json
index 961d6855d..86813e6c0 100644
--- a/public/r/styles/base-sera/cta-7.json
+++ b/public/r/styles/base-sera/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-muted-foreground text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/cta-8.json b/public/r/styles/base-sera/cta-8.json
index 4b2d77e41..eaac34d78 100644
--- a/public/r/styles/base-sera/cta-8.json
+++ b/public/r/styles/base-sera/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/doc-1.json b/public/r/styles/base-sera/doc-1.json
index 4806861e6..9c98b34f9 100644
--- a/public/r/styles/base-sera/doc-1.json
+++ b/public/r/styles/base-sera/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\" data-doc-content>\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document.querySelectorAll(\"[data-doc-content] > pre\").forEach((pre) => {\n      if (pre.closest(\".docs-code-block\")) return\n      const wrapper = document.createElement(\"div\")\n      const button = document.createElement(\"button\")\n      wrapper.className = \"docs-code-block\"\n      wrapper.dataset.notTypeset = \"\"\n      button.type = \"button\"\n      button.className = \"docs-code-copy\"\n      button.ariaLabel = \"Copy code\"\n      button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n      pre.before(wrapper)\n      wrapper.append(pre, button)\n    })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/faqs-1.json b/public/r/styles/base-sera/faqs-1.json
index e33726343..92d59430a 100644
--- a/public/r/styles/base-sera/faqs-1.json
+++ b/public/r/styles/base-sera/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/faqs-2.json b/public/r/styles/base-sera/faqs-2.json
index 5d669bafe..7662c1100 100644
--- a/public/r/styles/base-sera/faqs-2.json
+++ b/public/r/styles/base-sera/faqs-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-8 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/faqs-3.json b/public/r/styles/base-sera/faqs-3.json
index 794ef5a59..a0d634566 100644
--- a/public/r/styles/base-sera/faqs-3.json
+++ b/public/r/styles/base-sera/faqs-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/features-1.json b/public/r/styles/base-sera/features-1.json
index e4cd92254..585c6b7f2 100644
--- a/public/r/styles/base-sera/features-1.json
+++ b/public/r/styles/base-sera/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/features-2.json b/public/r/styles/base-sera/features-2.json
index 51c9a088e..467338413 100644
--- a/public/r/styles/base-sera/features-2.json
+++ b/public/r/styles/base-sera/features-2.json
@@ -7,14 +7,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/features-4.json b/public/r/styles/base-sera/features-4.json
index 6210bc332..6cadcba43 100644
--- a/public/r/styles/base-sera/features-4.json
+++ b/public/r/styles/base-sera/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/features-5.json b/public/r/styles/base-sera/features-5.json
index 8575743db..61eba406f 100644
--- a/public/r/styles/base-sera/features-5.json
+++ b/public/r/styles/base-sera/features-5.json
@@ -7,14 +7,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/features-6.json b/public/r/styles/base-sera/features-6.json
index 5e729533e..d21ff5c93 100644
--- a/public/r/styles/base-sera/features-6.json
+++ b/public/r/styles/base-sera/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/footer-1.json b/public/r/styles/base-sera/footer-1.json
index 3d06945e5..7ac3e8331 100644
--- a/public/r/styles/base-sera/footer-1.json
+++ b/public/r/styles/base-sera/footer-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials && socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/footer-2.json b/public/r/styles/base-sera/footer-2.json
index 2820c1f64..217f595bb 100644
--- a/public/r/styles/base-sera/footer-2.json
+++ b/public/r/styles/base-sera/footer-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links?: {\n    label: string\n    href: string\n  }[]\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel?: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel = \"Footer navigation\",\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      {links && links.length > 0 && (\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n        >\n          {links.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      )}\n      {socials && socials.length > 0 && (\n        <div class=\"flex items-center justify-center gap-3\">\n          {socials.map((social) => (\n            <a\n              href={social.href}\n              class=\"text-muted-foreground hover:text-foreground transition-colors\"\n              aria-label={social.label}\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              <Icon name={social.icon} href={social.href} class=\"size-4\" />\n            </a>\n          ))}\n        </div>\n      )}\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      <div class=\"flex items-center justify-center gap-3\">\n        {socials.map((social) => (\n          <a\n            href={social.href}\n            class=\"text-muted-foreground hover:text-foreground transition-colors\"\n            aria-label={social.label}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n          >\n            <Icon name={social.icon} href={social.href} class=\"size-4\" />\n          </a>\n        ))}\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/footer-3.json b/public/r/styles/base-sera/footer-3.json
index 6c9882990..b5bc278e9 100644
--- a/public/r/styles/base-sera/footer-3.json
+++ b/public/r/styles/base-sera/footer-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks?: {\n    label: string\n    href: string\n  }[]\n  navigationLabel?: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel = \"Footer navigation\",\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials && socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        {bottomLinks && bottomLinks.length > 0 && (\n          <nav\n            aria-label={navigationLabel}\n            class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n          >\n            {bottomLinks.map((link) => (\n              <a\n                href={link.href}\n                class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                {link.label}\n              </a>\n            ))}\n          </nav>\n        )}\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/header-1.json b/public/r/styles/base-sera/header-1.json
index 8baebe0f5..df82b249a 100644
--- a/public/r/styles/base-sera/header-1.json
+++ b/public/r/styles/base-sera/header-1.json
@@ -3,6 +3,9 @@
   "name": "header-1",
   "title": "Header 1",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/header-2.json b/public/r/styles/base-sera/header-2.json
index a1039f8b2..8b36cd0c2 100644
--- a/public/r/styles/base-sera/header-2.json
+++ b/public/r/styles/base-sera/header-2.json
@@ -3,6 +3,9 @@
   "name": "header-2",
   "title": "Header 2",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/header-3.json b/public/r/styles/base-sera/header-3.json
index e511a92e7..45ef24dbf 100644
--- a/public/r/styles/base-sera/header-3.json
+++ b/public/r/styles/base-sera/header-3.json
@@ -3,6 +3,9 @@
   "name": "header-3",
   "title": "Header 3",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -15,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/header-4.json b/public/r/styles/base-sera/header-4.json
index 3bd445ad1..4e6f46ac7 100644
--- a/public/r/styles/base-sera/header-4.json
+++ b/public/r/styles/base-sera/header-4.json
@@ -3,6 +3,9 @@
   "name": "header-4",
   "title": "Header 4",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/header-5.json b/public/r/styles/base-sera/header-5.json
index 5f781e13c..c6a7b4990 100644
--- a/public/r/styles/base-sera/header-5.json
+++ b/public/r/styles/base-sera/header-5.json
@@ -3,6 +3,9 @@
   "name": "header-5",
   "title": "Header 5",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -15,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/hero-1.json b/public/r/styles/base-sera/hero-1.json
index fd7eef979..74dc8b92d 100644
--- a/public/r/styles/base-sera/hero-1.json
+++ b/public/r/styles/base-sera/hero-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge?: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    {badge && (\n      <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n        {badge.label}\n      </Badge>\n    )}\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n      {badge.label}\n    </Badge>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/hero-10.json b/public/r/styles/base-sera/hero-10.json
index 1d044e3e4..96ed3c089 100644
--- a/public/r/styles/base-sera/hero-10.json
+++ b/public/r/styles/base-sera/hero-10.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-10.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/hero-11.json b/public/r/styles/base-sera/hero-11.json
index dcb5f5ffc..86a7f5e03 100644
--- a/public/r/styles/base-sera/hero-11.json
+++ b/public/r/styles/base-sera/hero-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-11.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating value={socialProof.rating} />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/hero-12.json b/public/r/styles/base-sera/hero-12.json
index fb5fd9794..a88805751 100644
--- a/public/r/styles/base-sera/hero-12.json
+++ b/public/r/styles/base-sera/hero-12.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-12.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/hero-13.json b/public/r/styles/base-sera/hero-13.json
index c30e39ca1..f25d55373 100644
--- a/public/r/styles/base-sera/hero-13.json
+++ b/public/r/styles/base-sera/hero-13.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-13.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/hero-2.json b/public/r/styles/base-sera/hero-2.json
index c4b5093a0..672b023de 100644
--- a/public/r/styles/base-sera/hero-2.json
+++ b/public/r/styles/base-sera/hero-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating value={socialProof.rating} />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/hero-3.json b/public/r/styles/base-sera/hero-3.json
index c2dc41368..03cde7001 100644
--- a/public/r/styles/base-sera/hero-3.json
+++ b/public/r/styles/base-sera/hero-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/hero-4.json b/public/r/styles/base-sera/hero-4.json
index 76565d570..ccdf499cf 100644
--- a/public/r/styles/base-sera/hero-4.json
+++ b/public/r/styles/base-sera/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/hero-5.json b/public/r/styles/base-sera/hero-5.json
index ae42c57cb..a11173eff 100644
--- a/public/r/styles/base-sera/hero-5.json
+++ b/public/r/styles/base-sera/hero-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/hero-6.json b/public/r/styles/base-sera/hero-6.json
index 8ac3412a2..f458c5879 100644
--- a/public/r/styles/base-sera/hero-6.json
+++ b/public/r/styles/base-sera/hero-6.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/hero-7.json b/public/r/styles/base-sera/hero-7.json
index fec1634cc..e417ccade 100644
--- a/public/r/styles/base-sera/hero-7.json
+++ b/public/r/styles/base-sera/hero-7.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/hero-8.json b/public/r/styles/base-sera/hero-8.json
index 3e484825c..a3db6ba64 100644
--- a/public/r/styles/base-sera/hero-8.json
+++ b/public/r/styles/base-sera/hero-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-8.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/hero-9.json b/public/r/styles/base-sera/hero-9.json
index 8bbbab3b8..22397aa77 100644
--- a/public/r/styles/base-sera/hero-9.json
+++ b/public/r/styles/base-sera/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/links-2.json b/public/r/styles/base-sera/links-2.json
index 3d1b59a93..9e1d20ae8 100644
--- a/public/r/styles/base-sera/links-2.json
+++ b/public/r/styles/base-sera/links-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/links-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n    preview?: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/logos-1.json b/public/r/styles/base-sera/logos-1.json
index 19dcad093..de017ff6a 100644
--- a/public/r/styles/base-sera/logos-1.json
+++ b/public/r/styles/base-sera/logos-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/logos-2.json b/public/r/styles/base-sera/logos-2.json
index 49feb4f1a..3d3960693 100644
--- a/public/r/styles/base-sera/logos-2.json
+++ b/public/r/styles/base-sera/logos-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/pricing-1.json b/public/r/styles/base-sera/pricing-1.json
index ec4c2a50e..69ddbb891 100644
--- a/public/r/styles/base-sera/pricing-1.json
+++ b/public/r/styles/base-sera/pricing-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>Popular</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={\n                plan.button.variant ?? (plan.featured ? \"default\" : \"outline\")\n              }\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/pricing-2.json b/public/r/styles/base-sera/pricing-2.json
index d474a8d12..6f6a446c3 100644
--- a/public/r/styles/base-sera/pricing-2.json
+++ b/public/r/styles/base-sera/pricing-2.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={\n                plan.button.variant ?? (index === 0 ? \"outline\" : \"default\")\n              }\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={index === 0 ? \"outline\" : \"default\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/pricing-3.json b/public/r/styles/base-sera/pricing-3.json
index f924ce05f..cf14ce08c 100644
--- a/public/r/styles/base-sera/pricing-3.json
+++ b/public/r/styles/base-sera/pricing-3.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button\n          as=\"a\"\n          href={offer.button.href}\n          variant={offer.button.variant ?? \"default\"}\n          class=\"w-full\"\n        >\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/product-1.json b/public/r/styles/base-sera/product-1.json
index 69e448d08..74777c9da 100644
--- a/public/r/styles/base-sera/product-1.json
+++ b/public/r/styles/base-sera/product-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/product-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/products-4.json b/public/r/styles/base-sera/products-4.json
index b5deb3d87..5c64e3d1f 100644
--- a/public/r/styles/base-sera/products-4.json
+++ b/public/r/styles/base-sera/products-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/products-5.json b/public/r/styles/base-sera/products-5.json
index d0bae90d8..c9420d383 100644
--- a/public/r/styles/base-sera/products-5.json
+++ b/public/r/styles/base-sera/products-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/registry.json b/public/r/styles/base-sera/registry.json
index 781efe275..ff9ec1227 100644
--- a/public/r/styles/base-sera/registry.json
+++ b/public/r/styles/base-sera/registry.json
@@ -2535,7 +2535,6 @@
       "docs": "https://ui.full.dev/blocks/article/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2556,7 +2555,6 @@
       "docs": "https://ui.full.dev/blocks/article/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2577,7 +2575,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2619,7 +2616,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2640,7 +2636,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -3257,7 +3252,6 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
@@ -3324,7 +3318,6 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
@@ -3431,6 +3424,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3455,6 +3451,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3479,6 +3478,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3504,6 +3506,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3528,6 +3533,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -4376,7 +4384,6 @@
       ],
       "registryDependencies": [
         "@fulldev/badge",
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
diff --git a/public/r/styles/base-sera/reviews-1.json b/public/r/styles/base-sera/reviews-1.json
index ac00928ae..1a508f17b 100644
--- a/public/r/styles/base-sera/reviews-1.json
+++ b/public/r/styles/base-sera/reviews-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/reviews-2.json b/public/r/styles/base-sera/reviews-2.json
index 353359080..d5ae29850 100644
--- a/public/r/styles/base-sera/reviews-2.json
+++ b/public/r/styles/base-sera/reviews-2.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/reviews-3.json b/public/r/styles/base-sera/reviews-3.json
index 7642fe047..e58b82609 100644
--- a/public/r/styles/base-sera/reviews-3.json
+++ b/public/r/styles/base-sera/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  previousLabel: string\n  nextLabel: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  previousLabel,\n  nextLabel,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{previousLabel}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{nextLabel}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/reviews-4.json b/public/r/styles/base-sera/reviews-4.json
index c7bab1225..03ac5fc3e 100644
--- a/public/r/styles/base-sera/reviews-4.json
+++ b/public/r/styles/base-sera/reviews-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/reviews-5.json b/public/r/styles/base-sera/reviews-5.json
index 0369cd763..8b3458106 100644
--- a/public/r/styles/base-sera/reviews-5.json
+++ b/public/r/styles/base-sera/reviews-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/services-1.json b/public/r/styles/base-sera/services-1.json
index 3fef88847..4d5ac713e 100644
--- a/public/r/styles/base-sera/services-1.json
+++ b/public/r/styles/base-sera/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href != null && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/services-2.json b/public/r/styles/base-sera/services-2.json
index 22252912d..f2b3db6bc 100644
--- a/public/r/styles/base-sera/services-2.json
+++ b/public/r/styles/base-sera/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/services-3.json b/public/r/styles/base-sera/services-3.json
index 6f77bedb6..f259c104f 100644
--- a/public/r/styles/base-sera/services-3.json
+++ b/public/r/styles/base-sera/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/services-4.json b/public/r/styles/base-sera/services-4.json
index 112b8fe30..d357efabf 100644
--- a/public/r/styles/base-sera/services-4.json
+++ b/public/r/styles/base-sera/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/services-5.json b/public/r/styles/base-sera/services-5.json
index 02476c58a..def369794 100644
--- a/public/r/styles/base-sera/services-5.json
+++ b/public/r/styles/base-sera/services-5.json
@@ -8,14 +8,13 @@
   ],
   "registryDependencies": [
     "@fulldev/badge",
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/services-6.json b/public/r/styles/base-sera/services-6.json
index 76d0bd582..70206a046 100644
--- a/public/r/styles/base-sera/services-6.json
+++ b/public/r/styles/base-sera/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/services-7.json b/public/r/styles/base-sera/services-7.json
index 091def64d..623952170 100644
--- a/public/r/styles/base-sera/services-7.json
+++ b/public/r/styles/base-sera/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 1024px) 66vw, 100vw\"\n                  : \"(min-width: 1024px) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/sidebar-1.json b/public/r/styles/base-sera/sidebar-1.json
index 66f778967..3476f325b 100644
--- a/public/r/styles/base-sera/sidebar-1.json
+++ b/public/r/styles/base-sera/sidebar-1.json
@@ -22,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? \"Stars\"\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebar: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar\n    class={cn(\"\", className)}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebar} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={labels.github}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/sidebar.json b/public/r/styles/base-sera/sidebar.json
index e1d636c97..afd7e66b7 100644
--- a/public/r/styles/base-sera/sidebar.json
+++ b/public/r/styles/base-sera/sidebar.json
@@ -24,7 +24,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>Sidebar</SheetTitle>\n          <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/article-1.json b/public/r/styles/base-vega/article-1.json
index 6bdf16d1f..c45df6988 100644
--- a/public/r/styles/base-vega/article-1.json
+++ b/public/r/styles/base-vega/article-1.json
@@ -5,13 +5,12 @@
   "description": "Editorial article layouts for long-form stories, interviews, and analysis.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/article-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      {badge && (\n        <Badge variant=\"secondary\" class=\"w-fit\">\n          {badge}\n        </Badge>\n      )}\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/article-2.json b/public/r/styles/base-vega/article-2.json
index 01da358a6..6511245f3 100644
--- a/public/r/styles/base-vega/article-2.json
+++ b/public/r/styles/base-vega/article-2.json
@@ -5,13 +5,12 @@
   "description": "Editorial article layouts for long-form stories, interviews, and analysis.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/article-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/articles-1.json b/public/r/styles/base-vega/articles-1.json
index e742cb898..30aa52bd2 100644
--- a/public/r/styles/base-vega/articles-1.json
+++ b/public/r/styles/base-vega/articles-1.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      {badge && (\n        <Badge variant=\"secondary\" class=\"w-fit\">\n          {badge}\n        </Badge>\n      )}\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720, 960]}\n            sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/articles-2.json b/public/r/styles/base-vega/articles-2.json
index 266269748..a9d78a9f5 100644
--- a/public/r/styles/base-vega/articles-2.json
+++ b/public/r/styles/base-vega/articles-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class={cn(\n          \"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\",\n          badge && \"mt-4\"\n        )}\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <a\n      href={featured.href ?? \"#\"}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </a>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720]}\n            sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/articles-3.json b/public/r/styles/base-vega/articles-3.json
index aecb82d0d..e4182724a 100644
--- a/public/r/styles/base-vega/articles-3.json
+++ b/public/r/styles/base-vega/articles-3.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        {badge && (\n          <Badge variant=\"secondary\" class=\"w-fit\">\n            {badge}\n          </Badge>\n        )}\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <Image\n            src={article.image.src}\n            alt={article.image.alt}\n            class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n            widths={[480, 720]}\n            sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/articles-4.json b/public/r/styles/base-vega/articles-4.json
index 222f11bc5..b0c908073 100644
--- a/public/r/styles/base-vega/articles-4.json
+++ b/public/r/styles/base-vega/articles-4.json
@@ -5,13 +5,12 @@
   "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class={cn(\n          \"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\",\n          badge && \"mt-4\"\n        )}\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => (\n        <a\n          href={article.href ?? \"#\"}\n          class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <div class=\"flex flex-col gap-2\">\n            <p class=\"text-muted-foreground text-sm font-medium\">\n              {article.category}\n            </p>\n            <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n              {article.title}\n            </h3>\n            <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n              {article.description}\n            </p>\n          </div>\n          <div class=\"mt-auto flex items-center gap-3\">\n            <Avatar>\n              <AvatarImage\n                src={article.author.image}\n                alt={article.author.name}\n              />\n              <AvatarFallback>{article.author.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"flex flex-col\">\n              <p class=\"text-sm font-medium\">{article.author.name}</p>\n              <p class=\"text-muted-foreground text-xs\">{article.author.date}</p>\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/banner-1.json b/public/r/styles/base-vega/banner-1.json
index f83aa2ac3..3d0e3d2b1 100644
--- a/public/r/styles/base-vega/banner-1.json
+++ b/public/r/styles/base-vega/banner-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  link?: {\n    label: string\n    href: string\n  }\n}\n\nconst { class: className, title, description, link, ...props } = Astro.props\n---\n\n<Banner\n  storageKey=\"banner-1\"\n  class={cn(\"dark bg-background text-foreground\", className)}\n  {...props}\n>\n  <BannerContainer class=\"flex-row items-center gap-x-4 gap-y-1\">\n    <p class=\"text-sm leading-relaxed\">\n      <span class=\"font-semibold\">{title}</span>{\" \"}\n      <span class=\"mx-1.5 hidden opacity-50 sm:inline\">&mdash;</span>{\" \"}\n      <span class=\"opacity-80\">{description}</span>\n    </p>\n    {link && (\n      <a\n        href={link.href}\n        class=\"group/link inline-flex shrink-0 items-center gap-1 text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80\"\n      >\n        {link.label}\n        <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/link:translate-x-0.5\" />\n      </a>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  link: {\n    label: string\n    href: string\n  }\n  closeLabel: string\n  storageKey?: string\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  link,\n  closeLabel,\n  storageKey,\n  ...props\n} = Astro.props\n---\n\n<Banner\n  storageKey={storageKey}\n  class={cn(\"dark bg-background text-foreground\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-row items-center gap-x-4 gap-y-1\"\n    closeLabel={closeLabel}\n  >\n    <p class=\"text-sm leading-relaxed\">\n      <span class=\"font-semibold\">{title}</span>{\" \"}\n      <span class=\"mx-1.5 hidden opacity-50 sm:inline\">&middot;</span>{\" \"}\n      <span class=\"opacity-80\">{description}</span>\n    </p>\n    <a\n      href={link.href}\n      class=\"group/link inline-flex shrink-0 items-center gap-1 text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80\"\n    >\n      {link.label}\n      <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/link:translate-x-0.5\" />\n    </a>\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/banner-2.json b/public/r/styles/base-vega/banner-2.json
index 6ea880320..eb1d06077 100644
--- a/public/r/styles/base-vega/banner-2.json
+++ b/public/r/styles/base-vega/banner-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/banner-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"@container\", className)}\n  {...props}\n>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap items-center gap-2\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"sm\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner variant=\"floating\" class={cn(\"@container\", className)} {...props}>\n  <BannerContainer\n    class=\"flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center\"\n    showClose={false}\n  >\n    <div class=\"flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\">\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"sm\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/banner.json b/public/r/styles/base-vega/banner.json
index ad6f6745e..d3a8e8580 100644
--- a/public/r/styles/base-vega/banner.json
+++ b/public/r/styles/base-vega/banner.json
@@ -14,7 +14,7 @@
     },
     {
       "path": "src/components/ui/banner/banner-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst {\n  class: className,\n  showClose = true,\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-sm text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label=\"Close\"\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">Close</span>\n    </button>\n  )}\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n  closeLabel?: string\n}\n\nconst {\n  class: className,\n  showClose = true,\n  closeLabel = \"Close\",\n  \"data-slot\": dataSlot = \"banner-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] gap-4 px-[var(--gutter,--spacing(4))]\",\n    showClose && \"pr-10\",\n    className\n  )}\n  data-slot={dataSlot}\n  {...props}\n>\n  <slot />\n  {showClose && (\n    <button\n      type=\"button\"\n      class=\"rounded-sm text-current/65 hover:text-current focus-visible:text-current focus-visible:ring-2 focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 in-[[data-variant=floating]]:right-5\"\n      aria-label={closeLabel}\n      data-slot=\"banner-close\"\n    >\n      <XIcon class=\"size-4\" />\n      <span class=\"sr-only\">{closeLabel}</span>\n    </button>\n  )}\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/blocks-1.json b/public/r/styles/base-vega/blocks-1.json
index 5f875b246..a0da615ca 100644
--- a/public/r/styles/base-vega/blocks-1.json
+++ b/public/r/styles/base-vega/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead class=\"max-w-2xl text-base leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/breadcrumb.json b/public/r/styles/base-vega/breadcrumb.json
index e97c174a8..ada28b337 100644
--- a/public/r/styles/base-vega/breadcrumb.json
+++ b/public/r/styles/base-vega/breadcrumb.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/ui/breadcrumb/breadcrumb.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"nav\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<nav\n  aria-label=\"breadcrumb\"\n  data-slot=\"breadcrumb\"\n  class={cn(className)}\n  {...props}\n>\n  <slot />\n</nav>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"nav\">\n\nconst {\n  class: className,\n  \"aria-label\": ariaLabel = \"breadcrumb\",\n  ...props\n} = Astro.props\n---\n\n<nav\n  aria-label={ariaLabel}\n  data-slot=\"breadcrumb\"\n  class={cn(className)}\n  {...props}\n>\n  <slot />\n</nav>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/contact-3.json b/public/r/styles/base-vega/contact-3.json
index 5a344d9fc..15a42d48f 100644
--- a/public/r/styles/base-vega/contact-3.json
+++ b/public/r/styles/base-vega/contact-3.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/contact-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"Contact image\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/content-1.json b/public/r/styles/base-vega/content-1.json
index 9bd4e3cc6..37cc98379 100644
--- a/public/r/styles/base-vega/content-1.json
+++ b/public/r/styles/base-vega/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {features && features.length > 0 && (\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n    )}\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-3 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/content-2.json b/public/r/styles/base-vega/content-2.json
index 14af2df66..693b5d9bb 100644
--- a/public/r/styles/base-vega/content-2.json
+++ b/public/r/styles/base-vega/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/content-3.json b/public/r/styles/base-vega/content-3.json
index 6ae269ebc..fdc0b7afd 100644
--- a/public/r/styles/base-vega/content-3.json
+++ b/public/r/styles/base-vega/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/content-4.json b/public/r/styles/base-vega/content-4.json
index 09aa3dfbf..4dd1cd6f3 100644
--- a/public/r/styles/base-vega/content-4.json
+++ b/public/r/styles/base-vega/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"Content image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        {features && features.length > 0 && (\n          <ul class=\"flex flex-col gap-3\">\n            {features.map((feature) => (\n              <li class=\"flex items-center gap-3 text-sm\">\n                <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                {feature}\n              </li>\n            ))}\n          </ul>\n        )}\n        {buttons && buttons.length > 0 && (\n          <div class=\"flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/cta-1.json b/public/r/styles/base-vega/cta-1.json
index d4b30fd2d..880fa60eb 100644
--- a/public/r/styles/base-vega/cta-1.json
+++ b/public/r/styles/base-vega/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/cta-2.json b/public/r/styles/base-vega/cta-2.json
index 458de6318..05cfb2687 100644
--- a/public/r/styles/base-vega/cta-2.json
+++ b/public/r/styles/base-vega/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/cta-3.json b/public/r/styles/base-vega/cta-3.json
index dba896177..caf08c91a 100644
--- a/public/r/styles/base-vega/cta-3.json
+++ b/public/r/styles/base-vega/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/cta-4.json b/public/r/styles/base-vega/cta-4.json
index 244bfa2cd..2ed196c48 100644
--- a/public/r/styles/base-vega/cta-4.json
+++ b/public/r/styles/base-vega/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/cta-5.json b/public/r/styles/base-vega/cta-5.json
index 9c655d7ac..39ff0c7bb 100644
--- a/public/r/styles/base-vega/cta-5.json
+++ b/public/r/styles/base-vega/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features?: string[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features && features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/cta-6.json b/public/r/styles/base-vega/cta-6.json
index 8b4d735ee..cbd7368fe 100644
--- a/public/r/styles/base-vega/cta-6.json
+++ b/public/r/styles/base-vega/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"CTA image\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n      {socialProof && (\n        <div class=\"flex items-center gap-3\">\n          <AvatarGroup>\n            {socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-10 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n          <div class=\"flex flex-col gap-0.5\">\n            <Rating value={socialProof.rating} />\n            <span class=\"text-muted-foreground text-xs\">\n              {socialProof.text}\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/cta-7.json b/public/r/styles/base-vega/cta-7.json
index 961d6855d..86813e6c0 100644
--- a/public/r/styles/base-vega/cta-7.json
+++ b/public/r/styles/base-vega/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    rating?: number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-4\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n          {socialProof.count && (\n            <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n              {socialProof.count}\n            </AvatarGroupCount>\n          )}\n        </AvatarGroup>\n        <span class=\"text-muted-foreground text-sm leading-snug\">\n          {socialProof.text.replace(/\\s+/g, \" \")}\n        </span>\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-muted-foreground text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/cta-8.json b/public/r/styles/base-vega/cta-8.json
index 4b2d77e41..eaac34d78 100644
--- a/public/r/styles/base-vega/cta-8.json
+++ b/public/r/styles/base-vega/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/doc-1.json b/public/r/styles/base-vega/doc-1.json
index 4806861e6..9c98b34f9 100644
--- a/public/r/styles/base-vega/doc-1.json
+++ b/public/r/styles/base-vega/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        {description && (\n          <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n            {description}\n          </TypographyLead>\n        )}\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" size=\"sm\" data-doc-content>\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination.ariaLabel}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant={callout.button.variant}\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document.querySelectorAll(\"[data-doc-content] > pre\").forEach((pre) => {\n      if (pre.closest(\".docs-code-block\")) return\n      const wrapper = document.createElement(\"div\")\n      const button = document.createElement(\"button\")\n      wrapper.className = \"docs-code-block\"\n      wrapper.dataset.notTypeset = \"\"\n      button.type = \"button\"\n      button.className = \"docs-code-copy\"\n      button.ariaLabel = \"Copy code\"\n      button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n      pre.before(wrapper)\n      wrapper.append(pre, button)\n    })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/faqs-1.json b/public/r/styles/base-vega/faqs-1.json
index e33726343..92d59430a 100644
--- a/public/r/styles/base-vega/faqs-1.json
+++ b/public/r/styles/base-vega/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/faqs-2.json b/public/r/styles/base-vega/faqs-2.json
index 5d669bafe..7662c1100 100644
--- a/public/r/styles/base-vega/faqs-2.json
+++ b/public/r/styles/base-vega/faqs-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-8 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                size=\"lg\"\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16\">\n      <div class=\"lg:sticky lg:top-24 lg:self-start\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-8 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n\n      <div>\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/faqs-3.json b/public/r/styles/base-vega/faqs-3.json
index 794ef5a59..a0d634566 100644
--- a/public/r/styles/base-vega/faqs-3.json
+++ b/public/r/styles/base-vega/faqs-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/features-1.json b/public/r/styles/base-vega/features-1.json
index e4cd92254..585c6b7f2 100644
--- a/public/r/styles/base-vega/features-1.json
+++ b/public/r/styles/base-vega/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/features-2.json b/public/r/styles/base-vega/features-2.json
index 51c9a088e..467338413 100644
--- a/public/r/styles/base-vega/features-2.json
+++ b/public/r/styles/base-vega/features-2.json
@@ -7,14 +7,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/features-4.json b/public/r/styles/base-vega/features-4.json
index 6210bc332..6cadcba43 100644
--- a/public/r/styles/base-vega/features-4.json
+++ b/public/r/styles/base-vega/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        {buttons && buttons.length > 0 && (\n          <div class=\"mt-6 flex flex-wrap gap-3\">\n            {buttons.map(({ href, label, ...button }, index) => (\n              <Button\n                as=\"a\"\n                href={href}\n                variant={\n                  button.variant ?? (index === 0 ? \"default\" : \"outline\")\n                }\n                {...button}\n              >\n                {label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/features-5.json b/public/r/styles/base-vega/features-5.json
index 8575743db..61eba406f 100644
--- a/public/r/styles/base-vega/features-5.json
+++ b/public/r/styles/base-vega/features-5.json
@@ -7,14 +7,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/features-6.json b/public/r/styles/base-vega/features-6.json
index 5e729533e..d21ff5c93 100644
--- a/public/r/styles/base-vega/features-6.json
+++ b/public/r/styles/base-vega/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-2 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/footer-1.json b/public/r/styles/base-vega/footer-1.json
index 3d06945e5..7ac3e8331 100644
--- a/public/r/styles/base-vega/footer-1.json
+++ b/public/r/styles/base-vega/footer-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials && socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/footer-2.json b/public/r/styles/base-vega/footer-2.json
index 2820c1f64..217f595bb 100644
--- a/public/r/styles/base-vega/footer-2.json
+++ b/public/r/styles/base-vega/footer-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links?: {\n    label: string\n    href: string\n  }[]\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel?: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel = \"Footer navigation\",\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      {links && links.length > 0 && (\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n        >\n          {links.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      )}\n      {socials && socials.length > 0 && (\n        <div class=\"flex items-center justify-center gap-3\">\n          {socials.map((social) => (\n            <a\n              href={social.href}\n              class=\"text-muted-foreground hover:text-foreground transition-colors\"\n              aria-label={social.label}\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              <Icon name={social.icon} href={social.href} class=\"size-4\" />\n            </a>\n          ))}\n        </div>\n      )}\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      <div class=\"flex items-center justify-center gap-3\">\n        {socials.map((social) => (\n          <a\n            href={social.href}\n            class=\"text-muted-foreground hover:text-foreground transition-colors\"\n            aria-label={social.label}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n          >\n            <Icon name={social.icon} href={social.href} class=\"size-4\" />\n          </a>\n        ))}\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/footer-3.json b/public/r/styles/base-vega/footer-3.json
index 6c9882990..b5bc278e9 100644
--- a/public/r/styles/base-vega/footer-3.json
+++ b/public/r/styles/base-vega/footer-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials?: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks?: {\n    label: string\n    href: string\n  }[]\n  navigationLabel?: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel = \"Footer navigation\",\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials && socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        {bottomLinks && bottomLinks.length > 0 && (\n          <nav\n            aria-label={navigationLabel}\n            class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n          >\n            {bottomLinks.map((link) => (\n              <a\n                href={link.href}\n                class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                {link.label}\n              </a>\n            ))}\n          </nav>\n        )}\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/header-1.json b/public/r/styles/base-vega/header-1.json
index 8baebe0f5..5b7896a87 100644
--- a/public/r/styles/base-vega/header-1.json
+++ b/public/r/styles/base-vega/header-1.json
@@ -3,6 +3,9 @@
   "name": "header-1",
   "title": "Header 1",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/header-2.json b/public/r/styles/base-vega/header-2.json
index a1039f8b2..6a35ca3c4 100644
--- a/public/r/styles/base-vega/header-2.json
+++ b/public/r/styles/base-vega/header-2.json
@@ -3,6 +3,9 @@
   "name": "header-2",
   "title": "Header 2",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/header-3.json b/public/r/styles/base-vega/header-3.json
index e511a92e7..70418bc87 100644
--- a/public/r/styles/base-vega/header-3.json
+++ b/public/r/styles/base-vega/header-3.json
@@ -3,6 +3,9 @@
   "name": "header-3",
   "title": "Header 3",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -15,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/header-4.json b/public/r/styles/base-vega/header-4.json
index 3bd445ad1..0a7d02adf 100644
--- a/public/r/styles/base-vega/header-4.json
+++ b/public/r/styles/base-vega/header-4.json
@@ -3,6 +3,9 @@
   "name": "header-4",
   "title": "Header 4",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -14,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/header-5.json b/public/r/styles/base-vega/header-5.json
index 5f781e13c..97bc283a6 100644
--- a/public/r/styles/base-vega/header-5.json
+++ b/public/r/styles/base-vega/header-5.json
@@ -3,6 +3,9 @@
   "name": "header-5",
   "title": "Header 5",
   "description": "Header layouts for brand, navigation, and high-level page actions.",
+  "dependencies": [
+    "@lucide/astro"
+  ],
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -15,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  navigationLabel?: string\n  menu?: {\n    label: string\n    title: string\n    description: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel = \"Main navigation\",\n  menu = {\n    label: \"Open menu\",\n    title: \"Menu\",\n    description: \"Site navigation and actions.\",\n  },\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, icon, ...button }) => (\n        <Button\n          as=\"a\"\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          aria-label={label}\n          target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n          {...button}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/hero-1.json b/public/r/styles/base-vega/hero-1.json
index fd7eef979..74dc8b92d 100644
--- a/public/r/styles/base-vega/hero-1.json
+++ b/public/r/styles/base-vega/hero-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge?: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    {badge && (\n      <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n        {badge.label}\n      </Badge>\n    )}\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n      {badge.label}\n    </Badge>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/hero-10.json b/public/r/styles/base-vega/hero-10.json
index 1d044e3e4..96ed3c089 100644
--- a/public/r/styles/base-vega/hero-10.json
+++ b/public/r/styles/base-vega/hero-10.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-10.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/hero-11.json b/public/r/styles/base-vega/hero-11.json
index dcb5f5ffc..86a7f5e03 100644
--- a/public/r/styles/base-vega/hero-11.json
+++ b/public/r/styles/base-vega/hero-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-11.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating value={socialProof.rating} />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/hero-12.json b/public/r/styles/base-vega/hero-12.json
index fb5fd9794..a88805751 100644
--- a/public/r/styles/base-vega/hero-12.json
+++ b/public/r/styles/base-vega/hero-12.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-12.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/hero-13.json b/public/r/styles/base-vega/hero-13.json
index c30e39ca1..f25d55373 100644
--- a/public/r/styles/base-vega/hero-13.json
+++ b/public/r/styles/base-vega/hero-13.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-13.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/hero-2.json b/public/r/styles/base-vega/hero-2.json
index c4b5093a0..672b023de 100644
--- a/public/r/styles/base-vega/hero-2.json
+++ b/public/r/styles/base-vega/hero-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating value={socialProof.rating} />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/hero-3.json b/public/r/styles/base-vega/hero-3.json
index c2dc41368..03cde7001 100644
--- a/public/r/styles/base-vega/hero-3.json
+++ b/public/r/styles/base-vega/hero-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/hero-4.json b/public/r/styles/base-vega/hero-4.json
index 76565d570..ccdf499cf 100644
--- a/public/r/styles/base-vega/hero-4.json
+++ b/public/r/styles/base-vega/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label, ...button }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n          {...button}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/hero-5.json b/public/r/styles/base-vega/hero-5.json
index ae42c57cb..a11173eff 100644
--- a/public/r/styles/base-vega/hero-5.json
+++ b/public/r/styles/base-vega/hero-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/hero-6.json b/public/r/styles/base-vega/hero-6.json
index 8ac3412a2..f458c5879 100644
--- a/public/r/styles/base-vega/hero-6.json
+++ b/public/r/styles/base-vega/hero-6.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/hero-7.json b/public/r/styles/base-vega/hero-7.json
index fec1634cc..e417ccade 100644
--- a/public/r/styles/base-vega/hero-7.json
+++ b/public/r/styles/base-vega/hero-7.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/hero-8.json b/public/r/styles/base-vega/hero-8.json
index 3e484825c..a3db6ba64 100644
--- a/public/r/styles/base-vega/hero-8.json
+++ b/public/r/styles/base-vega/hero-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-8.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/hero-9.json b/public/r/styles/base-vega/hero-9.json
index 8bbbab3b8..22397aa77 100644
--- a/public/r/styles/base-vega/hero-9.json
+++ b/public/r/styles/base-vega/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/links-2.json b/public/r/styles/base-vega/links-2.json
index 3d1b59a93..9e1d20ae8 100644
--- a/public/r/styles/base-vega/links-2.json
+++ b/public/r/styles/base-vega/links-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/links-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n    preview?: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/logos-1.json b/public/r/styles/base-vega/logos-1.json
index 19dcad093..de017ff6a 100644
--- a/public/r/styles/base-vega/logos-1.json
+++ b/public/r/styles/base-vega/logos-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/logos-2.json b/public/r/styles/base-vega/logos-2.json
index 49feb4f1a..3d3960693 100644
--- a/public/r/styles/base-vega/logos-2.json
+++ b/public/r/styles/base-vega/logos-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/pricing-1.json b/public/r/styles/base-vega/pricing-1.json
index ec4c2a50e..69ddbb891 100644
--- a/public/r/styles/base-vega/pricing-1.json
+++ b/public/r/styles/base-vega/pricing-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>Popular</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={\n                plan.button.variant ?? (plan.featured ? \"default\" : \"outline\")\n              }\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/pricing-2.json b/public/r/styles/base-vega/pricing-2.json
index d474a8d12..6f6a446c3 100644
--- a/public/r/styles/base-vega/pricing-2.json
+++ b/public/r/styles/base-vega/pricing-2.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={\n                plan.button.variant ?? (index === 0 ? \"outline\" : \"default\")\n              }\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={index === 0 ? \"outline\" : \"default\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/pricing-3.json b/public/r/styles/base-vega/pricing-3.json
index f924ce05f..cf14ce08c 100644
--- a/public/r/styles/base-vega/pricing-3.json
+++ b/public/r/styles/base-vega/pricing-3.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n      variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle>{title}</SectionTitle>\n      {description && <SectionDescription>{description}</SectionDescription>}\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button\n          as=\"a\"\n          href={offer.button.href}\n          variant={offer.button.variant ?? \"default\"}\n          class=\"w-full\"\n        >\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/product-1.json b/public/r/styles/base-vega/product-1.json
index 69e448d08..74777c9da 100644
--- a/public/r/styles/base-vega/product-1.json
+++ b/public/r/styles/base-vega/product-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/product-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/products-4.json b/public/r/styles/base-vega/products-4.json
index b5deb3d87..5c64e3d1f 100644
--- a/public/r/styles/base-vega/products-4.json
+++ b/public/r/styles/base-vega/products-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/products-5.json b/public/r/styles/base-vega/products-5.json
index d0bae90d8..c9420d383 100644
--- a/public/r/styles/base-vega/products-5.json
+++ b/public/r/styles/base-vega/products-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label, ...button }) => (\n          <Button as=\"a\" href={href} variant={button.variant}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/registry.json b/public/r/styles/base-vega/registry.json
index ea0465cff..e5fcf8263 100644
--- a/public/r/styles/base-vega/registry.json
+++ b/public/r/styles/base-vega/registry.json
@@ -2535,7 +2535,6 @@
       "docs": "https://ui.full.dev/blocks/article/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2556,7 +2555,6 @@
       "docs": "https://ui.full.dev/blocks/article/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2577,7 +2575,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2619,7 +2616,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -2640,7 +2636,6 @@
       "docs": "https://ui.full.dev/blocks/articles/",
       "registryDependencies": [
         "@fulldev/avatar",
-        "@fulldev/badge",
         "@fulldev/section"
       ],
       "files": [
@@ -3257,7 +3252,6 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
@@ -3324,7 +3318,6 @@
         "@lucide/astro"
       ],
       "registryDependencies": [
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
@@ -3431,6 +3424,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3455,6 +3451,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3479,6 +3478,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3504,6 +3506,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -3528,6 +3533,9 @@
         "header"
       ],
       "docs": "https://ui.full.dev/blocks/header/",
+      "dependencies": [
+        "@lucide/astro"
+      ],
       "registryDependencies": [
         "@fulldev/button",
         "@fulldev/header",
@@ -4376,7 +4384,6 @@
       ],
       "registryDependencies": [
         "@fulldev/badge",
-        "@fulldev/button",
         "@fulldev/icon",
         "@fulldev/section"
       ],
diff --git a/public/r/styles/base-vega/reviews-1.json b/public/r/styles/base-vega/reviews-1.json
index ac00928ae..1a508f17b 100644
--- a/public/r/styles/base-vega/reviews-1.json
+++ b/public/r/styles/base-vega/reviews-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/reviews-2.json b/public/r/styles/base-vega/reviews-2.json
index 353359080..d5ae29850 100644
--- a/public/r/styles/base-vega/reviews-2.json
+++ b/public/r/styles/base-vega/reviews-2.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/reviews-3.json b/public/r/styles/base-vega/reviews-3.json
index 7642fe047..e58b82609 100644
--- a/public/r/styles/base-vega/reviews-3.json
+++ b/public/r/styles/base-vega/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  previousLabel: string\n  nextLabel: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  previousLabel,\n  nextLabel,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{previousLabel}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{nextLabel}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/reviews-4.json b/public/r/styles/base-vega/reviews-4.json
index c7bab1225..03ac5fc3e 100644
--- a/public/r/styles/base-vega/reviews-4.json
+++ b/public/r/styles/base-vega/reviews-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    rating: number\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/reviews-5.json b/public/r/styles/base-vega/reviews-5.json
index 0369cd763..8b3458106 100644
--- a/public/r/styles/base-vega/reviews-5.json
+++ b/public/r/styles/base-vega/reviews-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title?: string\n  description?: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  {(title || description) && (\n    <SectionContainer class=\"items-center gap-4 text-center\">\n      {title && <SectionTitle>{title}</SectionTitle>}\n      {description && (\n        <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n      )}\n    </SectionContainer>\n  )}\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/services-1.json b/public/r/styles/base-vega/services-1.json
index 3fef88847..4d5ac713e 100644
--- a/public/r/styles/base-vega/services-1.json
+++ b/public/r/styles/base-vega/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              {service.label && (\n                <span class=\"text-primary text-xs font-medium\">\n                  {service.label}\n                </span>\n              )}\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href != null && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/services-2.json b/public/r/styles/base-vega/services-2.json
index 22252912d..f2b3db6bc 100644
--- a/public/r/styles/base-vega/services-2.json
+++ b/public/r/styles/base-vega/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            {service.label && (\n              <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n                {service.label}\n              </span>\n            )}\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-1 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/services-3.json b/public/r/styles/base-vega/services-3.json
index 6f77bedb6..f259c104f 100644
--- a/public/r/styles/base-vega/services-3.json
+++ b/public/r/styles/base-vega/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            {service.button && (\n              <Button\n                as=\"a\"\n                href={service.button.href}\n                variant=\"secondary\"\n                class=\"mt-2 w-fit\"\n              >\n                {service.button.label}\n              </Button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/services-4.json b/public/r/styles/base-vega/services-4.json
index 112b8fe30..d357efabf 100644
--- a/public/r/styles/base-vega/services-4.json
+++ b/public/r/styles/base-vega/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/services-5.json b/public/r/styles/base-vega/services-5.json
index 02476c58a..def369794 100644
--- a/public/r/styles/base-vega/services-5.json
+++ b/public/r/styles/base-vega/services-5.json
@@ -8,14 +8,13 @@
   ],
   "registryDependencies": [
     "@fulldev/badge",
-    "@fulldev/button",
     "@fulldev/icon",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    icon?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon ?? \"layout-grid\"} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/services-6.json b/public/r/styles/base-vega/services-6.json
index 76d0bd582..70206a046 100644
--- a/public/r/styles/base-vega/services-6.json
+++ b/public/r/styles/base-vega/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      {description && (\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          {description}\n        </p>\n      )}\n      {buttons && buttons.length > 0 && (\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/services-7.json b/public/r/styles/base-vega/services-7.json
index 091def64d..623952170 100644
--- a/public/r/styles/base-vega/services-7.json
+++ b/public/r/styles/base-vega/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description?: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label?: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        {description && (\n          <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n            {description}\n          </p>\n        )}\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label, ...button }) => (\n            <Button as=\"a\" href={href} variant={button.variant}>\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => (\n        <a\n          href={service.href ?? \"#\"}\n          class={cn(\n            \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n            index === 0 && \"lg:col-span-2 lg:row-span-2\"\n          )}\n        >\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class={cn(\n              \"w-full object-cover\",\n              index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n            )}\n            widths={[320, 480, 640, 960]}\n            sizes={\n              index === 0\n                ? \"(min-width: 1024px) 66vw, 100vw\"\n                : \"(min-width: 1024px) 33vw, 100vw\"\n            }\n          />\n          <div class=\"flex flex-1 flex-col gap-2 p-5\">\n            {service.label && (\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n            )}\n            <h3\n              class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n            >\n              {service.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <div\n              class={cn(\n                \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                index !== 0 && \"mt-auto\"\n              )}\n            >\n              Learn more\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </div>\n          </div>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 1024px) 66vw, 100vw\"\n                  : \"(min-width: 1024px) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/sidebar-1.json b/public/r/styles/base-vega/sidebar-1.json
index 66f778967..3476f325b 100644
--- a/public/r/styles/base-vega/sidebar-1.json
+++ b/public/r/styles/base-vega/sidebar-1.json
@@ -22,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? \"Stars\"\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar class={cn(\"\", className)} collapsible=\"offcanvas\" variant=\"inset\">\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n          >\n            ⌘ + K\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">Toggle menu</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`View ${githubRepo} on GitHub`}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document.querySelectorAll(\"[data-search-shortcut]\").forEach((shortcut) => {\n    shortcut.textContent = isMac ? \"⌘ + K\" : \"Ctrl + K\"\n  })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebar: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar\n    class={cn(\"\", className)}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebar} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={labels.github}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/sidebar.json b/public/r/styles/base-vega/sidebar.json
index 07ce66f00..40c1605c9 100644
--- a/public/r/styles/base-vega/sidebar.json
+++ b/public/r/styles/base-vega/sidebar.json
@@ -24,7 +24,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>Sidebar</SheetTitle>\n          <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
       "type": "registry:ui"
     },
     {

From 1871b6264d43c64f6c79a923984408ac32001366 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 16:15:50 +0200
Subject: [PATCH 27/60] Pass Reviews3 carousel labels and role descriptions
 from callers

Reviews3 takes required labels {previous, next, carousel, slide}.
Carousel and CarouselItem render a caller's aria-roledescription once,
defaulting to "carousel" and "slide", since Astro emits both a native
hardcoded attribute and a same-named spread attribute.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/blocks/reviews-3.astro          | 18 +++++++++++-------
 src/components/ui/carousel/carousel-item.astro |  8 ++++++--
 src/components/ui/carousel/carousel.astro      |  3 ++-
 src/content/pages/blocks/reviews.mdx           |  8 ++++++--
 4 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/components/blocks/reviews-3.astro b/src/components/blocks/reviews-3.astro
index 9200aad7f..192c8fd2b 100644
--- a/src/components/blocks/reviews-3.astro
+++ b/src/components/blocks/reviews-3.astro
@@ -25,8 +25,12 @@ import {
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
-  previousLabel: string
-  nextLabel: string
+  labels: {
+    previous: string
+    next: string
+    carousel: string
+    slide: string
+  }
   reviews: {
     rating: number
     ratingLabel: string
@@ -42,8 +46,7 @@ const {
   class: className,
   title,
   description,
-  previousLabel,
-  nextLabel,
+  labels,
   reviews,
   ...props
 } = Astro.props
@@ -57,12 +60,13 @@ const {
   <SectionContainer>
     <Carousel
       aria-label={title}
+      aria-roledescription={labels.carousel}
       opts={{ loop: true }}
       class="mx-auto w-[calc(100%-6rem)] max-w-3xl"
     >
       <CarouselContent>
         {reviews.map((item) => (
-          <CarouselItem>
+          <CarouselItem aria-roledescription={labels.slide}>
             <div class="flex flex-col items-center gap-6 px-4 py-8 text-center">
               <QuoteIcon class="text-primary size-10" />
               <Rating value={item.rating} aria-label={item.ratingLabel} />
@@ -85,11 +89,11 @@ const {
       </CarouselContent>
       <CarouselPrevious>
         <ChevronLeftIcon aria-hidden="true" />
-        <span class="sr-only">{previousLabel}</span>
+        <span class="sr-only">{labels.previous}</span>
       </CarouselPrevious>
       <CarouselNext>
         <ChevronRightIcon aria-hidden="true" />
-        <span class="sr-only">{nextLabel}</span>
+        <span class="sr-only">{labels.next}</span>
       </CarouselNext>
     </Carousel>
   </SectionContainer>
diff --git a/src/components/ui/carousel/carousel-item.astro b/src/components/ui/carousel/carousel-item.astro
index 5fca8ab12..39a6bfa5c 100644
--- a/src/components/ui/carousel/carousel-item.astro
+++ b/src/components/ui/carousel/carousel-item.astro
@@ -5,13 +5,17 @@ import { cn } from "@/lib/utils"
 
 type Props = HTMLAttributes<"div">
 
-const { class: className, ...props } = Astro.props
+const {
+  class: className,
+  "aria-roledescription": roleDescription = "slide",
+  ...props
+} = Astro.props
 ---
 
 <div
   data-slot="carousel-item"
   role="group"
-  aria-roledescription="slide"
+  aria-roledescription={roleDescription}
   class={cn(
     "min-w-0 shrink-0 grow-0 basis-full",
     "group-data-[orientation=horizontal]/carousel:pl-4",
diff --git a/src/components/ui/carousel/carousel.astro b/src/components/ui/carousel/carousel.astro
index b8ec648ce..1afe921c9 100644
--- a/src/components/ui/carousel/carousel.astro
+++ b/src/components/ui/carousel/carousel.astro
@@ -13,6 +13,7 @@ const {
   class: className,
   opts,
   orientation = opts?.axis === "y" ? "vertical" : "horizontal",
+  "aria-roledescription": roleDescription = "carousel",
   ...props
 } = Astro.props
 
@@ -32,7 +33,7 @@ const resolvedOpts: EmblaOptionsType = {
   data-carousel-options={JSON.stringify(resolvedOpts)}
   class={cn("group/carousel relative", className)}
   role={named ? undefined : "group"}
-  aria-roledescription="carousel"
+  aria-roledescription={roleDescription}
   {...props}
 >
   <slot />
diff --git a/src/content/pages/blocks/reviews.mdx b/src/content/pages/blocks/reviews.mdx
index dc02e4552..a07cebe00 100644
--- a/src/content/pages/blocks/reviews.mdx
+++ b/src/content/pages/blocks/reviews.mdx
@@ -129,8 +129,12 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
       role: "Marketing Director, Signal",
     },
   ]}
-  previousLabel="Previous slide"
-  nextLabel="Next slide"
+  labels={{
+    previous: "Previous slide",
+    next: "Next slide",
+    carousel: "carousel",
+    slide: "slide",
+  }}
 />
 ```
 

From d63079de6572b8164f04ffd8e7d0130e40f8b238 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 16:18:47 +0200
Subject: [PATCH 28/60] Regenerate registry for localized carousel labels

---
 public/r/carousel.json                   | 4 ++--
 public/r/reviews-3.json                  | 2 +-
 public/r/styles/base-luma/carousel.json  | 4 ++--
 public/r/styles/base-luma/reviews-3.json | 2 +-
 public/r/styles/base-lyra/carousel.json  | 4 ++--
 public/r/styles/base-lyra/reviews-3.json | 2 +-
 public/r/styles/base-maia/carousel.json  | 4 ++--
 public/r/styles/base-maia/reviews-3.json | 2 +-
 public/r/styles/base-mira/carousel.json  | 4 ++--
 public/r/styles/base-mira/reviews-3.json | 2 +-
 public/r/styles/base-nova/carousel.json  | 4 ++--
 public/r/styles/base-nova/reviews-3.json | 2 +-
 public/r/styles/base-rhea/carousel.json  | 4 ++--
 public/r/styles/base-rhea/reviews-3.json | 2 +-
 public/r/styles/base-sera/carousel.json  | 4 ++--
 public/r/styles/base-sera/reviews-3.json | 2 +-
 public/r/styles/base-vega/carousel.json  | 4 ++--
 public/r/styles/base-vega/reviews-3.json | 2 +-
 18 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/public/r/carousel.json b/public/r/carousel.json
index 7971e22fc..9c27dc50e 100644
--- a/public/r/carousel.json
+++ b/public/r/carousel.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -23,7 +23,7 @@
     },
     {
       "path": "src/components/ui/carousel/carousel-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription=\"slide\"\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/reviews-3.json b/public/r/reviews-3.json
index e58b82609..eb084404f 100644
--- a/public/r/reviews-3.json
+++ b/public/r/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  previousLabel: string\n  nextLabel: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  previousLabel,\n  nextLabel,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{previousLabel}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{nextLabel}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/carousel.json b/public/r/styles/base-luma/carousel.json
index 7971e22fc..9c27dc50e 100644
--- a/public/r/styles/base-luma/carousel.json
+++ b/public/r/styles/base-luma/carousel.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -23,7 +23,7 @@
     },
     {
       "path": "src/components/ui/carousel/carousel-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription=\"slide\"\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/reviews-3.json b/public/r/styles/base-luma/reviews-3.json
index e58b82609..eb084404f 100644
--- a/public/r/styles/base-luma/reviews-3.json
+++ b/public/r/styles/base-luma/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  previousLabel: string\n  nextLabel: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  previousLabel,\n  nextLabel,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{previousLabel}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{nextLabel}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/carousel.json b/public/r/styles/base-lyra/carousel.json
index c7e279c5a..b8fe99821 100644
--- a/public/r/styles/base-lyra/carousel.json
+++ b/public/r/styles/base-lyra/carousel.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -23,7 +23,7 @@
     },
     {
       "path": "src/components/ui/carousel/carousel-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription=\"slide\"\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/reviews-3.json b/public/r/styles/base-lyra/reviews-3.json
index e58b82609..eb084404f 100644
--- a/public/r/styles/base-lyra/reviews-3.json
+++ b/public/r/styles/base-lyra/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  previousLabel: string\n  nextLabel: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  previousLabel,\n  nextLabel,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{previousLabel}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{nextLabel}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/carousel.json b/public/r/styles/base-maia/carousel.json
index 7971e22fc..9c27dc50e 100644
--- a/public/r/styles/base-maia/carousel.json
+++ b/public/r/styles/base-maia/carousel.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -23,7 +23,7 @@
     },
     {
       "path": "src/components/ui/carousel/carousel-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription=\"slide\"\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/reviews-3.json b/public/r/styles/base-maia/reviews-3.json
index e58b82609..eb084404f 100644
--- a/public/r/styles/base-maia/reviews-3.json
+++ b/public/r/styles/base-maia/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  previousLabel: string\n  nextLabel: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  previousLabel,\n  nextLabel,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{previousLabel}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{nextLabel}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/carousel.json b/public/r/styles/base-mira/carousel.json
index 7971e22fc..9c27dc50e 100644
--- a/public/r/styles/base-mira/carousel.json
+++ b/public/r/styles/base-mira/carousel.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -23,7 +23,7 @@
     },
     {
       "path": "src/components/ui/carousel/carousel-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription=\"slide\"\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/reviews-3.json b/public/r/styles/base-mira/reviews-3.json
index e58b82609..eb084404f 100644
--- a/public/r/styles/base-mira/reviews-3.json
+++ b/public/r/styles/base-mira/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  previousLabel: string\n  nextLabel: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  previousLabel,\n  nextLabel,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{previousLabel}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{nextLabel}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/carousel.json b/public/r/styles/base-nova/carousel.json
index 7971e22fc..9c27dc50e 100644
--- a/public/r/styles/base-nova/carousel.json
+++ b/public/r/styles/base-nova/carousel.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -23,7 +23,7 @@
     },
     {
       "path": "src/components/ui/carousel/carousel-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription=\"slide\"\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/reviews-3.json b/public/r/styles/base-nova/reviews-3.json
index e58b82609..eb084404f 100644
--- a/public/r/styles/base-nova/reviews-3.json
+++ b/public/r/styles/base-nova/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  previousLabel: string\n  nextLabel: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  previousLabel,\n  nextLabel,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{previousLabel}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{nextLabel}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/carousel.json b/public/r/styles/base-rhea/carousel.json
index 552e6c7bc..9021030e8 100644
--- a/public/r/styles/base-rhea/carousel.json
+++ b/public/r/styles/base-rhea/carousel.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -23,7 +23,7 @@
     },
     {
       "path": "src/components/ui/carousel/carousel-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription=\"slide\"\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/reviews-3.json b/public/r/styles/base-rhea/reviews-3.json
index e58b82609..eb084404f 100644
--- a/public/r/styles/base-rhea/reviews-3.json
+++ b/public/r/styles/base-rhea/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  previousLabel: string\n  nextLabel: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  previousLabel,\n  nextLabel,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{previousLabel}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{nextLabel}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/carousel.json b/public/r/styles/base-sera/carousel.json
index c7e279c5a..b8fe99821 100644
--- a/public/r/styles/base-sera/carousel.json
+++ b/public/r/styles/base-sera/carousel.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -23,7 +23,7 @@
     },
     {
       "path": "src/components/ui/carousel/carousel-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription=\"slide\"\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/reviews-3.json b/public/r/styles/base-sera/reviews-3.json
index e58b82609..eb084404f 100644
--- a/public/r/styles/base-sera/reviews-3.json
+++ b/public/r/styles/base-sera/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  previousLabel: string\n  nextLabel: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  previousLabel,\n  nextLabel,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{previousLabel}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{nextLabel}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/carousel.json b/public/r/styles/base-vega/carousel.json
index 7971e22fc..9c27dc50e 100644
--- a/public/r/styles/base-vega/carousel.json
+++ b/public/r/styles/base-vega/carousel.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -23,7 +23,7 @@
     },
     {
       "path": "src/components/ui/carousel/carousel-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription=\"slide\"\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/reviews-3.json b/public/r/styles/base-vega/reviews-3.json
index e58b82609..eb084404f 100644
--- a/public/r/styles/base-vega/reviews-3.json
+++ b/public/r/styles/base-vega/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  previousLabel: string\n  nextLabel: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  previousLabel,\n  nextLabel,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{previousLabel}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{nextLabel}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],

From 7f0b75645d257fc709648466ea3af56cfbae136a Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 17:37:41 +0200
Subject: [PATCH 29/60] Add pnpm a11y: axe scan of every built page in headless
 Chromium

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 astro.config.ts  |   2 +-
 package.json     |   4 +
 pnpm-lock.yaml   |  44 +++++++++
 scripts/a11y.mjs | 236 +++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 285 insertions(+), 1 deletion(-)
 create mode 100644 scripts/a11y.mjs

diff --git a/astro.config.ts b/astro.config.ts
index 69749a542..773cfe96d 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -38,7 +38,7 @@ export default defineConfig({
     processor: unified(),
     shikiConfig: {
       themes: {
-        light: "github-light",
+        light: "github-light-default",
         dark: "github-dark-default",
       },
     },
diff --git a/package.json b/package.json
index aaec83daf..9606c9738 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
     "images": "node scripts/images.ts",
     "ui:add": "node scripts/ui-add.ts",
     "build": "astro build && html-validate dist && linkinator dist",
+    "a11y": "pnpm build && playwright install chromium --only-shell && node scripts/a11y.mjs",
     "registry:build": "pnpm registry:meta && node scripts/registry-adapt.mjs && shadcn build --output node_modules/.cache/fulldev-registry && node scripts/registry-styles.mjs && prettier --write registry.json public/r registry/styles/adapted --log-level warn",
     "registry:check": "pnpm registry:validate && pnpm registry:build && git diff --exit-code -- registry.json public/r registry/styles/adapted",
     "registry:validate": "node scripts/registry-validate.mjs",
@@ -97,6 +98,7 @@
     "class-variance-authority": "^0.7.1",
     "cn": "^0.4.0",
     "embla-carousel": "8.6.0",
+    "embla-carousel-auto-scroll": "8.6.0",
     "lucide-static": "^1.49.0",
     "shadcn": "^4.21.0",
     "simple-icons": "^16.33.0",
@@ -111,6 +113,7 @@
     "@astrojs/markdown-remark": "^7.3.1",
     "@astrojs/mdx": "^8.0.2",
     "@astrojs/sitemap": "^3.7.4",
+    "@axe-core/playwright": "4.13.0",
     "@changesets/changelog-github": "^0.7.0",
     "@changesets/cli": "^2.31.0",
     "@eslint/js": "^10.0.1",
@@ -128,6 +131,7 @@
     "html-validate": "^11.16.1",
     "knip": "^6.39.0",
     "linkinator": "^8.1.0",
+    "playwright": "1.64.0",
     "posthog-js": "1.434.15",
     "prettier": "^3.9.9",
     "prettier-plugin-astro": "^1.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b29eedb94..79954b676 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -250,6 +250,9 @@ importers:
       embla-carousel:
         specifier: 8.6.0
         version: 8.6.0
+      embla-carousel-auto-scroll:
+        specifier: 8.6.0
+        version: 8.6.0(embla-carousel@8.6.0)
       lucide-static:
         specifier: ^1.49.0
         version: 1.49.0
@@ -275,6 +278,9 @@ importers:
       '@astrojs/sitemap':
         specifier: ^3.7.4
         version: 3.7.4
+      '@axe-core/playwright':
+        specifier: 4.13.0
+        version: 4.13.0(playwright-core@1.64.0)
       '@changesets/changelog-github':
         specifier: ^0.7.0
         version: 0.7.0
@@ -326,6 +332,9 @@ importers:
       linkinator:
         specifier: ^8.1.0
         version: 8.1.0
+      playwright:
+        specifier: 1.64.0
+        version: 1.64.0
       posthog-js:
         specifier: 1.434.15
         version: 1.434.15
@@ -551,6 +560,11 @@ packages:
   '@astrojs/yaml2ts@0.2.4':
     resolution: {integrity: sha512-8oddpOae35pJsXPQXhTkM0ypfKPskVsh2bCxRtbf7e+/Epw2nReakFYpLKjZMEr75CsoF203PMnCocpfz0s69A==}
 
+  '@axe-core/playwright@4.13.0':
+    resolution: {integrity: sha512-6YLx+kxXu5GJceG4ozFg+33a2EMTdjYwWGloJ3sb9Kta5pp+ZNS53uxGVog5JetIY8s++P5UrtX+cri+u0VAVg==}
+    peerDependencies:
+      playwright-core: '>= 1.0.0'
+
   '@babel/code-frame@7.29.7':
     resolution: {integrity: sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==}
     engines: {node: '>=6.9.0'}
@@ -2642,6 +2656,11 @@ packages:
   electron-to-chromium@1.5.443:
     resolution: {integrity: sha512-TDJG36L9A3CWWwZ97HKaE+Iz1sW80pNp6sAU0owzCIV3Zc9eVyRqZK8Vz6NKuMIU8WjP0pIkoqCa0VRf/yFD0Q==}
 
+  embla-carousel-auto-scroll@8.6.0:
+    resolution: {integrity: sha512-WT9fWhNXFpbQ6kP+aS07oF5IHYLZ1Dx4DkwgCY8Hv2ZyYd2KMCPfMV1q/cA3wFGuLO7GMgKiySLX90/pQkcOdQ==}
+    peerDependencies:
+      embla-carousel: 8.6.0
+
   embla-carousel@8.6.0:
     resolution: {integrity: sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==}
 
@@ -4298,6 +4317,16 @@ packages:
     resolution: {integrity: sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==}
     engines: {node: '>=8'}
 
+  playwright-core@1.64.0:
+    resolution: {integrity: sha512-T9r+MZkTECl2+oUcZ26YgZzTrYidTsIhYYkJix+6iDOymOb1FB2RLLSOxRGnZGv5DStt+aduIVbt+E8WygXYpg==}
+    engines: {node: '>=20'}
+    hasBin: true
+
+  playwright@1.64.0:
+    resolution: {integrity: sha512-kVzTnYFYEyQ9RGzBjNCd2+yEqWmVbxl3AHPynv3qQ6JTjv4a+kwRcnqQwIpuP3NnrnIrE/Q6wWAIAvMfIE2/Yg==}
+    engines: {node: '>=20'}
+    hasBin: true
+
   possible-typed-array-names@1.1.0:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
@@ -5665,6 +5694,11 @@ snapshots:
     dependencies:
       yaml: 2.9.1
 
+  '@axe-core/playwright@4.13.0(playwright-core@1.64.0)':
+    dependencies:
+      axe-core: 4.13.0
+      playwright-core: 1.64.0
+
   '@babel/code-frame@7.29.7':
     dependencies:
       '@babel/helper-validator-identifier': 7.29.7
@@ -7805,6 +7839,10 @@ snapshots:
 
   electron-to-chromium@1.5.443: {}
 
+  embla-carousel-auto-scroll@8.6.0(embla-carousel@8.6.0):
+    dependencies:
+      embla-carousel: 8.6.0
+
   embla-carousel@8.6.0: {}
 
   emmet@2.4.11:
@@ -9925,6 +9963,12 @@ snapshots:
     dependencies:
       find-up: 3.0.0
 
+  playwright-core@1.64.0: {}
+
+  playwright@1.64.0:
+    dependencies:
+      playwright-core: 1.64.0
+
   possible-typed-array-names@1.1.0: {}
 
   postcss-selector-parser@7.1.6:
diff --git a/scripts/a11y.mjs b/scripts/a11y.mjs
new file mode 100644
index 000000000..1274d755b
--- /dev/null
+++ b/scripts/a11y.mjs
@@ -0,0 +1,236 @@
+// Scan every page in dist with axe in headless Chromium.
+//
+// Usage: pnpm a11y (builds dist and installs the Chromium headless shell
+// first), or node scripts/a11y.mjs against an existing dist.
+//
+// Serves dist on a free localhost port, opens each HTML route, waits for
+// fonts and eager images, and runs axe with its default rules. Violations,
+// uncaught page errors and failed same-origin requests fail the scan.
+// Incomplete results are listed for manual review: axe could not decide
+// them, so they did not pass. Requests to other origins are blocked, so the
+// scan needs no network. The report goes to .dev/a11y/report.json.
+//
+// Axe checks the rendered default state of each page. Menus, dialogs, focus
+// order and motion still need a manual check.
+import { createReadStream, existsSync, statSync } from "node:fs"
+import { mkdir, readdir, writeFile } from "node:fs/promises"
+import { createServer } from "node:http"
+import { extname, join, relative, resolve, sep } from "node:path"
+import AxeBuilder from "@axe-core/playwright"
+import { chromium } from "playwright"
+
+const root = resolve("dist")
+const reportPath = resolve(".dev/a11y/report.json")
+const concurrency = 4
+
+const types = {
+  ".html": "text/html; charset=utf-8",
+  ".css": "text/css",
+  ".js": "text/javascript",
+  ".mjs": "text/javascript",
+  ".json": "application/json",
+  ".svg": "image/svg+xml",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".webp": "image/webp",
+  ".avif": "image/avif",
+  ".gif": "image/gif",
+  ".ico": "image/x-icon",
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+  ".txt": "text/plain; charset=utf-8",
+  ".xml": "application/xml",
+  ".webmanifest": "application/manifest+json",
+}
+
+if (!existsSync(root)) {
+  console.error("No dist folder. Run pnpm a11y, which builds it first.")
+  process.exit(1)
+}
+
+const walk = async (directory) => {
+  const files = []
+  for (const entry of await readdir(directory, { withFileTypes: true })) {
+    const path = join(directory, entry.name)
+    if (entry.isDirectory()) files.push(...(await walk(path)))
+    else if (entry.name.endsWith(".html")) files.push(path)
+  }
+  return files
+}
+
+const routes = (await walk(root))
+  .map((file) => "/" + relative(root, file).split(sep).join("/"))
+  .map((route) => route.replace(/(^|\/)index\.html$/, "$1"))
+  .sort()
+
+if (routes.length === 0) {
+  console.error("No HTML pages in dist.")
+  process.exit(1)
+}
+
+// Resolve a request path to a file inside dist, the way a static host does.
+const fileFor = (pathname) => {
+  let decoded
+  try {
+    decoded = decodeURIComponent(pathname)
+  } catch {
+    return undefined
+  }
+  const candidates = [decoded, join(decoded, "index.html"), `${decoded}.html`]
+  for (const candidate of candidates) {
+    const file = resolve(root, "." + candidate)
+    if (file !== root && !file.startsWith(root + sep)) return undefined
+    if (existsSync(file) && statSync(file).isFile()) return file
+  }
+  return undefined
+}
+
+const server = createServer((request, response) => {
+  const { pathname } = new URL(request.url ?? "/", "http://localhost")
+  const file = fileFor(pathname)
+  if (!file) {
+    response.writeHead(404, { "content-type": "text/plain" })
+    response.end("Not found")
+    return
+  }
+  response.writeHead(200, {
+    "content-type": types[extname(file)] ?? "application/octet-stream",
+  })
+  createReadStream(file).pipe(response)
+})
+
+await new Promise((done) => server.listen(0, "127.0.0.1", done))
+const origin = `http://127.0.0.1:${server.address().port}`
+
+let browser
+const results = []
+
+const close = async () => {
+  await browser?.close().catch(() => {})
+  await new Promise((done) => server.close(() => done()))
+}
+process.once("SIGINT", async () => {
+  await close()
+  process.exit(130)
+})
+
+try {
+  try {
+    browser = await chromium.launch({ headless: true })
+  } catch (error) {
+    console.error(
+      "Could not start headless Chromium. Run pnpm a11y, which installs it with `playwright install chromium --only-shell`.\n"
+    )
+    throw error
+  }
+  const context = await browser.newContext()
+  await context.route("**/*", (route) =>
+    route.request().url().startsWith(origin) ? route.continue() : route.abort()
+  )
+
+  const scan = async (route) => {
+    const page = await context.newPage()
+    const errors = []
+    page.on("pageerror", (error) => errors.push(`Page error: ${error.message}`))
+    page.on("requestfailed", (request) => {
+      if (request.url().startsWith(origin))
+        errors.push(`Request failed: ${request.url()}`)
+    })
+    page.on("response", (response) => {
+      if (response.url().startsWith(origin) && response.status() >= 400)
+        errors.push(`HTTP ${response.status()}: ${response.url()}`)
+    })
+    try {
+      const response = await page.goto(origin + route, { waitUntil: "load" })
+      if (!response?.ok()) errors.push(`HTTP ${response?.status()}: ${route}`)
+      await page.evaluate(() => document.fonts.ready)
+      await page
+        .waitForFunction(
+          () =>
+            [...document.images].every(
+              (image) => image.complete || image.loading === "lazy"
+            ),
+          undefined,
+          { timeout: 10_000 }
+        )
+        .catch(() => errors.push("Images did not finish loading in 10s"))
+      const axe = await new AxeBuilder({ page }).analyze()
+      results.push({
+        route,
+        errors,
+        violations: axe.violations.map((rule) => ({
+          id: rule.id,
+          impact: rule.impact,
+          help: rule.help,
+          helpUrl: rule.helpUrl,
+          targets: rule.nodes.map((node) => node.target.join(" ")),
+        })),
+        incomplete: axe.incomplete.map((rule) => ({
+          id: rule.id,
+          help: rule.help,
+          count: rule.nodes.length,
+        })),
+      })
+    } catch (error) {
+      results.push({
+        route,
+        errors: [...errors, `Scan failed: ${error.message}`],
+        violations: [],
+        incomplete: [],
+      })
+    } finally {
+      await page.close()
+    }
+  }
+
+  const queue = [...routes]
+  await Promise.all(
+    Array.from({ length: concurrency }, async () => {
+      while (queue.length > 0) await scan(queue.shift())
+    })
+  )
+} finally {
+  await close()
+}
+
+results.sort((a, b) => a.route.localeCompare(b.route))
+await mkdir(resolve(reportPath, ".."), { recursive: true })
+await writeFile(reportPath, JSON.stringify(results, null, 2) + "\n")
+
+let failures = 0
+for (const { route, errors, violations } of results) {
+  for (const error of errors) {
+    failures++
+    console.log(`${route}\n  ${error}`)
+  }
+  for (const rule of violations) {
+    failures++
+    console.log(`${route}\n  ${rule.id} (${rule.impact}): ${rule.help}`)
+    for (const target of rule.targets) console.log(`    ${target}`)
+    console.log(`    ${rule.helpUrl}`)
+  }
+}
+
+const review = new Map()
+for (const { incomplete } of results)
+  for (const rule of incomplete) {
+    const entry = review.get(rule.id) ?? {
+      help: rule.help,
+      routes: 0,
+      nodes: 0,
+    }
+    entry.routes++
+    entry.nodes += rule.count
+    review.set(rule.id, entry)
+  }
+if (review.size > 0) {
+  console.log("\nNeeds manual review (axe could not decide, so not a pass):")
+  for (const [id, { help, routes, nodes }] of review)
+    console.log(`  ${id}: ${help} (${nodes} elements on ${routes} pages)`)
+}
+
+console.log(
+  `\nScanned ${results.length} pages: ${failures} failures. Report: ${relative(process.cwd(), reportPath)}`
+)
+process.exit(failures > 0 ? 1 : 0)

From a197b2ef37edb22bf42d174f4ca0a95061996fe6 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 17:37:41 +0200
Subject: [PATCH 30/60] Render Section, Header, Carousel and SidebarRail
 attributes once

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../ui/carousel/carousel-content.astro        | 14 +++++--
 .../ui/carousel/carousel-item.astro           |  6 ++-
 .../ui/carousel/carousel-next.astro           |  4 +-
 .../ui/carousel/carousel-previous.astro       |  4 +-
 src/components/ui/carousel/carousel.astro     | 37 ++++++++++---------
 src/components/ui/header/header.astro         |  9 ++++-
 src/components/ui/section/section.astro       |  9 ++++-
 src/components/ui/sidebar/sidebar-rail.astro  | 12 ++++--
 8 files changed, 64 insertions(+), 31 deletions(-)

diff --git a/src/components/ui/carousel/carousel-content.astro b/src/components/ui/carousel/carousel-content.astro
index a48c82f17..d64bba49d 100644
--- a/src/components/ui/carousel/carousel-content.astro
+++ b/src/components/ui/carousel/carousel-content.astro
@@ -5,12 +5,20 @@ import { cn } from "@/lib/utils"
 
 type Props = HTMLAttributes<"div">
 
-const { class: className, ...props } = Astro.props
+const {
+  class: className,
+  "data-slot": dataSlot = "carousel-container",
+  ...props
+} = Astro.props
 ---
 
-<div class="overflow-hidden" data-slot="carousel-content">
+<div
+  class="overflow-hidden"
+  data-slot="carousel-content"
+  data-carousel-viewport
+>
   <div
-    data-slot="carousel-container"
+    data-slot={dataSlot}
     class={cn(
       "flex [touch-action:pan-y_pinch-zoom]",
       "group-data-[orientation=vertical]/carousel:-mt-4 group-data-[orientation=vertical]/carousel:[touch-action:pan-x_pinch-zoom] group-data-[orientation=vertical]/carousel:flex-col",
diff --git a/src/components/ui/carousel/carousel-item.astro b/src/components/ui/carousel/carousel-item.astro
index 39a6bfa5c..daf1dd592 100644
--- a/src/components/ui/carousel/carousel-item.astro
+++ b/src/components/ui/carousel/carousel-item.astro
@@ -8,13 +8,15 @@ type Props = HTMLAttributes<"div">
 const {
   class: className,
   "aria-roledescription": roleDescription = "slide",
+  "data-slot": dataSlot = "carousel-item",
+  role = "group",
   ...props
 } = Astro.props
 ---
 
 <div
-  data-slot="carousel-item"
-  role="group"
+  data-slot={dataSlot}
+  role={role}
   aria-roledescription={roleDescription}
   class={cn(
     "min-w-0 shrink-0 grow-0 basis-full",
diff --git a/src/components/ui/carousel/carousel-next.astro b/src/components/ui/carousel/carousel-next.astro
index 14dab995e..9aff04b9d 100644
--- a/src/components/ui/carousel/carousel-next.astro
+++ b/src/components/ui/carousel/carousel-next.astro
@@ -12,13 +12,15 @@ const {
   variant = "outline",
   size = "icon-sm",
   disabled,
+  "data-slot": dataSlot = "carousel-next",
   ...props
 } = Astro.props
 ---
 
 <button
   type="button"
-  data-slot="carousel-next"
+  data-slot={dataSlot}
+  data-carousel-next
   data-variant={variant}
   data-size={size}
   data-manual-disabled={disabled ? "true" : undefined}
diff --git a/src/components/ui/carousel/carousel-previous.astro b/src/components/ui/carousel/carousel-previous.astro
index f6fa2b180..12a0bce55 100644
--- a/src/components/ui/carousel/carousel-previous.astro
+++ b/src/components/ui/carousel/carousel-previous.astro
@@ -12,13 +12,15 @@ const {
   variant = "outline",
   size = "icon-sm",
   disabled,
+  "data-slot": dataSlot = "carousel-previous",
   ...props
 } = Astro.props
 ---
 
 <button
   type="button"
-  data-slot="carousel-previous"
+  data-slot={dataSlot}
+  data-carousel-previous
   data-variant={variant}
   data-size={size}
   data-manual-disabled={disabled ? "true" : undefined}
diff --git a/src/components/ui/carousel/carousel.astro b/src/components/ui/carousel/carousel.astro
index 1afe921c9..d8f373f72 100644
--- a/src/components/ui/carousel/carousel.astro
+++ b/src/components/ui/carousel/carousel.astro
@@ -14,13 +14,16 @@ const {
   opts,
   orientation = opts?.axis === "y" ? "vertical" : "horizontal",
   "aria-roledescription": roleDescription = "carousel",
+  "data-slot": dataSlot = "carousel",
+  // A named section is a region landmark. Without a name it would have no
+  // role, so it becomes a group, the other container role the APG carousel
+  // allows.
+  role = Astro.props["aria-label"] || Astro.props["aria-labelledby"]
+    ? undefined
+    : "group",
   ...props
 } = Astro.props
 
-// A named section is a region landmark. Without a name it would have no role,
-// so it becomes a group, the other container role the APG carousel allows.
-const named = Boolean(props["aria-label"] || props["aria-labelledby"])
-
 const resolvedOpts: EmblaOptionsType = {
   ...opts,
   axis: orientation === "horizontal" ? "x" : "y",
@@ -28,11 +31,11 @@ const resolvedOpts: EmblaOptionsType = {
 ---
 
 <section
-  data-slot="carousel"
+  data-slot={dataSlot}
   data-orientation={orientation}
   data-carousel-options={JSON.stringify(resolvedOpts)}
   class={cn("group/carousel relative", className)}
-  role={named ? undefined : "group"}
+  role={role}
   aria-roledescription={roleDescription}
   {...props}
 >
@@ -50,25 +53,25 @@ const resolvedOpts: EmblaOptionsType = {
   }
 
   const instances = new Map<CarouselRoot, () => void>()
-  // A nested carousel owns its own parts.
-  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>
-    [...root.querySelectorAll<T>(`[data-slot="${slot}"]`)].filter(
-      (part) => part.closest('[data-slot="carousel"]') === root
+  // A nested carousel owns its own parts. The data-carousel-* markers stay
+  // in place when a caller overrides data-slot.
+  const rootSelector = "[data-carousel-options]"
+  const getParts = <T extends Element>(root: CarouselRoot, part: string) =>
+    [...root.querySelectorAll<T>(`[data-carousel-${part}]`)].filter(
+      (element) => element.closest(rootSelector) === root
     )
   const initialize = () => {
-    for (const root of document.querySelectorAll<CarouselRoot>(
-      '[data-slot="carousel"]'
-    )) {
+    for (const root of document.querySelectorAll<CarouselRoot>(rootSelector)) {
       if (instances.has(root)) continue
-      const viewport = getParts<HTMLElement>(root, "carousel-content")[0]
+      const viewport = getParts<HTMLElement>(root, "viewport")[0]
       if (!viewport) continue
       const opts: EmblaOptionsType = JSON.parse(
         root.dataset.carouselOptions || "{}"
       )
       const api = EmblaCarousel(viewport, opts)
       root.__fulldevCarouselApi = api
-      const previous = getParts<HTMLButtonElement>(root, "carousel-previous")
-      const next = getParts<HTMLButtonElement>(root, "carousel-next")
+      const previous = getParts<HTMLButtonElement>(root, "previous")
+      const next = getParts<HTMLButtonElement>(root, "next")
       const emit = (type: "carousel:init" | "carousel:select") => {
         root.dispatchEvent(
           new CustomEvent(type, {
@@ -103,7 +106,7 @@ const resolvedOpts: EmblaOptionsType = {
         if (
           event.defaultPrevented ||
           !(target instanceof Element) ||
-          target.closest('[data-slot="carousel"]') !== root ||
+          target.closest(rootSelector) !== root ||
           target.closest(
             'input, textarea, select, [contenteditable]:not([contenteditable="false"])'
           )
diff --git a/src/components/ui/header/header.astro b/src/components/ui/header/header.astro
index 8b89018e1..94161d5e4 100644
--- a/src/components/ui/header/header.astro
+++ b/src/components/ui/header/header.astro
@@ -19,12 +19,17 @@ const variants = cva("cn-header relative z-50 flex w-full items-center gap-4", {
   },
 })
 
-const { class: className, variant = "default", ...props } = Astro.props
+const {
+  class: className,
+  variant = "default",
+  "data-slot": dataSlot = "header",
+  ...props
+} = Astro.props
 ---
 
 <header
   class={cn(variants({ variant }), className)}
-  data-slot="header"
+  data-slot={dataSlot}
   data-variant={variant}
   {...props}
 >
diff --git a/src/components/ui/section/section.astro b/src/components/ui/section/section.astro
index 374fc1763..3c0a4b500 100644
--- a/src/components/ui/section/section.astro
+++ b/src/components/ui/section/section.astro
@@ -19,12 +19,17 @@ const variants = cva("cn-section relative flex scroll-mt-12 flex-col", {
   },
 })
 
-const { class: className, variant = "default", ...props } = Astro.props
+const {
+  class: className,
+  variant = "default",
+  "data-slot": dataSlot = "section",
+  ...props
+} = Astro.props
 ---
 
 <section
   class={cn(variants({ variant }), className)}
-  data-slot="section"
+  data-slot={dataSlot}
   data-variant={variant}
   {...props}
 >
diff --git a/src/components/ui/sidebar/sidebar-rail.astro b/src/components/ui/sidebar/sidebar-rail.astro
index e20cf27e3..5f30ab94e 100644
--- a/src/components/ui/sidebar/sidebar-rail.astro
+++ b/src/components/ui/sidebar/sidebar-rail.astro
@@ -5,15 +5,21 @@ import { cn } from "@/lib/utils"
 
 type Props = HTMLAttributes<"button">
 
-const { class: className, type = "button", ...props } = Astro.props
+const {
+  class: className,
+  type = "button",
+  "aria-label": ariaLabel = "Toggle Sidebar",
+  title = ariaLabel,
+  ...props
+} = Astro.props
 ---
 
 <button
   data-sidebar="rail"
   data-slot="sidebar-rail"
-  aria-label="Toggle Sidebar"
+  aria-label={ariaLabel}
   tabindex={-1}
-  title="Toggle Sidebar"
+  title={title}
   type={type}
   class={cn(
     "cn-sidebar-rail absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",

From de172fed89783eb43cae6e383fb59a548b68b6b9 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 17:37:41 +0200
Subject: [PATCH 31/60] Let PriceValue take a discount label and keep zero
 prices

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 registry/styles/fulldev/style-luma.css    |  2 +-
 registry/styles/fulldev/style-lyra.css    |  2 +-
 registry/styles/fulldev/style-maia.css    |  2 +-
 registry/styles/fulldev/style-mira.css    |  2 +-
 registry/styles/fulldev/style-nova.css    |  2 +-
 registry/styles/fulldev/style-rhea.css    |  2 +-
 registry/styles/fulldev/style-vega.css    |  2 +-
 src/components/ui/price/price-value.astro | 30 ++++++++++++++++-------
 src/content/pages/components/price.mdx    | 22 ++++++++++++++++-
 9 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/registry/styles/fulldev/style-luma.css b/registry/styles/fulldev/style-luma.css
index a7b6cbcc3..606529351 100644
--- a/registry/styles/fulldev/style-luma.css
+++ b/registry/styles/fulldev/style-luma.css
@@ -44,7 +44,7 @@
 
   /* MARK: Price */
   .cn-price-badge {
-    @apply rounded-3xl bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground;
+    @apply rounded-3xl bg-muted px-2 py-0.5 text-xs font-medium text-foreground;
   }
 
   /* MARK: Video */
diff --git a/registry/styles/fulldev/style-lyra.css b/registry/styles/fulldev/style-lyra.css
index 52a992c1f..e5334271d 100644
--- a/registry/styles/fulldev/style-lyra.css
+++ b/registry/styles/fulldev/style-lyra.css
@@ -44,7 +44,7 @@
 
   /* MARK: Price */
   .cn-price-badge {
-    @apply rounded-none bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground;
+    @apply rounded-none bg-muted px-2 py-0.5 text-xs font-medium text-foreground;
   }
 
   /* MARK: Video */
diff --git a/registry/styles/fulldev/style-maia.css b/registry/styles/fulldev/style-maia.css
index b989d5176..fdc2c70a3 100644
--- a/registry/styles/fulldev/style-maia.css
+++ b/registry/styles/fulldev/style-maia.css
@@ -44,7 +44,7 @@
 
   /* MARK: Price */
   .cn-price-badge {
-    @apply rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground;
+    @apply rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-foreground;
   }
 
   /* MARK: Video */
diff --git a/registry/styles/fulldev/style-mira.css b/registry/styles/fulldev/style-mira.css
index a4e4f8d60..a0af37a40 100644
--- a/registry/styles/fulldev/style-mira.css
+++ b/registry/styles/fulldev/style-mira.css
@@ -44,7 +44,7 @@
 
   /* MARK: Price */
   .cn-price-badge {
-    @apply rounded-full bg-muted px-2 py-0.5 text-[0.625rem] font-medium text-muted-foreground;
+    @apply rounded-full bg-muted px-2 py-0.5 text-[0.625rem] font-medium text-foreground;
   }
 
   /* MARK: Video */
diff --git a/registry/styles/fulldev/style-nova.css b/registry/styles/fulldev/style-nova.css
index 7b50cfc4c..88fe944ee 100644
--- a/registry/styles/fulldev/style-nova.css
+++ b/registry/styles/fulldev/style-nova.css
@@ -44,7 +44,7 @@
 
   /* MARK: Price */
   .cn-price-badge {
-    @apply rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground;
+    @apply rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-foreground;
   }
 
   /* MARK: Video */
diff --git a/registry/styles/fulldev/style-rhea.css b/registry/styles/fulldev/style-rhea.css
index a5418164d..597ba4b4a 100644
--- a/registry/styles/fulldev/style-rhea.css
+++ b/registry/styles/fulldev/style-rhea.css
@@ -44,7 +44,7 @@
 
   /* MARK: Price */
   .cn-price-badge {
-    @apply rounded-2xl bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground;
+    @apply rounded-2xl bg-muted px-2 py-0.5 text-xs font-medium text-foreground;
   }
 
   /* MARK: Video */
diff --git a/registry/styles/fulldev/style-vega.css b/registry/styles/fulldev/style-vega.css
index b50f19f7a..0a382a55d 100644
--- a/registry/styles/fulldev/style-vega.css
+++ b/registry/styles/fulldev/style-vega.css
@@ -44,7 +44,7 @@
 
   /* MARK: Price */
   .cn-price-badge {
-    @apply rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground;
+    @apply rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-foreground;
   }
 
   /* MARK: Video */
diff --git a/src/components/ui/price/price-value.astro b/src/components/ui/price/price-value.astro
index 673edff66..103651bbe 100644
--- a/src/components/ui/price/price-value.astro
+++ b/src/components/ui/price/price-value.astro
@@ -7,6 +7,7 @@ import { cn } from "@/lib/utils"
 import {
   formatPriceDiscount,
   formatPriceValue,
+  parseSinglePriceValue,
   type DiscountFormat,
   type PriceValue,
 } from "./format-price-value"
@@ -20,6 +21,7 @@ type Props = VariantProps<typeof variants> &
     variant?: "default" | "sale"
     discountFormat?: DiscountFormat
     showDiscount?: boolean
+    discountLabel?: string
   }
 
 const variants = cva("leading-tight", {
@@ -40,24 +42,32 @@ const {
   variant = "default",
   discountFormat = "percentage",
   showDiscount = true,
+  discountLabel = "Save",
   "data-slot": dataSlot = "price-value",
   ...props
 } = Astro.props
 
 const formattedPrice = formatPriceValue(price, { currency, locale })
-const formattedCompareAt = formatPriceValue(compareAt, { currency, locale })
+const currentValue = parseSinglePriceValue(price)
+const compareAtValue = parseSinglePriceValue(compareAt)
+// A compare-at price only shows when it is higher than the price.
+const formattedCompareAt =
+  currentValue !== null &&
+  compareAtValue !== null &&
+  compareAtValue <= currentValue
+    ? null
+    : formatPriceValue(compareAt, { currency, locale })
 const formattedDiscount =
-  showDiscount && compareAt
+  showDiscount && formattedCompareAt !== null
     ? formatPriceDiscount(price, compareAt, {
         currency,
         locale,
         format: discountFormat,
       })
     : null
-const hasDiscount = Boolean(formattedCompareAt && formattedDiscount)
 ---
 
-{formattedPrice && (
+{formattedPrice !== null && (
   <span
     class={cn("inline-flex flex-wrap items-center gap-x-2 gap-y-1", className)}
     data-slot={dataSlot}
@@ -65,13 +75,15 @@ const hasDiscount = Boolean(formattedCompareAt && formattedDiscount)
     {...props}
   >
     <span class={cn(variants({ variant }))}>{formattedPrice}</span>
-    {formattedCompareAt && (
-      <span class="text-muted-foreground text-sm leading-tight line-through">
+    {formattedCompareAt !== null && (
+      <del class="text-muted-foreground text-sm leading-tight line-through">
         {formattedCompareAt}
-      </span>
+      </del>
     )}
-    {hasDiscount && (
-      <span class="cn-price-badge">Save {formattedDiscount}</span>
+    {formattedDiscount !== null && (
+      <span class="cn-price-badge">
+        {discountLabel} {formattedDiscount}
+      </span>
     )}
   </span>
 )}
diff --git a/src/content/pages/components/price.mdx b/src/content/pages/components/price.mdx
index bfd5fcb7f..4b3ceed58 100644
--- a/src/content/pages/components/price.mdx
+++ b/src/content/pages/components/price.mdx
@@ -79,11 +79,31 @@ import { Price, PriceValue } from "@/components/ui/price"
 </Price>
 ```
 
+```astro live
+---
+import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
+---
+
+<Price>
+  <PriceValue
+    price={39}
+    compareAt={49}
+    currency="EUR"
+    locale="nl-NL"
+    discountLabel="Bespaar"
+  />
+  <PriceUnit>maand</PriceUnit>
+</Price>
+```
+
 ## Notes
 
-- Use `compareAt` to show the original price and automatic savings output.
+- Use `compareAt` to show the original price and automatic savings output. It
+  only shows when it is higher than `price`, and `0` counts as a price.
 - Pass `currency` and `locale` when the default `USD` and `en-US` formatting are
   not correct for your project.
+- Pass `discountLabel` to put the savings badge in the page language. It comes
+  before the discount, as in `Save 20%`.
 - Use `showDiscount={false}` when you want the strike-through price without the
   savings badge.
 

From 00e4253c2dd24c29e09f888e080b29e2dd7a921f Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 17:37:41 +0200
Subject: [PATCH 32/60] Rebuild Marquee on Embla Auto Scroll with one track and
 a pause toggle

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ui/marquee/index.ts            |   3 +
 .../ui/marquee/marquee-content.astro          |  31 +++
 src/components/ui/marquee/marquee-item.astro  |  24 ++
 .../ui/marquee/marquee-toggle.astro           |  48 ++++
 src/components/ui/marquee/marquee.astro       | 255 +++++++++++++-----
 src/content/pages/components/marquee.mdx      | 189 ++++++++-----
 6 files changed, 426 insertions(+), 124 deletions(-)
 create mode 100644 src/components/ui/marquee/marquee-content.astro
 create mode 100644 src/components/ui/marquee/marquee-item.astro
 create mode 100644 src/components/ui/marquee/marquee-toggle.astro

diff --git a/src/components/ui/marquee/index.ts b/src/components/ui/marquee/index.ts
index 4df7fe565..b748b2e97 100644
--- a/src/components/ui/marquee/index.ts
+++ b/src/components/ui/marquee/index.ts
@@ -1 +1,4 @@
 export { default as Marquee } from "./marquee.astro"
+export { default as MarqueeContent } from "./marquee-content.astro"
+export { default as MarqueeItem } from "./marquee-item.astro"
+export { default as MarqueeToggle } from "./marquee-toggle.astro"
diff --git a/src/components/ui/marquee/marquee-content.astro b/src/components/ui/marquee/marquee-content.astro
new file mode 100644
index 000000000..f8472f95a
--- /dev/null
+++ b/src/components/ui/marquee/marquee-content.astro
@@ -0,0 +1,31 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  reverse?: boolean
+}
+
+const {
+  class: className,
+  reverse = false,
+  "data-slot": dataSlot = "marquee-content",
+  ...props
+} = Astro.props
+---
+
+<div
+  data-slot={dataSlot}
+  data-marquee-viewport
+  data-reverse={reverse ? "" : undefined}
+  class={cn(
+    "focus-visible:ring-ring/50 overflow-x-auto outline-none contain-inline-size focus-visible:ring-3 data-active:overflow-hidden",
+    className
+  )}
+  {...props}
+>
+  <div class="-ms-[var(--marquee-gap,--spacing(4))] flex justify-center-safe">
+    <slot />
+  </div>
+</div>
diff --git a/src/components/ui/marquee/marquee-item.astro b/src/components/ui/marquee/marquee-item.astro
new file mode 100644
index 000000000..27ead6384
--- /dev/null
+++ b/src/components/ui/marquee/marquee-item.astro
@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const {
+  class: className,
+  "data-slot": dataSlot = "marquee-item",
+  ...props
+} = Astro.props
+---
+
+<div
+  data-slot={dataSlot}
+  class={cn(
+    "min-w-0 shrink-0 grow-0 ps-[var(--marquee-gap,--spacing(4))]",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>
diff --git a/src/components/ui/marquee/marquee-toggle.astro b/src/components/ui/marquee/marquee-toggle.astro
new file mode 100644
index 000000000..8c98dbcef
--- /dev/null
+++ b/src/components/ui/marquee/marquee-toggle.astro
@@ -0,0 +1,48 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import PauseIcon from "@lucide/astro/icons/pause"
+import PlayIcon from "@lucide/astro/icons/play"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants, type ButtonVariantProps } from "@/components/ui/button"
+
+type Props = Omit<HTMLAttributes<"button">, "type"> &
+  ButtonVariantProps & {
+    playLabel: string
+    pauseLabel: string
+  }
+
+const {
+  class: className,
+  variant = "outline",
+  size = "icon-sm",
+  playLabel,
+  pauseLabel,
+  "data-slot": dataSlot = "marquee-toggle",
+  ...props
+} = Astro.props
+---
+
+<button
+  type="button"
+  hidden
+  data-slot={dataSlot}
+  data-marquee-toggle
+  data-state="playing"
+  data-play-label={playLabel}
+  data-pause-label={pauseLabel}
+  data-variant={variant}
+  data-size={size}
+  class={cn(
+    buttonVariants({ variant, size }),
+    "group/marquee-toggle",
+    className
+  )}
+  {...props}
+>
+  <PauseIcon class="group-data-[state=paused]/marquee-toggle:hidden" />
+  <PlayIcon class="hidden group-data-[state=paused]/marquee-toggle:block" />
+  <span class="sr-only" data-marquee-label>
+    {pauseLabel}
+  </span>
+</button>
diff --git a/src/components/ui/marquee/marquee.astro b/src/components/ui/marquee/marquee.astro
index 174bd3bb2..efd7bfe76 100644
--- a/src/components/ui/marquee/marquee.astro
+++ b/src/components/ui/marquee/marquee.astro
@@ -1,84 +1,215 @@
 ---
 import type { HTMLAttributes } from "astro/types"
-import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
-const trackVariants = cva(
-  "flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]",
-  {
-    variants: {
-      direction: {
-        left: "",
-        right: "[animation-direction:reverse]",
-      },
-      pauseOnHover: {
-        true: "group-hover/marquee:[animation-play-state:paused]",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      direction: "left",
-      pauseOnHover: false,
-    },
-  }
-)
-
-type Props = HTMLAttributes<"div"> &
-  VariantProps<typeof trackVariants> & {
-    duration?: string
-    gap?: string
-    infinite?: boolean
-  }
+type Props = HTMLAttributes<"div">
 
 const {
   class: className,
-  direction,
-  pauseOnHover,
-  duration = "40s",
-  gap = "1.5rem",
-  infinite = true,
-  style,
   "data-slot": dataSlot = "marquee",
   ...props
 } = Astro.props
-
-const resolvedStyle = [
-  `--marquee-duration:${duration}`,
-  `--marquee-gap:${gap}`,
-  typeof style === "string" ? style : undefined,
-]
-  .filter(Boolean)
-  .join(";")
 ---
 
 <div
-  class={cn(
-    "group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]",
-    className
-  )}
   data-slot={dataSlot}
-  style={resolvedStyle}
+  data-marquee
+  class={cn("relative", className)}
   {...props}
 >
-  <div class={trackVariants({ direction, pauseOnHover })}>
-    <slot />
-  </div>
-  {infinite && (
-    <div aria-hidden="true" class={trackVariants({ direction, pauseOnHover })}>
-      <slot />
-    </div>
-  )}
+  <slot />
 </div>
 
-<style>
-  @keyframes marquee {
-    from {
-      transform: translateX(0);
-    }
+<script>
+  import EmblaCarousel, { type EmblaCarouselType } from "embla-carousel"
+  import AutoScroll, { type AutoScrollType } from "embla-carousel-auto-scroll"
+
+  type Row = {
+    viewport: HTMLElement
+    api?: EmblaCarouselType
+    autoScroll?: AutoScrollType
+  }
+
+  // The data-marquee* markers stay in place when a caller overrides data-slot.
+  const rootSelector = "[data-marquee]"
+  const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)")
+  const instances = new Map<HTMLElement, () => void>()
+
+  // A nested marquee owns its own parts.
+  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>
+    [...root.querySelectorAll<T>(selector)].filter(
+      (part) => part.closest(rootSelector) === root
+    )
+
+  // Embla turns loop off when the slides are too few to fill the viewport.
+  const loops = (api: EmblaCarouselType) =>
+    api.internalEngine().options.loop && api.scrollSnapList().length > 1
+
+  const initialize = () => {
+    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {
+      if (instances.has(root)) continue
+      const toggles = getParts<HTMLButtonElement>(root, "[data-marquee-toggle]")
+      const rows: Row[] = getParts<HTMLElement>(
+        root,
+        "[data-marquee-viewport]"
+      ).map((viewport) => ({ viewport }))
+      // Moving content needs a way to pause it, so a marquee without a toggle
+      // stays static. Focus, dragging and the toggle pause it until the toggle
+      // plays it again; hovering a row pauses it only while the pointer is
+      // over it.
+      let playing = true
+      let hovered = false
+
+      const sync = () => {
+        const moving = rows.filter((row) => row.autoScroll)
+        for (const row of moving) {
+          if (playing && !hovered) row.autoScroll?.play()
+          else row.autoScroll?.stop()
+        }
+        for (const toggle of toggles) {
+          toggle.hidden = moving.length === 0
+          toggle.dataset.state = playing ? "playing" : "paused"
+          const label = toggle.querySelector("[data-marquee-label]")
+          if (label)
+            label.textContent =
+              (playing
+                ? toggle.dataset.pauseLabel
+                : toggle.dataset.playLabel) ?? ""
+        }
+      }
+
+      const stop = (row: Row) => {
+        row.api?.destroy()
+        row.api = undefined
+        row.autoScroll = undefined
+        delete row.viewport.dataset.active
+        // A static row scrolls natively; give it a tab stop when it overflows
+        // and has no focusable content of its own.
+        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth
+        const focusable = row.viewport.querySelector(
+          "a[href], button, input, select, textarea, [tabindex]"
+        )
+        if (overflows && !focusable) row.viewport.tabIndex = 0
+        else row.viewport.removeAttribute("tabindex")
+      }
+
+      const evaluate = (row: Row) => {
+        if (reducedMotion.matches || toggles.length === 0) return stop(row)
+        if (row.api) return
+        row.viewport.scrollLeft = 0
+        const autoScroll = AutoScroll({
+          speed: 1,
+          startDelay: 0,
+          playOnInit: false,
+          stopOnFocusIn: false,
+          stopOnInteraction: true,
+          direction: row.viewport.hasAttribute("data-reverse")
+            ? "backward"
+            : "forward",
+        })
+        const api = EmblaCarousel(
+          row.viewport,
+          {
+            loop: true,
+            dragFree: true,
+            direction:
+              getComputedStyle(row.viewport).direction === "rtl"
+                ? "rtl"
+                : "ltr",
+          },
+          [autoScroll]
+        )
+        if (!loops(api)) {
+          api.destroy()
+          return stop(row)
+        }
+        row.api = api
+        row.autoScroll = autoScroll
+        row.viewport.dataset.active = ""
+        row.viewport.removeAttribute("tabindex")
+        api.on("pointerDown", () => {
+          playing = false
+          sync()
+        })
+        api.on("reInit", () => {
+          if (!loops(api)) stop(row)
+          sync()
+        })
+      }
+
+      // Embla watches size changes while it runs; this observer lets a static
+      // row start once its content no longer fits.
+      let frame = 0
+      const observer = new ResizeObserver(() => {
+        cancelAnimationFrame(frame)
+        frame = requestAnimationFrame(() => {
+          for (const row of rows) if (!row.api) evaluate(row)
+          sync()
+        })
+      })
+      for (const row of rows) {
+        observer.observe(row.viewport)
+        for (const item of row.viewport.firstElementChild?.children ?? [])
+          observer.observe(item)
+      }
+
+      const onMotionChange = () => {
+        for (const row of rows) evaluate(row)
+        sync()
+      }
+      const onFocusIn = (event: FocusEvent) => {
+        if (
+          event.target instanceof Element &&
+          event.target.closest("[data-marquee-toggle]")
+        )
+          return
+        playing = false
+        sync()
+      }
+      const onPointerEnter = (event: PointerEvent) => {
+        if (event.pointerType !== "mouse") return
+        hovered = true
+        sync()
+      }
+      const onPointerLeave = () => {
+        hovered = false
+        sync()
+      }
+      const onToggle = () => {
+        playing = !playing
+        sync()
+      }
+
+      reducedMotion.addEventListener("change", onMotionChange)
+      root.addEventListener("focusin", onFocusIn)
+      for (const row of rows) {
+        row.viewport.addEventListener("pointerenter", onPointerEnter)
+        row.viewport.addEventListener("pointerleave", onPointerLeave)
+      }
+      for (const toggle of toggles) toggle.addEventListener("click", onToggle)
+      for (const row of rows) evaluate(row)
+      sync()
 
-    to {
-      transform: translateX(-100%);
+      instances.set(root, () => {
+        cancelAnimationFrame(frame)
+        observer.disconnect()
+        reducedMotion.removeEventListener("change", onMotionChange)
+        root.removeEventListener("focusin", onFocusIn)
+        for (const row of rows) {
+          row.viewport.removeEventListener("pointerenter", onPointerEnter)
+          row.viewport.removeEventListener("pointerleave", onPointerLeave)
+        }
+        for (const toggle of toggles)
+          toggle.removeEventListener("click", onToggle)
+        for (const row of rows) row.api?.destroy()
+      })
     }
   }
-</style>
+  initialize()
+  document.addEventListener("astro:page-load", initialize)
+  document.addEventListener("astro:before-swap", () => {
+    for (const cleanup of instances.values()) cleanup()
+    instances.clear()
+  })
+</script>
diff --git a/src/content/pages/components/marquee.mdx b/src/content/pages/components/marquee.mdx
index 98886ace7..ebfa97abd 100644
--- a/src/content/pages/components/marquee.mdx
+++ b/src/content/pages/components/marquee.mdx
@@ -1,20 +1,53 @@
 ---
 type: doc
 title: Marquee
-description: A continuous scrolling animation component for displaying content in a loop.
+description: A continuously scrolling row of content, with a pause control and a static fallback.
 ---
 
 ```astro live props={{ name: 'marquee' }}
 ---
-import { Marquee } from "@/components/ui/marquee"
-
-const items = ["React", "Vue", "Angular", "Svelte", "Astro", "Next.js"]
+import {
+  Marquee,
+  MarqueeContent,
+  MarqueeItem,
+  MarqueeToggle,
+} from "@/components/ui/marquee"
+
+const items = [
+  "Astro",
+  "Tailwind CSS",
+  "TypeScript",
+  "Content collections",
+  "Design tokens",
+  "Accessibility",
+  "Responsive images",
+  "View transitions",
+  "Markdown",
+  "Static output",
+  "Registries",
+  "Themes",
+  "Dark mode",
+  "Forms",
+  "Navigation",
+  "Search",
+  "Localization",
+  "Sitemaps",
+  "Performance",
+  "SEO",
+]
 ---
 
-<Marquee class="mask-x-from-95%">
-  {items.map((item) => (
-    <span class="text-muted-foreground text-sm">{item}</span>
-  ))}
+<Marquee class="flex w-full flex-col items-end gap-4">
+  <MarqueeToggle playLabel="Play" pauseLabel="Pause" />
+  <MarqueeContent class="w-full mask-x-from-90%">
+    {items.map((item) => (
+      <MarqueeItem>
+        <span class="text-muted-foreground text-sm whitespace-nowrap">
+          {item}
+        </span>
+      </MarqueeItem>
+    ))}
+  </MarqueeContent>
 </Marquee>
 ```
 
@@ -27,92 +60,124 @@ npx shadcn@latest add @fulldev/marquee
 ## Usage
 
 ```ts
-import { Marquee } from "@/components/ui/marquee"
+import {
+  Marquee,
+  MarqueeContent,
+  MarqueeItem,
+  MarqueeToggle,
+} from "@/components/ui/marquee"
 ```
 
 ```astro
-<Marquee>
-  <span>Design systems</span>
-  <span>Astro</span>
-  <span>Content sites</span>
+<Marquee class="w-full">
+  <MarqueeToggle playLabel="Play" pauseLabel="Pause" />
+  <MarqueeContent>
+    <MarqueeItem>Design systems</MarqueeItem>
+    <MarqueeItem>Astro</MarqueeItem>
+    <MarqueeItem>Content sites</MarqueeItem>
+  </MarqueeContent>
 </Marquee>
 ```
 
-The marquee duplicates its slot by default for a seamless loop.
+Each item renders once. The row loops by moving its own items with [Embla](https://www.embla-carousel.com/) and its Auto Scroll plugin, so links and other content are never duplicated.
 
-```astro
-<Marquee>
-  <span>Design systems</span>
-  <span>Astro</span>
-  <span>Content sites</span>
-</Marquee>
-```
+The row only moves when it can loop and the visitor allows motion. It stays a static, horizontally scrollable row when:
 
-## Examples
+- the items do not fill the row,
+- the visitor prefers reduced motion,
+- the marquee has no `MarqueeToggle`, because moving content needs a way to pause it,
+- JavaScript has not run.
 
-### Seamless Loop
+`MarqueeToggle` shows only while the row moves. Its labels come from you, so they can be in the page language. Focus inside the row, dragging it or pressing the toggle pauses the motion until the toggle plays it again. Hovering with a mouse pauses it while the pointer is over the marquee.
 
-```astro live
----
-import { Marquee } from "@/components/ui/marquee"
-
-const items = ["React", "Vue", "Angular", "Svelte", "Astro", "Next.js"]
----
-
-<Marquee class="mask-x-from-95%">
-  {items.map((item) => (
-    <span class="text-muted-foreground text-sm">{item}</span>
-  ))}
-</Marquee>
-```
+## Examples
 
-### Direction
+### Rows
 
-Control the scroll direction with the `direction` prop.
+A marquee can hold several `MarqueeContent` rows. One toggle controls all of them. Set `reverse` to move a row against the reading direction.
 
 ```astro live
 ---
-import { Marquee } from "@/components/ui/marquee"
-
-const items = ["TypeScript", "JavaScript", "Python", "Go", "Rust"]
+import {
+  Marquee,
+  MarqueeContent,
+  MarqueeItem,
+  MarqueeToggle,
+} from "@/components/ui/marquee"
+
+const languages = [
+  "TypeScript",
+  "JavaScript",
+  "Python",
+  "Go",
+  "Rust",
+  "Kotlin",
+  "Swift",
+  "Ruby",
+  "Elixir",
+  "PHP",
+  "C#",
+  "Java",
+  "Scala",
+  "Haskell",
+  "Dart",
+  "Zig",
+  "Lua",
+  "Perl",
+  "OCaml",
+  "Julia",
+]
 ---
 
-<div class="flex flex-col gap-8">
-  <Marquee class="mask-x-from-95%">
-    {items.map((item) => (
-      <span class="text-muted-foreground text-sm">{item}</span>
+<Marquee class="flex w-full flex-col items-end gap-4">
+  <MarqueeToggle playLabel="Play" pauseLabel="Pause" />
+  <MarqueeContent class="w-full mask-x-from-90%">
+    {languages.map((language) => (
+      <MarqueeItem>
+        <span class="text-muted-foreground text-sm">{language}</span>
+      </MarqueeItem>
     ))}
-  </Marquee>
-
-  <Marquee class="mask-x-from-95%" direction="right">
-    {items.map((item) => (
-      <span class="text-muted-foreground text-sm">{item}</span>
+  </MarqueeContent>
+  <MarqueeContent reverse class="w-full mask-x-from-90%">
+    {languages.map((language) => (
+      <MarqueeItem>
+        <span class="text-muted-foreground text-sm">{language}</span>
+      </MarqueeItem>
     ))}
-  </Marquee>
-</div>
+  </MarqueeContent>
+</Marquee>
 ```
 
-### Pause on Hover
+### Few items
 
-Enable pause on hover with the `pauseOnHover` prop.
+Items that fit the row stay centered and do not move.
 
 ```astro live
 ---
-import { Marquee } from "@/components/ui/marquee"
-
-const items = ["Tailwind CSS", "Bootstrap", "Sass", "PostCSS"]
+import {
+  Marquee,
+  MarqueeContent,
+  MarqueeItem,
+  MarqueeToggle,
+} from "@/components/ui/marquee"
 ---
 
-<Marquee class="mask-x-from-95%" pauseOnHover>
-  {items.map((item) => (
-    <span class="text-muted-foreground text-sm">{item}</span>
-  ))}
+<Marquee class="w-full">
+  <MarqueeToggle playLabel="Play" pauseLabel="Pause" />
+  <MarqueeContent>
+    <MarqueeItem>
+      <span class="text-muted-foreground text-sm">Tailwind CSS</span>
+    </MarqueeItem>
+    <MarqueeItem>
+      <span class="text-muted-foreground text-sm">PostCSS</span>
+    </MarqueeItem>
+  </MarqueeContent>
 </Marquee>
 ```
 
 ## Styling
 
-Set `infinite={false}` when you only want to render the slot once.
+Items are `--spacing(4)` apart. Set `--marquee-gap` on the marquee to change that, for example `class="[--marquee-gap:--spacing(12)]"`.
 
 ## API Reference
 

From 25ad900524114a65d7da9db8faed1cda9a27e17a Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 17:37:41 +0200
Subject: [PATCH 33/60] Use quote semantics in reviews and run Logos2 and
 Reviews4-5 on the new Marquee

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/blocks/logos-1.astro   |  23 +-
 src/components/blocks/logos-2.astro   |  56 +++--
 src/components/blocks/logos-3.astro   |  21 +-
 src/components/blocks/reviews-1.astro |  38 +--
 src/components/blocks/reviews-2.astro |  36 +--
 src/components/blocks/reviews-3.astro |  16 +-
 src/components/blocks/reviews-4.astro | 118 +++++----
 src/components/blocks/reviews-5.astro | 171 +++++--------
 src/content/pages/blocks/logos.mdx    |  53 ++--
 src/content/pages/blocks/reviews.mdx  | 334 ++++++++++++++++----------
 10 files changed, 457 insertions(+), 409 deletions(-)

diff --git a/src/components/blocks/logos-1.astro b/src/components/blocks/logos-1.astro
index bba90383d..702fccbc2 100644
--- a/src/components/blocks/logos-1.astro
+++ b/src/components/blocks/logos-1.astro
@@ -23,20 +23,25 @@ const { class: className, title, description, brands, ...props } = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="items-center gap-10 text-center">
+  <SectionContainer class="flex flex-col items-center gap-10 text-center">
     <div class="flex max-w-2xl flex-col items-center gap-4">
       <SectionTitle>{title}</SectionTitle>
       <SectionDescription>{description}</SectionDescription>
     </div>
-    <div class="text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6">
+    <ul class="text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6">
       {brands.map((brand) => (
-        <Logo
-          class="hover:text-foreground grayscale transition-all hover:grayscale-0"
-          href={brand.href}
-        >
-          <LogoText>{brand.name}</LogoText>
-        </Logo>
+        <li>
+          <Logo
+            class={cn(
+              brand.href != null &&
+                "hover:text-foreground transition-colors focus-visible:text-foreground"
+            )}
+            href={brand.href}
+          >
+            <LogoText>{brand.name}</LogoText>
+          </Logo>
+        </li>
       ))}
-    </div>
+    </ul>
   </SectionContainer>
 </Section>
diff --git a/src/components/blocks/logos-2.astro b/src/components/blocks/logos-2.astro
index 0f9d47e4b..89254b2aa 100644
--- a/src/components/blocks/logos-2.astro
+++ b/src/components/blocks/logos-2.astro
@@ -3,7 +3,12 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 import { Logo, LogoText } from "@/components/ui/logo"
-import { Marquee } from "@/components/ui/marquee"
+import {
+  Marquee,
+  MarqueeContent,
+  MarqueeItem,
+  MarqueeToggle,
+} from "@/components/ui/marquee"
 import {
   Section,
   SectionContainer,
@@ -18,30 +23,45 @@ type Props = HTMLAttributes<"section"> & {
     name: string
     href?: string
   }[]
+  labels: {
+    play: string
+    pause: string
+  }
 }
 
-const { class: className, title, description, brands, ...props } = Astro.props
+const {
+  class: className,
+  title,
+  description,
+  brands,
+  labels,
+  ...props
+} = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="items-center gap-4 text-center">
+  <SectionContainer class="flex flex-col items-center gap-4 text-center">
     <SectionTitle>{title}</SectionTitle>
     <SectionDescription class="max-w-2xl">{description}</SectionDescription>
   </SectionContainer>
-  <Marquee
-    class="text-muted-foreground mask-x-from-90%"
-    gap="3rem"
-    duration="30s"
-    pauseOnHover
-    infinite
-  >
-    {brands.map((brand) => (
-      <Logo
-        class="hover:text-foreground grayscale transition-all hover:grayscale-0"
-        href={brand.href}
-      >
-        <LogoText>{brand.name}</LogoText>
-      </Logo>
-    ))}
+  <Marquee class="flex flex-col gap-4 [--marquee-gap:--spacing(12)]">
+    <SectionContainer class="flex justify-end">
+      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />
+    </SectionContainer>
+    <MarqueeContent class="text-muted-foreground mask-x-from-90%">
+      {brands.map((brand) => (
+        <MarqueeItem class="flex items-center">
+          <Logo
+            class={cn(
+              brand.href != null &&
+                "hover:text-foreground focus-visible:text-foreground transition-colors"
+            )}
+            href={brand.href}
+          >
+            <LogoText>{brand.name}</LogoText>
+          </Logo>
+        </MarqueeItem>
+      ))}
+    </MarqueeContent>
   </Marquee>
 </Section>
diff --git a/src/components/blocks/logos-3.astro b/src/components/blocks/logos-3.astro
index fc21e50eb..8c9836843 100644
--- a/src/components/blocks/logos-3.astro
+++ b/src/components/blocks/logos-3.astro
@@ -17,15 +17,20 @@ const { class: className, brands, ...props } = Astro.props
 
 <Section class={cn("py-12 lg:py-16", className)} {...props}>
   <SectionContainer>
-    <div class="text-muted-foreground flex flex-wrap items-center justify-center gap-x-12 gap-y-6">
+    <ul class="text-muted-foreground flex flex-wrap items-center justify-center gap-x-12 gap-y-6">
       {brands.map((brand) => (
-        <Logo
-          class="hover:text-foreground grayscale transition-all hover:grayscale-0"
-          href={brand.href}
-        >
-          <LogoText>{brand.name}</LogoText>
-        </Logo>
+        <li>
+          <Logo
+            class={cn(
+              brand.href != null &&
+                "hover:text-foreground transition-colors focus-visible:text-foreground"
+            )}
+            href={brand.href}
+          >
+            <LogoText>{brand.name}</LogoText>
+          </Logo>
+        </li>
       ))}
-    </div>
+    </ul>
   </SectionContainer>
 </Section>
diff --git a/src/components/blocks/reviews-1.astro b/src/components/blocks/reviews-1.astro
index 9c6a62c70..a18c0fe9c 100644
--- a/src/components/blocks/reviews-1.astro
+++ b/src/components/blocks/reviews-1.astro
@@ -32,7 +32,7 @@ const { class: className, title, description, reviews, ...props } = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="items-center gap-4 text-center">
+  <SectionContainer class="flex flex-col items-center gap-4 text-center">
     <SectionTitle>{title}</SectionTitle>
     <SectionDescription class="max-w-2xl">{description}</SectionDescription>
   </SectionContainer>
@@ -40,24 +40,26 @@ const { class: className, title, description, reviews, ...props } = Astro.props
     <div class="grid gap-6 md:grid-cols-3">
       {reviews.map((item) => (
         <Card>
-          <CardContent class="flex flex-col gap-4">
-            <div class="flex items-center justify-between">
-              <Rating value={item.rating} aria-label={item.ratingLabel} />
-              <QuoteIcon class="text-muted-foreground/20 size-6" />
-            </div>
-            <p class="text-muted-foreground text-sm leading-relaxed">
-              {item.quote}
-            </p>
-            <div class="flex items-center gap-3 pt-2">
-              <Avatar size="lg">
-                <AvatarImage src={item.image} alt={item.name} />
-                <AvatarFallback>{item.initials}</AvatarFallback>
-              </Avatar>
-              <div>
-                <p class="text-foreground text-sm font-medium">{item.name}</p>
-                <p class="text-muted-foreground text-xs">{item.role}</p>
+          <CardContent class="flex flex-1 flex-col">
+            <figure class="flex flex-1 flex-col gap-4">
+              <div class="flex items-center justify-between">
+                <Rating value={item.rating} aria-label={item.ratingLabel} />
+                <QuoteIcon class="text-muted-foreground/20 size-6" />
               </div>
-            </div>
+              <blockquote class="text-muted-foreground text-sm leading-relaxed">
+                <p>{item.quote}</p>
+              </blockquote>
+              <figcaption class="mt-auto flex items-center gap-3 pt-2">
+                <Avatar size="lg" aria-hidden="true">
+                  <AvatarImage src={item.image} />
+                  <AvatarFallback>{item.initials}</AvatarFallback>
+                </Avatar>
+                <div>
+                  <p class="text-foreground text-sm font-medium">{item.name}</p>
+                  <p class="text-muted-foreground text-xs">{item.role}</p>
+                </div>
+              </figcaption>
+            </figure>
           </CardContent>
         </Card>
       ))}
diff --git a/src/components/blocks/reviews-2.astro b/src/components/blocks/reviews-2.astro
index cb9ce7b11..9040a6214 100644
--- a/src/components/blocks/reviews-2.astro
+++ b/src/components/blocks/reviews-2.astro
@@ -33,43 +33,43 @@ const { class: className, featured, reviews, ...props } = Astro.props
 
 <Section class={cn("", className)} {...props}>
   <SectionContainer class="grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start">
-    <article class="flex flex-col gap-6 rounded-xl border p-8">
+    <figure class="flex flex-col gap-6 rounded-xl border p-8">
       <QuoteIcon class="text-primary size-8" />
       <blockquote class="text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl">
-        {featured.quote}
+        <p>{featured.quote}</p>
       </blockquote>
-      <div class="flex items-center gap-3 pt-2">
-        <Avatar size="lg">
-          <AvatarImage src={featured.image} alt={featured.name} />
+      <figcaption class="flex items-center gap-3 pt-2">
+        <Avatar size="lg" aria-hidden="true">
+          <AvatarImage src={featured.image} />
           <AvatarFallback>{featured.initials}</AvatarFallback>
         </Avatar>
         <div>
           <p class="text-foreground text-sm font-medium">{featured.name}</p>
           <p class="text-muted-foreground text-xs">{featured.role}</p>
         </div>
-      </div>
-    </article>
+      </figcaption>
+    </figure>
     <div class="grid gap-6">
       {reviews.map((item) => (
-        <article class="flex flex-col">
+        <div class="flex flex-col">
           <Separator />
-          <div class="flex flex-col gap-3 pt-6">
+          <figure class="flex flex-col gap-3 pt-6">
             <Rating value={item.rating} aria-label={item.ratingLabel} />
-            <p class="text-muted-foreground text-sm leading-relaxed">
-              {item.quote}
-            </p>
-            <div class="flex items-center gap-3 pt-1">
-              <Avatar>
-                <AvatarImage src={item.image} alt={item.name} />
+            <blockquote class="text-muted-foreground text-sm leading-relaxed">
+              <p>{item.quote}</p>
+            </blockquote>
+            <figcaption class="flex items-center gap-3 pt-1">
+              <Avatar aria-hidden="true">
+                <AvatarImage src={item.image} />
                 <AvatarFallback>{item.initials}</AvatarFallback>
               </Avatar>
               <div>
                 <p class="text-foreground text-sm font-medium">{item.name}</p>
                 <p class="text-muted-foreground text-xs">{item.role}</p>
               </div>
-            </div>
-          </div>
-        </article>
+            </figcaption>
+          </figure>
+        </div>
       ))}
     </div>
   </SectionContainer>
diff --git a/src/components/blocks/reviews-3.astro b/src/components/blocks/reviews-3.astro
index 192c8fd2b..57e87fb17 100644
--- a/src/components/blocks/reviews-3.astro
+++ b/src/components/blocks/reviews-3.astro
@@ -53,7 +53,7 @@ const {
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="items-center gap-4 text-center">
+  <SectionContainer class="flex flex-col items-center gap-4 text-center">
     <SectionTitle>{title}</SectionTitle>
     <SectionDescription class="max-w-2xl">{description}</SectionDescription>
   </SectionContainer>
@@ -67,23 +67,23 @@ const {
       <CarouselContent>
         {reviews.map((item) => (
           <CarouselItem aria-roledescription={labels.slide}>
-            <div class="flex flex-col items-center gap-6 px-4 py-8 text-center">
+            <figure class="flex flex-col items-center gap-6 px-4 py-8 text-center">
               <QuoteIcon class="text-primary size-10" />
               <Rating value={item.rating} aria-label={item.ratingLabel} />
               <blockquote class="text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl">
-                {item.quote}
+                <p>{item.quote}</p>
               </blockquote>
-              <div class="flex items-center gap-3 pt-2">
-                <Avatar size="lg">
-                  <AvatarImage src={item.image} alt={item.name} />
+              <figcaption class="flex items-center gap-3 pt-2">
+                <Avatar size="lg" aria-hidden="true">
+                  <AvatarImage src={item.image} />
                   <AvatarFallback>{item.initials}</AvatarFallback>
                 </Avatar>
                 <div class="text-left">
                   <p class="text-foreground text-sm font-medium">{item.name}</p>
                   <p class="text-muted-foreground text-xs">{item.role}</p>
                 </div>
-              </div>
-            </div>
+              </figcaption>
+            </figure>
           </CarouselItem>
         ))}
       </CarouselContent>
diff --git a/src/components/blocks/reviews-4.astro b/src/components/blocks/reviews-4.astro
index 84f760fab..b3788eb76 100644
--- a/src/components/blocks/reviews-4.astro
+++ b/src/components/blocks/reviews-4.astro
@@ -5,7 +5,12 @@ import type { HTMLAttributes } from "astro/types"
 import { cn } from "@/lib/utils"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Card, CardContent } from "@/components/ui/card"
-import { Marquee } from "@/components/ui/marquee"
+import {
+  Marquee,
+  MarqueeContent,
+  MarqueeItem,
+  MarqueeToggle,
+} from "@/components/ui/marquee"
 import { Rating } from "@/components/ui/rating"
 import {
   Section,
@@ -17,6 +22,10 @@ import {
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
+  labels: {
+    play: string
+    pause: string
+  }
   reviews: {
     rating: number
     ratingLabel: string
@@ -28,74 +37,59 @@ type Props = HTMLAttributes<"section"> & {
   }[]
 }
 
-const { class: className, title, description, reviews, ...props } = Astro.props
+const {
+  class: className,
+  title,
+  description,
+  labels,
+  reviews,
+  ...props
+} = Astro.props
 
 const half = Math.ceil(reviews.length / 2)
-const topRow = reviews.slice(0, half)
-const bottomRow = reviews.slice(half)
+const rows = [reviews.slice(0, half), reviews.slice(half)]
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="items-center gap-4 text-center">
+  <SectionContainer class="flex flex-col items-center gap-4 text-center">
     <SectionTitle>{title}</SectionTitle>
     <SectionDescription class="max-w-2xl">{description}</SectionDescription>
   </SectionContainer>
-  <div class="flex flex-col gap-6 overflow-x-hidden py-1">
-    <Marquee
-      direction="left"
-      pauseOnHover
-      infinite
-      gap="1rem"
-      class="py-1 [&>div]:items-stretch"
-    >
-      {topRow.map((item) => (
-        <Card class="flex w-[22rem] shrink-0 self-stretch">
-          <CardContent class="flex flex-1 flex-col gap-3">
-            <Rating value={item.rating} aria-label={item.ratingLabel} />
-            <p class="text-muted-foreground text-sm leading-relaxed">
-              {item.quote}
-            </p>
-            <div class="mt-auto flex items-center gap-3 pt-1">
-              <Avatar>
-                <AvatarImage src={item.image} alt={item.name} />
-                <AvatarFallback>{item.initials}</AvatarFallback>
-              </Avatar>
-              <div>
-                <p class="text-foreground text-sm font-medium">{item.name}</p>
-                <p class="text-muted-foreground text-xs">{item.role}</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      ))}
-    </Marquee>
-    <Marquee
-      direction="right"
-      pauseOnHover
-      infinite
-      gap="1rem"
-      class="py-1 [&>div]:items-stretch"
-    >
-      {bottomRow.map((item) => (
-        <Card class="flex w-[22rem] shrink-0 self-stretch">
-          <CardContent class="flex flex-1 flex-col gap-3">
-            <Rating value={item.rating} aria-label={item.ratingLabel} />
-            <p class="text-muted-foreground text-sm leading-relaxed">
-              {item.quote}
-            </p>
-            <div class="mt-auto flex items-center gap-3 pt-1">
-              <Avatar>
-                <AvatarImage src={item.image} alt={item.name} />
-                <AvatarFallback>{item.initials}</AvatarFallback>
-              </Avatar>
-              <div>
-                <p class="text-foreground text-sm font-medium">{item.name}</p>
-                <p class="text-muted-foreground text-xs">{item.role}</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
+  <Marquee class="flex flex-col gap-6">
+    <SectionContainer class="flex justify-end">
+      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />
+    </SectionContainer>
+    {rows
+      .filter((row) => row.length > 0)
+      .map((row, index) => (
+        <MarqueeContent reverse={index % 2 === 1} class="py-1">
+          {row.map((item) => (
+            <MarqueeItem class="flex">
+              <Card class="w-[22rem]">
+                <CardContent class="flex flex-1 flex-col">
+                  <figure class="flex flex-1 flex-col gap-3">
+                    <Rating value={item.rating} aria-label={item.ratingLabel} />
+                    <blockquote class="text-muted-foreground text-sm leading-relaxed">
+                      <p>{item.quote}</p>
+                    </blockquote>
+                    <figcaption class="mt-auto flex items-center gap-3 pt-1">
+                      <Avatar aria-hidden="true">
+                        <AvatarImage src={item.image} />
+                        <AvatarFallback>{item.initials}</AvatarFallback>
+                      </Avatar>
+                      <div>
+                        <p class="text-foreground text-sm font-medium">
+                          {item.name}
+                        </p>
+                        <p class="text-muted-foreground text-xs">{item.role}</p>
+                      </div>
+                    </figcaption>
+                  </figure>
+                </CardContent>
+              </Card>
+            </MarqueeItem>
+          ))}
+        </MarqueeContent>
       ))}
-    </Marquee>
-  </div>
+  </Marquee>
 </Section>
diff --git a/src/components/blocks/reviews-5.astro b/src/components/blocks/reviews-5.astro
index d9693ba23..d43ed61f5 100644
--- a/src/components/blocks/reviews-5.astro
+++ b/src/components/blocks/reviews-5.astro
@@ -5,7 +5,12 @@ import QuoteIcon from "@lucide/astro/icons/quote"
 
 import { cn } from "@/lib/utils"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Marquee } from "@/components/ui/marquee"
+import {
+  Marquee,
+  MarqueeContent,
+  MarqueeItem,
+  MarqueeToggle,
+} from "@/components/ui/marquee"
 import { Rating } from "@/components/ui/rating"
 import {
   Section,
@@ -17,6 +22,10 @@ import {
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
+  labels: {
+    play: string
+    pause: string
+  }
   reviews: {
     quote: string
     image?: ImageMetadata
@@ -28,124 +37,64 @@ type Props = HTMLAttributes<"section"> & {
   }[]
 }
 
-const { class: className, title, description, reviews, ...props } = Astro.props
+const {
+  class: className,
+  title,
+  description,
+  labels,
+  reviews,
+  ...props
+} = Astro.props
 
 const third = Math.ceil(reviews.length / 3)
-const row1 = reviews.slice(0, third)
-const row2 = reviews.slice(third, third * 2)
-const row3 = reviews.slice(third * 2)
+const rows = [
+  reviews.slice(0, third),
+  reviews.slice(third, third * 2),
+  reviews.slice(third * 2),
+]
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="items-center gap-4 text-center">
+  <SectionContainer class="flex flex-col items-center gap-4 text-center">
     <SectionTitle>{title}</SectionTitle>
     <SectionDescription class="max-w-2xl">{description}</SectionDescription>
   </SectionContainer>
-  <div class="flex flex-col gap-5">
-    <Marquee
-      direction="left"
-      pauseOnHover
-      infinite
-      gap="1.25rem"
-      class="[&>div]:items-stretch"
-    >
-      {row1.map((item) => (
-        <div class="bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6">
-          <div class="flex flex-1 flex-col gap-4">
-            <div class="flex items-center justify-between">
-              <div class="flex items-center gap-3">
-                <Avatar size="lg">
-                  <AvatarImage src={item.image} alt={item.name} />
-                  <AvatarFallback>{item.initials}</AvatarFallback>
-                </Avatar>
-                <div>
-                  <p class="text-foreground text-sm font-semibold">
-                    {item.name}
-                  </p>
-                  <p class="text-muted-foreground text-xs">{item.role}</p>
-                </div>
-              </div>
-              <Rating value={item.rating} aria-label={item.ratingLabel} />
-            </div>
-            <div class="flex gap-2.5">
-              <QuoteIcon class="text-primary/30 mt-0.5 size-5 shrink-0" />
-              <p class="text-foreground/80 text-sm leading-relaxed">
-                {item.quote}
-              </p>
-            </div>
-          </div>
-        </div>
-      ))}
-    </Marquee>
-    <Marquee
-      direction="right"
-      pauseOnHover
-      infinite
-      gap="1.25rem"
-      class="[&>div]:items-stretch"
-    >
-      {row2.map((item) => (
-        <div class="bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6">
-          <div class="flex flex-1 flex-col gap-4">
-            <div class="flex items-center justify-between">
-              <div class="flex items-center gap-3">
-                <Avatar size="lg">
-                  <AvatarImage src={item.image} alt={item.name} />
-                  <AvatarFallback>{item.initials}</AvatarFallback>
-                </Avatar>
-                <div>
-                  <p class="text-foreground text-sm font-semibold">
-                    {item.name}
-                  </p>
-                  <p class="text-muted-foreground text-xs">{item.role}</p>
-                </div>
-              </div>
-              <Rating value={item.rating} aria-label={item.ratingLabel} />
-            </div>
-            <div class="flex gap-2.5">
-              <QuoteIcon class="text-primary/30 mt-0.5 size-5 shrink-0" />
-              <p class="text-foreground/80 text-sm leading-relaxed">
-                {item.quote}
-              </p>
-            </div>
-          </div>
-        </div>
-      ))}
-    </Marquee>
-    <Marquee
-      direction="left"
-      pauseOnHover
-      infinite
-      gap="1.25rem"
-      class="[&>div]:items-stretch"
-    >
-      {row3.map((item) => (
-        <div class="bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6">
-          <div class="flex flex-1 flex-col gap-4">
-            <div class="flex items-center justify-between">
-              <div class="flex items-center gap-3">
-                <Avatar size="lg">
-                  <AvatarImage src={item.image} alt={item.name} />
-                  <AvatarFallback>{item.initials}</AvatarFallback>
-                </Avatar>
-                <div>
-                  <p class="text-foreground text-sm font-semibold">
-                    {item.name}
-                  </p>
-                  <p class="text-muted-foreground text-xs">{item.role}</p>
+  <Marquee class="flex flex-col gap-5">
+    <SectionContainer class="flex justify-end">
+      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />
+    </SectionContainer>
+    {rows
+      .filter((row) => row.length > 0)
+      .map((row, index) => (
+        <MarqueeContent reverse={index % 2 === 1} class="py-1">
+          {row.map((item) => (
+            <MarqueeItem class="flex">
+              <figure class="bg-muted/50 flex w-[26rem] flex-col gap-4 rounded-2xl p-6">
+                <figcaption class="flex items-center justify-between gap-3">
+                  <div class="flex items-center gap-3">
+                    <Avatar size="lg" aria-hidden="true">
+                      <AvatarImage src={item.image} />
+                      <AvatarFallback>{item.initials}</AvatarFallback>
+                    </Avatar>
+                    <div>
+                      <p class="text-foreground text-sm font-semibold">
+                        {item.name}
+                      </p>
+                      <p class="text-muted-foreground text-xs">{item.role}</p>
+                    </div>
+                  </div>
+                  <Rating value={item.rating} aria-label={item.ratingLabel} />
+                </figcaption>
+                <div class="flex gap-2.5">
+                  <QuoteIcon class="text-primary/30 mt-0.5 size-5 shrink-0" />
+                  <blockquote class="text-foreground/80 text-sm leading-relaxed">
+                    <p>{item.quote}</p>
+                  </blockquote>
                 </div>
-              </div>
-              <Rating value={item.rating} aria-label={item.ratingLabel} />
-            </div>
-            <div class="flex gap-2.5">
-              <QuoteIcon class="text-primary/30 mt-0.5 size-5 shrink-0" />
-              <p class="text-foreground/80 text-sm leading-relaxed">
-                {item.quote}
-              </p>
-            </div>
-          </div>
-        </div>
+              </figure>
+            </MarqueeItem>
+          ))}
+        </MarqueeContent>
       ))}
-    </Marquee>
-  </div>
+  </Marquee>
 </Section>
diff --git a/src/content/pages/blocks/logos.mdx b/src/content/pages/blocks/logos.mdx
index 0012dd205..f2882e47b 100644
--- a/src/content/pages/blocks/logos.mdx
+++ b/src/content/pages/blocks/logos.mdx
@@ -10,14 +10,14 @@ import Logos1Block from "@/components/blocks/logos-1.astro"
 ---
 
 <Logos1Block
-  title="Trusted by industry leaders"
-  description="Join thousands of teams that rely on our platform every day."
+  title="Brands we work with"
+  description="Example brand names. Replace them with the brands you work with."
   brands={[
-    { name: "Northwind", href: "/" },
-    { name: "Frame", href: "/" },
-    { name: "Studio One", href: "/" },
-    { name: "Pioneer", href: "/" },
-    { name: "Pace", href: "/" },
+    { name: "Northwind" },
+    { name: "Frame" },
+    { name: "Studio One" },
+    { name: "Pioneer" },
+    { name: "Pace" },
   ]}
 />
 ```
@@ -28,20 +28,25 @@ import Logos2Block from "@/components/blocks/logos-2.astro"
 ---
 
 <Logos2Block
-  title="Used by teams everywhere"
-  description="A scrolling logo rail for when you have many partners to showcase."
+  title="Brands we work with"
+  description="A scrolling logo rail for when you have many partners to show. These names are examples."
   brands={[
-    { name: "Atlas", href: "/" },
-    { name: "Cinder", href: "/" },
-    { name: "Orbit", href: "/" },
-    { name: "Aster", href: "/" },
-    { name: "Northwind", href: "/" },
-    { name: "Frame", href: "/" },
-    { name: "Studio One", href: "/" },
-    { name: "Pioneer", href: "/" },
-    { name: "Pace", href: "/" },
-    { name: "Signal", href: "/" },
+    { name: "Atlas" },
+    { name: "Cinder" },
+    { name: "Orbit" },
+    { name: "Aster" },
+    { name: "Northwind" },
+    { name: "Frame" },
+    { name: "Studio One" },
+    { name: "Pioneer" },
+    { name: "Pace" },
+    { name: "Signal" },
+    { name: "Meridian" },
+    { name: "Halcyon" },
+    { name: "Lumen" },
+    { name: "Quarry" },
   ]}
+  labels={{ play: "Play logos", pause: "Pause logos" }}
 />
 ```
 
@@ -52,11 +57,11 @@ import Logos3Block from "@/components/blocks/logos-3.astro"
 
 <Logos3Block
   brands={[
-    { name: "Verve", href: "/" },
-    { name: "Northwind", href: "/" },
-    { name: "Studio 9", href: "/" },
-    { name: "Pioneer", href: "/" },
-    { name: "Pace", href: "/" },
+    { name: "Verve" },
+    { name: "Northwind" },
+    { name: "Studio 9" },
+    { name: "Pioneer" },
+    { name: "Pace" },
   ]}
 />
 ```
diff --git a/src/content/pages/blocks/reviews.mdx b/src/content/pages/blocks/reviews.mdx
index a07cebe00..001b98b2d 100644
--- a/src/content/pages/blocks/reviews.mdx
+++ b/src/content/pages/blocks/reviews.mdx
@@ -7,42 +7,42 @@ description: Testimonial and review sections for social proof, trust, and produc
 ```astro live props={{ name: 'reviews-1' }}
 ---
 import Reviews1Block from "@/components/blocks/reviews-1.astro"
-import avatarSil from "@/assets/avatar-sil-veltman.webp"
+import placeholderImage from "@/assets/placeholder.svg"
 ---
 
 <Reviews1Block
-  title="Trusted by teams everywhere"
-  description="See what people are saying about our platform."
+  title="What customers say"
+  description="Example reviews. Replace them with quotes from your customers."
   reviews={[
     {
       rating: 5,
       ratingLabel: "Rated 5 out of 5",
       quote:
-        "The component library saved us weeks of design work. Every piece feels polished and production-ready out of the box.",
-      image: avatarSil,
-      initials: "NO",
-      name: "Northwind",
-      role: "Design systems team",
+        "Example review. Replace it with a short quote from a customer, in their own words.",
+      image: placeholderImage,
+      initials: "CA",
+      name: "Customer A",
+      role: "Role, company",
     },
     {
       rating: 5,
       ratingLabel: "Rated 5 out of 5",
       quote:
-        "We shipped our marketing site in half the time. The blocks are flexible enough to match any brand.",
-      image: avatarSil,
-      initials: "AS",
-      name: "Aster",
-      role: "Engineering lead",
+        "Example review about the result a customer got, such as time saved or a problem solved.",
+      image: placeholderImage,
+      initials: "CB",
+      name: "Customer B",
+      role: "Role, company",
     },
     {
       rating: 4.5,
       ratingLabel: "Rated 4.5 out of 5",
       quote:
-        "Finally a component library that understands how real pages are built. The section patterns are incredibly useful.",
-      image: avatarSil,
-      initials: "SI",
-      name: "Signal",
-      role: "Product designer",
+        "Example review. Specific details, like what changed after working together, read as more credible.",
+      image: placeholderImage,
+      initials: "CC",
+      name: "Customer C",
+      role: "Role, company",
     },
   ]}
 />
@@ -51,38 +51,38 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
 ```astro live props={{ name: 'reviews-2' }}
 ---
 import Reviews2Block from "@/components/blocks/reviews-2.astro"
-import avatarSil from "@/assets/avatar-sil-veltman.webp"
+import placeholderImage from "@/assets/placeholder.svg"
 ---
 
 <Reviews2Block
   featured={{
     quote:
-      "The block previews finally made our component library feel like a page system, not a pile of parts.",
-    image: avatarSil,
-    initials: "SV",
-    name: "Sil Veltman",
-    role: "Founder, Fulldev",
+      "Example review. Replace it with a short quote from a customer, in their own words.",
+    image: placeholderImage,
+    initials: "CA",
+    name: "Customer A",
+    role: "Role, company",
   }}
   reviews={[
     {
       rating: 4.5,
       ratingLabel: "Rated 4.5 out of 5",
       quote:
-        "A narrower review card works well when the section already has one large featured quote beside it.",
-      image: avatarSil,
-      initials: "MK",
-      name: "Maria K.",
-      role: "Frontend developer",
+        "Example review about the result a customer got, such as time saved or a problem solved.",
+      image: placeholderImage,
+      initials: "CB",
+      name: "Customer B",
+      role: "Role, company",
     },
     {
       rating: 5,
       ratingLabel: "Rated 5 out of 5",
       quote:
-        "Clean API, great defaults. We customized the theme in minutes and everything just worked together.",
-      image: avatarSil,
-      initials: "JT",
-      name: "James T.",
-      role: "Tech lead",
+        "Example review. Specific details, like what changed after working together, read as more credible.",
+      image: placeholderImage,
+      initials: "CC",
+      name: "Customer C",
+      role: "Role, company",
     },
   ]}
 />
@@ -91,42 +91,42 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
 ```astro live props={{ name: 'reviews-3' }}
 ---
 import Reviews3Block from "@/components/blocks/reviews-3.astro"
-import avatarSil from "@/assets/avatar-sil-veltman.webp"
+import placeholderImage from "@/assets/placeholder.svg"
 ---
 
 <Reviews3Block
-  title="What our customers say"
-  description="Hear from real teams using our platform every day."
+  title="What customers say"
+  description="Example reviews. Replace them with quotes from your customers."
   reviews={[
     {
       rating: 5,
       ratingLabel: "Rated 5 out of 5",
       quote:
-        "The sections felt immediately useful and saved us weeks of page design churn. Best investment this quarter.",
-      image: avatarSil,
-      initials: "AL",
-      name: "Alex Lindgren",
-      role: "VP of Engineering, Northwind",
+        "Example review. Replace it with a short quote from a customer, in their own words.",
+      image: placeholderImage,
+      initials: "CA",
+      name: "Customer A",
+      role: "Role, company",
     },
     {
       rating: 5,
       ratingLabel: "Rated 5 out of 5",
       quote:
-        "We tried three other component libraries before this. Nothing else comes close in terms of design quality and developer experience.",
-      image: avatarSil,
-      initials: "PR",
-      name: "Priya Rao",
-      role: "Lead Designer, Aster",
+        "Example review about the result a customer got, such as time saved or a problem solved.",
+      image: placeholderImage,
+      initials: "CB",
+      name: "Customer B",
+      role: "Role, company",
     },
     {
       rating: 4.5,
       ratingLabel: "Rated 4.5 out of 5",
       quote:
-        "Our marketing team can now prototype landing pages without engineering help. That alone made it worth it.",
-      image: avatarSil,
-      initials: "DW",
-      name: "David Walsh",
-      role: "Marketing Director, Signal",
+        "Example review. Specific details, like what changed after working together, read as more credible.",
+      image: placeholderImage,
+      initials: "CC",
+      name: "Customer C",
+      role: "Role, company",
     },
   ]}
   labels={{
@@ -141,177 +141,245 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
 ```astro live props={{ name: 'reviews-4' }}
 ---
 import Reviews4Block from "@/components/blocks/reviews-4.astro"
-import avatarSil from "@/assets/avatar-sil-veltman.webp"
+import placeholderImage from "@/assets/placeholder.svg"
 ---
 
 <Reviews4Block
-  title="Loved by thousands"
-  description="Join the teams who already ship faster with our components."
+  title="What customers say"
+  description="Example reviews. Replace them with quotes from your customers."
   reviews={[
     {
       rating: 5,
       ratingLabel: "Rated 5 out of 5",
       quote:
-        "We used the same section patterns across onboarding, features, and pricing without repeating ourselves.",
-      image: avatarSil,
-      initials: "AL",
-      name: "Alex L.",
-      role: "Team lead",
+        "Example review. Replace it with a short quote from a customer, in their own words.",
+      image: placeholderImage,
+      initials: "CA",
+      name: "Customer A",
+      role: "Role, company",
     },
     {
       rating: 4.5,
       ratingLabel: "Rated 4.5 out of 5",
       quote:
-        "The carousel and marquee components are buttery smooth. Our landing page feels premium now.",
-      image: avatarSil,
-      initials: "MP",
-      name: "Maya P.",
-      role: "Frontend dev",
+        "Example review about the result a customer got, such as time saved or a problem solved.",
+      image: placeholderImage,
+      initials: "CB",
+      name: "Customer B",
+      role: "Role, company",
     },
     {
       rating: 5,
       ratingLabel: "Rated 5 out of 5",
       quote:
-        "Accessibility was handled from day one. We passed our audit without a single component fix.",
-      image: avatarSil,
-      initials: "JR",
-      name: "Jordan R.",
-      role: "QA engineer",
+        "Example review. Specific details, like what changed after working together, read as more credible.",
+      image: placeholderImage,
+      initials: "CC",
+      name: "Customer C",
+      role: "Role, company",
+    },
+    {
+      rating: 5,
+      ratingLabel: "Rated 5 out of 5",
+      quote: "Example review. Keep quotes short enough to read at a glance.",
+      image: placeholderImage,
+      initials: "CD",
+      name: "Customer D",
+      role: "Role, company",
+    },
+    {
+      rating: 4.5,
+      ratingLabel: "Rated 4.5 out of 5",
+      quote:
+        "Example review. Ask customers for permission before you publish their name and quote.",
+      image: placeholderImage,
+      initials: "CE",
+      name: "Customer E",
+      role: "Role, company",
     },
     {
       rating: 5,
       ratingLabel: "Rated 5 out of 5",
       quote:
-        "Theming is a breeze. We swapped from light to dark mode in under an hour across 40 pages.",
-      image: avatarSil,
-      initials: "KT",
-      name: "Kim T.",
-      role: "Designer",
+        "Example review. Mention the service or product the customer used.",
+      image: placeholderImage,
+      initials: "CF",
+      name: "Customer F",
+      role: "Role, company",
     },
     {
       rating: 4.5,
       ratingLabel: "Rated 4.5 out of 5",
       quote:
-        "Documentation is clear and examples are practical. Onboarding new devs takes a day, not a week.",
-      image: avatarSil,
-      initials: "RB",
-      name: "Ravi B.",
-      role: "Engineering manager",
+        "Example review. Replace it with a short quote from a customer, in their own words.",
+      image: placeholderImage,
+      initials: "CG",
+      name: "Customer G",
+      role: "Role, company",
+    },
+    {
+      rating: 5,
+      ratingLabel: "Rated 5 out of 5",
+      quote:
+        "Example review about the result a customer got, such as time saved or a problem solved.",
+      image: placeholderImage,
+      initials: "CH",
+      name: "Customer H",
+      role: "Role, company",
     },
     {
       rating: 5,
       ratingLabel: "Rated 5 out of 5",
       quote:
-        "Every component composes beautifully. Building complex layouts from simple parts feels natural.",
-      image: avatarSil,
-      initials: "SN",
-      name: "Sara N.",
-      role: "Product designer",
+        "Example review. Specific details, like what changed after working together, read as more credible.",
+      image: placeholderImage,
+      initials: "CI",
+      name: "Customer I",
+      role: "Role, company",
+    },
+    {
+      rating: 4.5,
+      ratingLabel: "Rated 4.5 out of 5",
+      quote: "Example review. Keep quotes short enough to read at a glance.",
+      image: placeholderImage,
+      initials: "CJ",
+      name: "Customer J",
+      role: "Role, company",
     },
   ]}
+  labels={{ play: "Play reviews", pause: "Pause reviews" }}
 />
 ```
 
 ```astro live props={{ name: 'reviews-5' }}
 ---
 import Reviews5Block from "@/components/blocks/reviews-5.astro"
-import avatarSil from "@/assets/avatar-sil-veltman.webp"
+import placeholderImage from "@/assets/placeholder.svg"
 ---
 
 <Reviews5Block
-  title="Customer reviews"
-  description="Real feedback from real teams building real products."
+  title="What customers say"
+  description="Example reviews. Replace them with quotes from your customers."
   reviews={[
     {
       quote:
-        "The structured approach to page sections changed how we think about design systems entirely.",
-      image: avatarSil,
-      initials: "AL",
-      name: "Alex Lindgren",
-      role: "VP Engineering",
+        "Example review. Replace it with a short quote from a customer, in their own words.",
+      image: placeholderImage,
+      initials: "CA",
+      name: "Customer A",
+      role: "Role, company",
       rating: 5,
       ratingLabel: "Rated 5 out of 5",
     },
     {
       quote:
-        "Row-based review layouts feel more grounded and professional than scattered card grids.",
-      image: avatarSil,
-      initials: "MP",
-      name: "Maya Park",
-      role: "Design lead",
+        "Example review about the result a customer got, such as time saved or a problem solved.",
+      image: placeholderImage,
+      initials: "CB",
+      name: "Customer B",
+      role: "Role, company",
       rating: 4.5,
       ratingLabel: "Rated 4.5 out of 5",
     },
     {
       quote:
-        "Setup was painless. We had our first page live in production within two hours of installing.",
-      image: avatarSil,
-      initials: "JR",
-      name: "Jordan Reed",
-      role: "Fullstack dev",
+        "Example review. Specific details, like what changed after working together, read as more credible.",
+      image: placeholderImage,
+      initials: "CC",
+      name: "Customer C",
+      role: "Role, company",
+      rating: 5,
+      ratingLabel: "Rated 5 out of 5",
+    },
+    {
+      quote: "Example review. Keep quotes short enough to read at a glance.",
+      image: placeholderImage,
+      initials: "CD",
+      name: "Customer D",
+      role: "Role, company",
       rating: 5,
       ratingLabel: "Rated 5 out of 5",
     },
     {
       quote:
-        "The attention to spacing and typography defaults means our pages look great without tweaking.",
-      image: avatarSil,
-      initials: "KT",
-      name: "Kim Torres",
-      role: "Brand designer",
+        "Example review. Ask customers for permission before you publish their name and quote.",
+      image: placeholderImage,
+      initials: "CE",
+      name: "Customer E",
+      role: "Role, company",
       rating: 5,
       ratingLabel: "Rated 5 out of 5",
     },
     {
       quote:
-        "We replaced our entire hand-rolled component library in a single sprint. The API surface is incredibly clean.",
-      image: avatarSil,
-      initials: "RB",
-      name: "Ravi Bhat",
-      role: "Engineering manager",
+        "Example review. Mention the service or product the customer used.",
+      image: placeholderImage,
+      initials: "CF",
+      name: "Customer F",
+      role: "Role, company",
       rating: 5,
       ratingLabel: "Rated 5 out of 5",
     },
     {
       quote:
-        "Accessibility was built in from the start. We passed our WCAG audit without changing a single component.",
-      image: avatarSil,
-      initials: "SN",
-      name: "Sara Novak",
-      role: "Product designer",
+        "Example review. Replace it with a short quote from a customer, in their own words.",
+      image: placeholderImage,
+      initials: "CG",
+      name: "Customer G",
+      role: "Role, company",
+      rating: 4.5,
+      ratingLabel: "Rated 4.5 out of 5",
+    },
+    {
+      quote:
+        "Example review about the result a customer got, such as time saved or a problem solved.",
+      image: placeholderImage,
+      initials: "CH",
+      name: "Customer H",
+      role: "Role, company",
       rating: 5,
       ratingLabel: "Rated 5 out of 5",
     },
     {
       quote:
-        "Theming took minutes, not days. We matched our brand guidelines across 30 pages in one afternoon.",
-      image: avatarSil,
-      initials: "DW",
-      name: "David Walsh",
-      role: "Marketing director",
+        "Example review. Specific details, like what changed after working together, read as more credible.",
+      image: placeholderImage,
+      initials: "CI",
+      name: "Customer I",
+      role: "Role, company",
+      rating: 5,
+      ratingLabel: "Rated 5 out of 5",
+    },
+    {
+      quote: "Example review. Keep quotes short enough to read at a glance.",
+      image: placeholderImage,
+      initials: "CJ",
+      name: "Customer J",
+      role: "Role, company",
       rating: 4.5,
       ratingLabel: "Rated 4.5 out of 5",
     },
     {
       quote:
-        "The composable block patterns let us prototype landing pages faster than any tool we have tried.",
-      image: avatarSil,
-      initials: "LH",
-      name: "Lisa Huang",
-      role: "Growth engineer",
+        "Example review. Ask customers for permission before you publish their name and quote.",
+      image: placeholderImage,
+      initials: "CK",
+      name: "Customer K",
+      role: "Role, company",
       rating: 5,
       ratingLabel: "Rated 5 out of 5",
     },
     {
       quote:
-        "Documentation is thorough and examples are practical. New team members are productive on day one.",
-      image: avatarSil,
-      initials: "TC",
-      name: "Tom Chen",
-      role: "Tech lead",
+        "Example review. Mention the service or product the customer used.",
+      image: placeholderImage,
+      initials: "CL",
+      name: "Customer L",
+      role: "Role, company",
       rating: 5,
       ratingLabel: "Rated 5 out of 5",
     },
   ]}
+  labels={{ play: "Play reviews", pause: "Pause reviews" }}
 />
 ```

From 9df1d9128b0ac80a751b5240bb6ebcf5e08f8d1e Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 17:37:41 +0200
Subject: [PATCH 34/60] Make hero and CTA backdrops and social proof avatars
 decorative

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/blocks/cta-1.astro   |  10 +--
 src/components/blocks/cta-2.astro   |  10 +--
 src/components/blocks/cta-3.astro   |   8 +-
 src/components/blocks/cta-4.astro   |  15 ++--
 src/components/blocks/cta-5.astro   |   6 +-
 src/components/blocks/cta-6.astro   |  10 +--
 src/components/blocks/cta-7.astro   |  16 ++--
 src/components/blocks/cta-8.astro   |   2 +-
 src/components/blocks/hero-1.astro  |  12 +--
 src/components/blocks/hero-10.astro |  11 +--
 src/components/blocks/hero-11.astro |  13 +--
 src/components/blocks/hero-12.astro |   2 +-
 src/components/blocks/hero-13.astro |   2 +-
 src/components/blocks/hero-2.astro  |  10 +--
 src/components/blocks/hero-3.astro  |   5 +-
 src/components/blocks/hero-4.astro  |   9 +--
 src/components/blocks/hero-5.astro  |  14 ++--
 src/components/blocks/hero-6.astro  |  14 ++--
 src/components/blocks/hero-7.astro  |  14 ++--
 src/components/blocks/hero-8.astro  |   2 +-
 src/components/blocks/hero-9.astro  |  15 ++--
 src/content/pages/blocks/cta.mdx    |  87 ++++++++++----------
 src/content/pages/blocks/hero.mdx   | 119 +++++++++++++---------------
 src/content/pages/blocks/index.mdx  |   2 +-
 src/content/pages/index.mdx         |  16 ++--
 25 files changed, 182 insertions(+), 242 deletions(-)

diff --git a/src/components/blocks/cta-1.astro b/src/components/blocks/cta-1.astro
index f82d48092..70e341bfa 100644
--- a/src/components/blocks/cta-1.astro
+++ b/src/components/blocks/cta-1.astro
@@ -29,7 +29,6 @@ type Props = HTMLAttributes<"section"> & {
     avatars: {
       image?: ImageMetadata
       initials: string
-      name?: string
     }[]
     rating: number
     ratingLabel: string
@@ -48,16 +47,13 @@ const {
 ---
 
 <Section variant="floating" class={cn("", className)} {...props}>
-  <SectionContainer class="items-center text-center">
+  <SectionContainer class="flex flex-col gap-8 items-center text-center">
     {socialProof && (
       <div class="flex flex-col items-center gap-3">
-        <AvatarGroup>
+        <AvatarGroup aria-hidden="true">
           {socialProof.avatars.map((avatar) => (
             <Avatar class="ring-background size-11 ring">
-              <AvatarImage
-                src={avatar.image}
-                alt={avatar.name ?? avatar.initials}
-              />
+              <AvatarImage src={avatar.image} />
               <AvatarFallback>{avatar.initials}</AvatarFallback>
             </Avatar>
           ))}
diff --git a/src/components/blocks/cta-2.astro b/src/components/blocks/cta-2.astro
index 0a507763a..16e9071cb 100644
--- a/src/components/blocks/cta-2.astro
+++ b/src/components/blocks/cta-2.astro
@@ -30,7 +30,6 @@ type Props = HTMLAttributes<"section"> & {
     avatars: {
       image?: ImageMetadata
       initials: string
-      name?: string
     }[]
     rating: number
     ratingLabel: string
@@ -75,13 +74,10 @@ const {
         ))}
       </div>
       <div class="flex items-center gap-3">
-        <AvatarGroup>
+        <AvatarGroup aria-hidden="true">
           {socialProof.avatars.map((avatar) => (
             <Avatar class="ring-background size-10 ring">
-              <AvatarImage
-                src={avatar.image}
-                alt={avatar.name ?? avatar.initials}
-              />
+              <AvatarImage src={avatar.image} />
               <AvatarFallback>{avatar.initials}</AvatarFallback>
             </Avatar>
           ))}
@@ -100,7 +96,7 @@ const {
       alt={image.alt}
       class="aspect-[4/3] w-full rounded-xl border object-cover"
       widths={[640, 960, 1280]}
-      sizes="(min-width: 1024px) 50vw, 100vw"
+      sizes="(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw"
     />
   </SectionContainer>
 </Section>
diff --git a/src/components/blocks/cta-3.astro b/src/components/blocks/cta-3.astro
index d391aaf5c..06202a411 100644
--- a/src/components/blocks/cta-3.astro
+++ b/src/components/blocks/cta-3.astro
@@ -28,7 +28,6 @@ type Props = HTMLAttributes<"section"> & {
     avatars: {
       image?: ImageMetadata
       initials: string
-      name?: string
     }[]
     rating: number
     ratingLabel: string
@@ -72,13 +71,10 @@ const {
         ))}
       </div>
       <div class="flex items-center gap-3">
-        <AvatarGroup>
+        <AvatarGroup aria-hidden="true">
           {socialProof.avatars.map((avatar) => (
             <Avatar class="ring-background size-11 ring">
-              <AvatarImage
-                src={avatar.image}
-                alt={avatar.name ?? avatar.initials}
-              />
+              <AvatarImage src={avatar.image} />
               <AvatarFallback>{avatar.initials}</AvatarFallback>
             </Avatar>
           ))}
diff --git a/src/components/blocks/cta-4.astro b/src/components/blocks/cta-4.astro
index 78d54d566..dc69ab41c 100644
--- a/src/components/blocks/cta-4.astro
+++ b/src/components/blocks/cta-4.astro
@@ -31,7 +31,6 @@ type Props = HTMLAttributes<"section"> & {
     avatars: {
       image?: ImageMetadata
       initials: string
-      name?: string
     }[]
     rating: number
     ratingLabel: string
@@ -39,7 +38,6 @@ type Props = HTMLAttributes<"section"> & {
   }
   image?: {
     src: ImageMetadata
-    alt: string
   }
 }
 
@@ -49,7 +47,7 @@ const {
   description,
   buttons,
   socialProof,
-  image = { src: PlaceholderImage, alt: "" },
+  image = { src: PlaceholderImage },
   ...props
 } = Astro.props
 ---
@@ -61,12 +59,12 @@ const {
 >
   <Image
     src={image.src}
-    alt={image.alt}
+    alt=""
     class="absolute inset-0 size-full object-cover opacity-50"
     widths={[640, 960, 1280, 1536]}
     sizes="(min-width: 80rem) 80rem, 100vw"
   />
-  <SectionContainer class="items-center text-center">
+  <SectionContainer class="flex flex-col gap-8 items-center text-center">
     <div class="flex max-w-2xl flex-col items-center gap-5">
       <SectionTitle class="leading-[1.1]">{title}</SectionTitle>
       <SectionDescription>{description}</SectionDescription>
@@ -84,13 +82,10 @@ const {
       ))}
     </div>
     <div class="flex items-center gap-3">
-      <AvatarGroup>
+      <AvatarGroup aria-hidden="true">
         {socialProof.avatars.map((avatar) => (
           <Avatar class="ring-background size-11 ring">
-            <AvatarImage
-              src={avatar.image}
-              alt={avatar.name ?? avatar.initials}
-            />
+            <AvatarImage src={avatar.image} />
             <AvatarFallback>{avatar.initials}</AvatarFallback>
           </Avatar>
         ))}
diff --git a/src/components/blocks/cta-5.astro b/src/components/blocks/cta-5.astro
index e34a45c14..2e0f46647 100644
--- a/src/components/blocks/cta-5.astro
+++ b/src/components/blocks/cta-5.astro
@@ -49,8 +49,8 @@ const {
       </div>
       <ul class="flex flex-col gap-3">
         {features.map((feature) => (
-          <li class="flex items-center gap-3 text-sm">
-            <CheckIcon class="text-primary size-4 shrink-0" />
+          <li class="flex items-start gap-3 text-sm">
+            <CheckIcon class="text-primary mt-0.5 size-4 shrink-0" />
             {feature}
           </li>
         ))}
@@ -73,7 +73,7 @@ const {
       alt={image.alt}
       class="aspect-[4/3] w-full rounded-xl border object-cover"
       widths={[640, 960, 1280]}
-      sizes="(min-width: 1024px) 50vw, 100vw"
+      sizes="(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw"
     />
   </SectionContainer>
 </Section>
diff --git a/src/components/blocks/cta-6.astro b/src/components/blocks/cta-6.astro
index 8ebe3fee0..6fc41480d 100644
--- a/src/components/blocks/cta-6.astro
+++ b/src/components/blocks/cta-6.astro
@@ -30,7 +30,6 @@ type Props = HTMLAttributes<"section"> & {
     avatars: {
       image?: ImageMetadata
       initials: string
-      name?: string
     }[]
     rating: number
     ratingLabel: string
@@ -60,7 +59,7 @@ const {
       alt={image.alt}
       class="aspect-[4/3] w-full rounded-xl border object-cover"
       widths={[640, 960, 1280]}
-      sizes="(min-width: 1024px) 50vw, 100vw"
+      sizes="(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw"
     />
     <div class="flex flex-col gap-6">
       <div class="flex flex-col gap-4">
@@ -82,13 +81,10 @@ const {
         ))}
       </div>
       <div class="flex items-center gap-3">
-        <AvatarGroup>
+        <AvatarGroup aria-hidden="true">
           {socialProof.avatars.map((avatar) => (
             <Avatar class="ring-background size-10 ring">
-              <AvatarImage
-                src={avatar.image}
-                alt={avatar.name ?? avatar.initials}
-              />
+              <AvatarImage src={avatar.image} />
               <AvatarFallback>{avatar.initials}</AvatarFallback>
             </Avatar>
           ))}
diff --git a/src/components/blocks/cta-7.astro b/src/components/blocks/cta-7.astro
index fd2e1a751..2d280d244 100644
--- a/src/components/blocks/cta-7.astro
+++ b/src/components/blocks/cta-7.astro
@@ -29,7 +29,6 @@ type Props = HTMLAttributes<"section"> & {
     avatars: {
       image?: ImageMetadata
       initials: string
-      name?: string
     }[]
     count?: string | number
     text: string
@@ -50,10 +49,12 @@ const {
   class={cn("bg-primary/10 border-primary/15 border-y", className)}
   {...props}
 >
-  <SectionContainer class="items-center text-center">
+  <SectionContainer class="flex flex-col gap-8 items-center text-center">
     <div class="flex max-w-2xl flex-col items-center gap-5">
       <SectionTitle class="leading-[1.1]">{title}</SectionTitle>
-      <SectionDescription>{description}</SectionDescription>
+      <SectionDescription class="text-foreground/80">
+        {description}
+      </SectionDescription>
     </div>
     <div class="flex flex-wrap justify-center gap-3">
       {buttons.map(({ href, label }, index) => (
@@ -68,13 +69,10 @@ const {
       ))}
     </div>
     <div class="flex flex-col items-center gap-4">
-      <AvatarGroup>
+      <AvatarGroup aria-hidden="true">
         {socialProof.avatars.map((avatar) => (
           <Avatar class="ring-primary/10 bg-background size-11 ring">
-            <AvatarImage
-              src={avatar.image}
-              alt={avatar.name ?? avatar.initials}
-            />
+            <AvatarImage src={avatar.image} />
             <AvatarFallback>{avatar.initials}</AvatarFallback>
           </Avatar>
         ))}
@@ -84,7 +82,7 @@ const {
           </AvatarGroupCount>
         )}
       </AvatarGroup>
-      <span class="text-muted-foreground text-sm leading-snug">
+      <span class="text-foreground/80 text-sm leading-snug">
         {socialProof.text}
       </span>
     </div>
diff --git a/src/components/blocks/cta-8.astro b/src/components/blocks/cta-8.astro
index f138c872b..5aea2428e 100644
--- a/src/components/blocks/cta-8.astro
+++ b/src/components/blocks/cta-8.astro
@@ -27,7 +27,7 @@ const { class: className, title, description, buttons, ...props } = Astro.props
   class={cn("border-primary/20 shadow-none", className)}
   {...props}
 >
-  <SectionContainer class="before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl">
+  <SectionContainer class="flex flex-col gap-8 before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl">
     <div class="flex max-w-2xl flex-col items-center gap-5 text-center">
       <SectionTitle class="leading-[1.1]">{title}</SectionTitle>
       <SectionDescription>{description}</SectionDescription>
diff --git a/src/components/blocks/hero-1.astro b/src/components/blocks/hero-1.astro
index 24156b70e..9d0507043 100644
--- a/src/components/blocks/hero-1.astro
+++ b/src/components/blocks/hero-1.astro
@@ -15,7 +15,7 @@ import {
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
-  badge: {
+  badge?: {
     label: string
     href: string
   }
@@ -41,10 +41,12 @@ const {
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="items-center gap-8 text-center">
-    <Badge as="a" href={badge.href} variant="secondary">
-      {badge.label}
-    </Badge>
+  <SectionContainer class="flex flex-col items-center gap-8 text-center">
+    {badge && (
+      <Badge as="a" href={badge.href} variant="secondary">
+        {badge.label}
+      </Badge>
+    )}
     <h1 class="text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl">
       {title}
     </h1>
diff --git a/src/components/blocks/hero-10.astro b/src/components/blocks/hero-10.astro
index f44bdfb5d..362afb539 100644
--- a/src/components/blocks/hero-10.astro
+++ b/src/components/blocks/hero-10.astro
@@ -25,7 +25,6 @@ type Props = HTMLAttributes<"section"> & {
     avatars: {
       image?: ImageMetadata
       initials: string
-      name?: string
     }[]
     rating: number
     ratingLabel: string
@@ -33,7 +32,6 @@ type Props = HTMLAttributes<"section"> & {
   }
   image: {
     src: ImageMetadata
-    alt: string
   }
 }
 
@@ -76,13 +74,10 @@ const {
         ))}
       </div>
       <div class="flex items-center gap-3">
-        <AvatarGroup>
+        <AvatarGroup aria-hidden="true">
           {socialProof.avatars.map((avatar) => (
             <Avatar class="ring-background size-11 ring">
-              <AvatarImage
-                src={avatar.image}
-                alt={avatar.name ?? avatar.initials}
-              />
+              <AvatarImage src={avatar.image} />
               <AvatarFallback>{avatar.initials}</AvatarFallback>
             </Avatar>
           ))}
@@ -100,7 +95,7 @@ const {
   <div class="bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%">
     <Image
       src={image.src}
-      alt={image.alt}
+      alt=""
       class="size-full object-cover opacity-75"
       widths={[640, 960, 1280, 1920]}
       sizes="100vw"
diff --git a/src/components/blocks/hero-11.astro b/src/components/blocks/hero-11.astro
index d69b59f02..80dd1740e 100644
--- a/src/components/blocks/hero-11.astro
+++ b/src/components/blocks/hero-11.astro
@@ -25,7 +25,6 @@ type Props = HTMLAttributes<"section"> & {
     avatars: {
       image?: ImageMetadata
       initials: string
-      name?: string
     }[]
     rating: number
     ratingLabel: string
@@ -33,7 +32,6 @@ type Props = HTMLAttributes<"section"> & {
   }
   image: {
     src: ImageMetadata
-    alt: string
   }
 }
 
@@ -52,7 +50,7 @@ const {
   class={cn("dark bg-background min-h-screen justify-center", className)}
   {...props}
 >
-  <SectionContainer class="relative z-10 items-center gap-8 text-center">
+  <SectionContainer class="flex flex-col relative z-10 items-center gap-8 text-center">
     <h1 class="text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl">
       {title}
     </h1>
@@ -72,13 +70,10 @@ const {
       ))}
     </div>
     <div class="flex items-center gap-3">
-      <AvatarGroup>
+      <AvatarGroup aria-hidden="true">
         {socialProof.avatars.map((avatar) => (
           <Avatar class="ring-background size-11 ring">
-            <AvatarImage
-              src={avatar.image}
-              alt={avatar.name ?? avatar.initials}
-            />
+            <AvatarImage src={avatar.image} />
             <AvatarFallback>{avatar.initials}</AvatarFallback>
           </Avatar>
         ))}
@@ -95,7 +90,7 @@ const {
   <div class="bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%">
     <Image
       src={image.src}
-      alt={image.alt}
+      alt=""
       class="size-full object-cover opacity-75"
       widths={[640, 960, 1280, 1920]}
       sizes="100vw"
diff --git a/src/components/blocks/hero-12.astro b/src/components/blocks/hero-12.astro
index 2f21e0aff..86cbde7f2 100644
--- a/src/components/blocks/hero-12.astro
+++ b/src/components/blocks/hero-12.astro
@@ -31,7 +31,7 @@ const {
 ---
 
 <Section class={cn("gap-8 pt-8", className)} {...props}>
-  <SectionContainer class="border-y py-8">
+  <SectionContainer class="flex flex-col gap-8 border-y py-8">
     <div class="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
       <h1 class="text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl">
         {title}
diff --git a/src/components/blocks/hero-13.astro b/src/components/blocks/hero-13.astro
index 448a6e69e..15830e294 100644
--- a/src/components/blocks/hero-13.astro
+++ b/src/components/blocks/hero-13.astro
@@ -58,7 +58,7 @@ const {
       alt={image.alt}
       class="aspect-[4/3] w-full rounded-xl border object-cover"
       widths={[640, 960, 1280]}
-      sizes="(min-width: 1024px) 75vw, 100vw"
+      sizes="(min-width: 80rem) 900px, (min-width: 64rem) 75vw, 100vw"
       loading="eager"
       fetchpriority="high"
     />
diff --git a/src/components/blocks/hero-2.astro b/src/components/blocks/hero-2.astro
index 49c54cc02..6bc618b61 100644
--- a/src/components/blocks/hero-2.astro
+++ b/src/components/blocks/hero-2.astro
@@ -29,7 +29,6 @@ type Props = HTMLAttributes<"section"> & {
     avatars: {
       image?: ImageMetadata
       initials: string
-      name?: string
     }[]
     rating: number
     ratingLabel: string
@@ -53,15 +52,12 @@ const {
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="items-center gap-8 text-center">
+  <SectionContainer class="flex flex-col items-center gap-8 text-center">
     <div class="flex flex-col items-center gap-3">
-      <AvatarGroup>
+      <AvatarGroup aria-hidden="true">
         {socialProof.avatars.map((avatar) => (
           <Avatar class="ring-background size-11 ring">
-            <AvatarImage
-              src={avatar.image}
-              alt={avatar.name ?? avatar.initials}
-            />
+            <AvatarImage src={avatar.image} />
             <AvatarFallback>{avatar.initials}</AvatarFallback>
           </Avatar>
         ))}
diff --git a/src/components/blocks/hero-3.astro b/src/components/blocks/hero-3.astro
index ed272d8f6..19e1b9add 100644
--- a/src/components/blocks/hero-3.astro
+++ b/src/components/blocks/hero-3.astro
@@ -16,7 +16,6 @@ type Props = HTMLAttributes<"section"> & {
   }[]
   image: {
     src: ImageMetadata
-    alt: string
   }
 }
 
@@ -34,7 +33,7 @@ const {
   class={cn("dark bg-background min-h-[80vh] justify-center", className)}
   {...props}
 >
-  <SectionContainer class="relative z-10 items-center gap-8 text-center">
+  <SectionContainer class="flex flex-col relative z-10 items-center gap-8 text-center">
     <h1 class="text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl">
       {title}
     </h1>
@@ -57,7 +56,7 @@ const {
   <div class="bg-background pointer-events-none absolute inset-0">
     <Image
       src={image.src}
-      alt={image.alt}
+      alt=""
       class="size-full object-cover opacity-50"
       widths={[640, 960, 1280, 1920]}
       sizes="100vw"
diff --git a/src/components/blocks/hero-4.astro b/src/components/blocks/hero-4.astro
index 0a0ad5ff8..4f7a9bb5d 100644
--- a/src/components/blocks/hero-4.astro
+++ b/src/components/blocks/hero-4.astro
@@ -18,7 +18,6 @@ type Props = HTMLAttributes<"section"> & {
   }[]
   image: {
     src: ImageMetadata
-    alt: string
   }
 }
 
@@ -37,7 +36,7 @@ const {
   class={cn("dark bg-background min-h-screen justify-center", className)}
   {...props}
 >
-  <SectionContainer class="relative z-10 items-center gap-8 text-center">
+  <SectionContainer class="flex flex-col relative z-10 items-center gap-8 text-center">
     <h1 class="text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl">
       {title}
     </h1>
@@ -46,8 +45,8 @@ const {
     </p>
     <ul class="flex flex-wrap justify-center gap-x-6 gap-y-2">
       {features.map((feature) => (
-        <li class="flex items-center gap-2 text-sm">
-          <CheckIcon class="text-primary size-4 shrink-0" />
+        <li class="flex items-start gap-2 text-sm">
+          <CheckIcon class="text-primary mt-0.5 size-4 shrink-0" />
           {feature}
         </li>
       ))}
@@ -68,7 +67,7 @@ const {
   <div class="bg-background pointer-events-none absolute inset-0">
     <Image
       src={image.src}
-      alt={image.alt}
+      alt=""
       class="size-full object-cover opacity-50"
       widths={[640, 960, 1280, 1920]}
       sizes="100vw"
diff --git a/src/components/blocks/hero-5.astro b/src/components/blocks/hero-5.astro
index 6363bc391..f1f7a3c5d 100644
--- a/src/components/blocks/hero-5.astro
+++ b/src/components/blocks/hero-5.astro
@@ -27,7 +27,6 @@ type Props = HTMLAttributes<"section"> & {
     avatars: {
       image?: ImageMetadata
       initials: string
-      name?: string
     }[]
     rating: number
     ratingLabel: string
@@ -64,8 +63,8 @@ const {
       </div>
       <ul class="flex flex-col gap-3">
         {features.map((feature) => (
-          <li class="flex items-center gap-3 text-sm">
-            <CheckIcon class="text-primary size-4 shrink-0" />
+          <li class="flex items-start gap-3 text-sm">
+            <CheckIcon class="text-primary mt-0.5 size-4 shrink-0" />
             {feature}
           </li>
         ))}
@@ -83,13 +82,10 @@ const {
         ))}
       </div>
       <div class="flex items-center gap-3">
-        <AvatarGroup>
+        <AvatarGroup aria-hidden="true">
           {socialProof.avatars.map((avatar) => (
             <Avatar class="ring-background size-11 ring">
-              <AvatarImage
-                src={avatar.image}
-                alt={avatar.name ?? avatar.initials}
-              />
+              <AvatarImage src={avatar.image} />
               <AvatarFallback>{avatar.initials}</AvatarFallback>
             </Avatar>
           ))}
@@ -108,7 +104,7 @@ const {
       alt={image.alt}
       class="aspect-[4/3] w-full rounded-xl border object-cover"
       widths={[640, 960, 1280]}
-      sizes="(min-width: 1024px) 50vw, 100vw"
+      sizes="(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw"
       loading="eager"
       fetchpriority="high"
     />
diff --git a/src/components/blocks/hero-6.astro b/src/components/blocks/hero-6.astro
index b1e28f69c..d25cee2ed 100644
--- a/src/components/blocks/hero-6.astro
+++ b/src/components/blocks/hero-6.astro
@@ -27,7 +27,6 @@ type Props = HTMLAttributes<"section"> & {
     avatars: {
       image?: ImageMetadata
       initials: string
-      name?: string
     }[]
     rating: number
     ratingLabel: string
@@ -58,7 +57,7 @@ const {
       alt={image.alt}
       class="aspect-[4/3] w-full rounded-xl border object-cover"
       widths={[640, 960, 1280]}
-      sizes="(min-width: 1024px) 50vw, 100vw"
+      sizes="(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw"
       loading="eager"
       fetchpriority="high"
     />
@@ -73,8 +72,8 @@ const {
       </div>
       <ul class="flex flex-col gap-3">
         {features.map((feature) => (
-          <li class="flex items-center gap-3 text-sm">
-            <CheckIcon class="text-primary size-4 shrink-0" />
+          <li class="flex items-start gap-3 text-sm">
+            <CheckIcon class="text-primary mt-0.5 size-4 shrink-0" />
             {feature}
           </li>
         ))}
@@ -92,13 +91,10 @@ const {
         ))}
       </div>
       <div class="flex items-center gap-3">
-        <AvatarGroup>
+        <AvatarGroup aria-hidden="true">
           {socialProof.avatars.map((avatar) => (
             <Avatar class="ring-background size-11 ring">
-              <AvatarImage
-                src={avatar.image}
-                alt={avatar.name ?? avatar.initials}
-              />
+              <AvatarImage src={avatar.image} />
               <AvatarFallback>{avatar.initials}</AvatarFallback>
             </Avatar>
           ))}
diff --git a/src/components/blocks/hero-7.astro b/src/components/blocks/hero-7.astro
index 1eda4b85a..b0e57b558 100644
--- a/src/components/blocks/hero-7.astro
+++ b/src/components/blocks/hero-7.astro
@@ -27,7 +27,6 @@ type Props = HTMLAttributes<"section"> & {
     avatars: {
       image?: ImageMetadata
       initials: string
-      name?: string
     }[]
     rating: number
     ratingLabel: string
@@ -64,8 +63,8 @@ const {
       </div>
       <ul class="flex flex-col gap-3">
         {features.map((feature) => (
-          <li class="flex items-center gap-3 text-sm">
-            <CheckIcon class="text-primary size-4 shrink-0" />
+          <li class="flex items-start gap-3 text-sm">
+            <CheckIcon class="text-primary mt-0.5 size-4 shrink-0" />
             {feature}
           </li>
         ))}
@@ -83,13 +82,10 @@ const {
         ))}
       </div>
       <div class="flex items-center gap-3">
-        <AvatarGroup>
+        <AvatarGroup aria-hidden="true">
           {socialProof.avatars.map((avatar) => (
             <Avatar class="ring-background size-11 ring">
-              <AvatarImage
-                src={avatar.image}
-                alt={avatar.name ?? avatar.initials}
-              />
+              <AvatarImage src={avatar.image} />
               <AvatarFallback>{avatar.initials}</AvatarFallback>
             </Avatar>
           ))}
@@ -108,7 +104,7 @@ const {
       alt={image.alt}
       class="aspect-[4/3] w-full rounded-xl border object-cover"
       widths={[640, 960, 1280]}
-      sizes="(min-width: 1024px) 60vw, 100vw"
+      sizes="(min-width: 80rem) 750px, (min-width: 64rem) 60vw, 100vw"
       loading="eager"
       fetchpriority="high"
     />
diff --git a/src/components/blocks/hero-8.astro b/src/components/blocks/hero-8.astro
index ed44a1908..1ad3416eb 100644
--- a/src/components/blocks/hero-8.astro
+++ b/src/components/blocks/hero-8.astro
@@ -59,7 +59,7 @@ const {
       alt={image.alt}
       class="aspect-[4/3] w-full rounded-xl border object-cover"
       widths={[640, 960, 1280]}
-      sizes="(min-width: 1024px) 75vw, 100vw"
+      sizes="(min-width: 80rem) 936px, (min-width: 64rem) 75vw, 100vw"
       loading="eager"
       fetchpriority="high"
     />
diff --git a/src/components/blocks/hero-9.astro b/src/components/blocks/hero-9.astro
index 4e7fad4c9..83e8c1ddc 100644
--- a/src/components/blocks/hero-9.astro
+++ b/src/components/blocks/hero-9.astro
@@ -27,7 +27,6 @@ type Props = HTMLAttributes<"section"> & {
     avatars: {
       image?: ImageMetadata
       initials: string
-      name?: string
     }[]
     rating: number
     ratingLabel: string
@@ -35,7 +34,6 @@ type Props = HTMLAttributes<"section"> & {
   }
   image: {
     src: ImageMetadata
-    alt: string
   }
 }
 
@@ -62,8 +60,8 @@ const {
       </div>
       <ul class="flex flex-col gap-3">
         {features.map((feature) => (
-          <li class="flex items-center gap-3 text-sm">
-            <CheckIcon class="text-primary size-4 shrink-0" />
+          <li class="flex items-start gap-3 text-sm">
+            <CheckIcon class="text-primary mt-0.5 size-4 shrink-0" />
             {feature}
           </li>
         ))}
@@ -81,13 +79,10 @@ const {
         ))}
       </div>
       <div class="flex items-center gap-3">
-        <AvatarGroup>
+        <AvatarGroup aria-hidden="true">
           {socialProof.avatars.map((avatar) => (
             <Avatar class="ring-background size-11 ring">
-              <AvatarImage
-                src={avatar.image}
-                alt={avatar.name ?? avatar.initials}
-              />
+              <AvatarImage src={avatar.image} />
               <AvatarFallback>{avatar.initials}</AvatarFallback>
             </Avatar>
           ))}
@@ -105,7 +100,7 @@ const {
   <div class="bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%">
     <Image
       src={image.src}
-      alt={image.alt}
+      alt=""
       class="size-full object-cover opacity-50"
       widths={[640, 960, 1280, 1920]}
       sizes="100vw"
diff --git a/src/content/pages/blocks/cta.mdx b/src/content/pages/blocks/cta.mdx
index c915b0fc1..1b59a1a0c 100644
--- a/src/content/pages/blocks/cta.mdx
+++ b/src/content/pages/blocks/cta.mdx
@@ -7,7 +7,7 @@ description: Call-to-action sections that close pages, bridge sections, or reinf
 ```astro live props={{ name: 'cta-1' }}
 ---
 import CallToActionBlock from "@/components/blocks/cta-1.astro"
-import avatarSil from "@/assets/avatar-sil-veltman.webp"
+import placeholderImage from "@/assets/placeholder.svg"
 ---
 
 <CallToActionBlock
@@ -19,14 +19,14 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
   ]}
   socialProof={{
     avatars: [
-      { image: avatarSil, initials: "SV", name: "Sil Veltman" },
-      { image: avatarSil, initials: "JD", name: "Sil Veltman" },
-      { image: avatarSil, initials: "MK", name: "Sil Veltman" },
-      { image: avatarSil, initials: "AR", name: "Sil Veltman" },
+      { image: placeholderImage, initials: "SV" },
+      { image: placeholderImage, initials: "JD" },
+      { image: placeholderImage, initials: "MK" },
+      { image: placeholderImage, initials: "AR" },
     ],
-    rating: 5,
-    ratingLabel: "Rated 5 out of 5",
-    text: "Loved by 2,000+ developers",
+    rating: 4.8,
+    ratingLabel: "Rated 4.8 out of 5",
+    text: "Example: 4.8 from 120 reviews",
   }}
 />
 ```
@@ -34,7 +34,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
 ```astro live props={{ name: 'cta-2' }}
 ---
 import Cta2Block from "@/components/blocks/cta-2.astro"
-import avatarSil from "@/assets/avatar-sil-veltman.webp"
+import placeholderImage from "@/assets/placeholder.svg"
 ---
 
 <Cta2Block
@@ -46,13 +46,13 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
   ]}
   socialProof={{
     avatars: [
-      { image: avatarSil, initials: "SV", name: "Sil Veltman" },
-      { image: avatarSil, initials: "JD", name: "Sil Veltman" },
-      { image: avatarSil, initials: "MK", name: "Sil Veltman" },
+      { image: placeholderImage, initials: "SV" },
+      { image: placeholderImage, initials: "JD" },
+      { image: placeholderImage, initials: "MK" },
     ],
-    rating: 5,
-    ratingLabel: "Rated 5 out of 5",
-    text: "Trusted by agencies worldwide",
+    rating: 4.8,
+    ratingLabel: "Rated 4.8 out of 5",
+    text: "Example: 4.8 from 120 reviews",
   }}
 />
 ```
@@ -60,7 +60,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
 ```astro live props={{ name: 'cta-3' }}
 ---
 import Cta3Block from "@/components/blocks/cta-3.astro"
-import avatarSil from "@/assets/avatar-sil-veltman.webp"
+import placeholderImage from "@/assets/placeholder.svg"
 ---
 
 <Cta3Block
@@ -72,14 +72,14 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
   ]}
   socialProof={{
     avatars: [
-      { image: avatarSil, initials: "SV", name: "Sil Veltman" },
-      { image: avatarSil, initials: "JD", name: "Sil Veltman" },
-      { image: avatarSil, initials: "MK", name: "Sil Veltman" },
-      { image: avatarSil, initials: "AR", name: "Sil Veltman" },
+      { image: placeholderImage, initials: "SV" },
+      { image: placeholderImage, initials: "JD" },
+      { image: placeholderImage, initials: "MK" },
+      { image: placeholderImage, initials: "AR" },
     ],
-    rating: 5,
-    ratingLabel: "Rated 5 out of 5",
-    text: "Built for modern teams",
+    rating: 4.8,
+    ratingLabel: "Rated 4.8 out of 5",
+    text: "Example: 4.8 from 120 reviews",
   }}
 />
 ```
@@ -87,7 +87,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
 ```astro live props={{ name: 'cta-4' }}
 ---
 import Cta4Block from "@/components/blocks/cta-4.astro"
-import avatarSil from "@/assets/avatar-sil-veltman.webp"
+import placeholderImage from "@/assets/placeholder.svg"
 ---
 
 <Cta4Block
@@ -99,13 +99,13 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
   ]}
   socialProof={{
     avatars: [
-      { image: avatarSil, initials: "SV", name: "Sil Veltman" },
-      { image: avatarSil, initials: "JD", name: "Sil Veltman" },
-      { image: avatarSil, initials: "MK", name: "Sil Veltman" },
+      { image: placeholderImage, initials: "SV" },
+      { image: placeholderImage, initials: "JD" },
+      { image: placeholderImage, initials: "MK" },
     ],
-    rating: 5,
-    ratingLabel: "Rated 5 out of 5",
-    text: "Production-ready components",
+    rating: 4.8,
+    ratingLabel: "Rated 4.8 out of 5",
+    text: "Example: 4.8 from 120 reviews",
   }}
 />
 ```
@@ -133,7 +133,7 @@ import Cta5Block from "@/components/blocks/cta-5.astro"
 ```astro live props={{ name: 'cta-6' }}
 ---
 import Cta6Block from "@/components/blocks/cta-6.astro"
-import avatarSil from "@/assets/avatar-sil-veltman.webp"
+import placeholderImage from "@/assets/placeholder.svg"
 ---
 
 <Cta6Block
@@ -145,13 +145,13 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
   ]}
   socialProof={{
     avatars: [
-      { image: avatarSil, initials: "SV", name: "Sil Veltman" },
-      { image: avatarSil, initials: "JD", name: "Sil Veltman" },
-      { image: avatarSil, initials: "MK", name: "Sil Veltman" },
+      { image: placeholderImage, initials: "SV" },
+      { image: placeholderImage, initials: "JD" },
+      { image: placeholderImage, initials: "MK" },
     ],
-    rating: 5,
-    ratingLabel: "Rated 5 out of 5",
-    text: "No long pitch required",
+    rating: 4.8,
+    ratingLabel: "Rated 4.8 out of 5",
+    text: "Example: 4.8 from 120 reviews",
   }}
 />
 ```
@@ -159,7 +159,7 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
 ```astro live props={{ name: 'cta-7' }}
 ---
 import Cta7Block from "@/components/blocks/cta-7.astro"
-import avatarSil from "@/assets/avatar-sil-veltman.webp"
+import placeholderImage from "@/assets/placeholder.svg"
 ---
 
 <Cta7Block
@@ -171,12 +171,13 @@ import avatarSil from "@/assets/avatar-sil-veltman.webp"
   ]}
   socialProof={{
     avatars: [
-      { image: avatarSil, initials: "SV", name: "Sil Veltman" },
-      { image: avatarSil, initials: "JD", name: "Sil Veltman" },
-      { image: avatarSil, initials: "MK", name: "Sil Veltman" },
-      { image: avatarSil, initials: "AR", name: "Sil Veltman" },
+      { image: placeholderImage, initials: "SV" },
+      { image: placeholderImage, initials: "JD" },
+      { image: placeholderImage, initials: "MK" },
+      { image: placeholderImage, initials: "AR" },
     ],
-    text: "Best for design teams",
+    count: "+120",
+    text: "Example: join 120 customers",
   }}
 />
 ```
diff --git a/src/content/pages/blocks/hero.mdx b/src/content/pages/blocks/hero.mdx
index 40522e8c7..a55b8388e 100644
--- a/src/content/pages/blocks/hero.mdx
+++ b/src/content/pages/blocks/hero.mdx
@@ -18,35 +18,34 @@ import placeholderImage from "@/assets/placeholder.svg"
     { label: "Browse docs", href: "/docs/" },
     { label: "See components", href: "/components/" },
   ]}
-  image={{ src: placeholderImage, alt: "Product screenshot" }}
+  image={{ src: placeholderImage, alt: "" }}
 />
 ```
 
 ```astro live props={{ name: 'hero-2' }}
 ---
 import Hero2Block from "@/components/blocks/hero-2.astro"
-import avatarSil from "@/assets/avatar-sil-veltman.webp"
 import placeholderImage from "@/assets/placeholder.svg"
 ---
 
 <Hero2Block
-  title="Trusted by teams shipping with Astro every day"
+  title="Social proof above a clear headline"
   description="A hero with social proof at the top — avatars, rating, and a trust line — followed by a clear message and full-width image."
   socialProof={{
     avatars: [
-      { image: avatarSil, initials: "AM", name: "Sil Veltman" },
-      { image: avatarSil, initials: "KL", name: "Sil Veltman" },
-      { image: avatarSil, initials: "SV", name: "Sil Veltman" },
+      { image: placeholderImage, initials: "AM" },
+      { image: placeholderImage, initials: "KL" },
+      { image: placeholderImage, initials: "SV" },
     ],
-    rating: 5,
-    ratingLabel: "Rated 5 out of 5",
-    text: "4.9 from 2,400+ developers",
+    rating: 4.8,
+    ratingLabel: "Rated 4.8 out of 5",
+    text: "Example: 4.8 from 120 reviews",
   }}
   buttons={[
     { label: "Get started", href: "/docs/" },
     { label: "View blocks", href: "/blocks/" },
   ]}
-  image={{ src: placeholderImage, alt: "Product screenshot" }}
+  image={{ src: placeholderImage, alt: "" }}
 />
 ```
 
@@ -63,7 +62,7 @@ import placeholderImage from "@/assets/placeholder.svg"
     { label: "Start building", href: "/docs/" },
     { label: "See examples", href: "/blocks/" },
   ]}
-  image={{ src: placeholderImage, alt: "Abstract background" }}
+  image={{ src: placeholderImage }}
 />
 ```
 
@@ -85,14 +84,13 @@ import placeholderImage from "@/assets/placeholder.svg"
     { label: "Learn more", href: "/docs/" },
     { label: "Contact sales", href: "#" },
   ]}
-  image={{ src: placeholderImage, alt: "Abstract background" }}
+  image={{ src: placeholderImage }}
 />
 ```
 
 ```astro live props={{ name: 'hero-5' }}
 ---
 import Hero5Block from "@/components/blocks/hero-5.astro"
-import avatarSil from "@/assets/avatar-sil-veltman.webp"
 import placeholderImage from "@/assets/placeholder.svg"
 ---
 
@@ -111,22 +109,21 @@ import placeholderImage from "@/assets/placeholder.svg"
   ]}
   socialProof={{
     avatars: [
-      { image: avatarSil, initials: "AM", name: "Sil Veltman" },
-      { image: avatarSil, initials: "KL", name: "Sil Veltman" },
-      { image: avatarSil, initials: "SV", name: "Sil Veltman" },
+      { image: placeholderImage, initials: "AM" },
+      { image: placeholderImage, initials: "KL" },
+      { image: placeholderImage, initials: "SV" },
     ],
-    rating: 5,
-    ratingLabel: "Rated 5 out of 5",
-    text: "4.9 from product teams",
+    rating: 4.8,
+    ratingLabel: "Rated 4.8 out of 5",
+    text: "Example: 4.8 from 120 reviews",
   }}
-  image={{ src: placeholderImage, alt: "Product screenshot" }}
+  image={{ src: placeholderImage, alt: "" }}
 />
 ```
 
 ```astro live props={{ name: 'hero-6' }}
 ---
 import Hero6Block from "@/components/blocks/hero-6.astro"
-import avatarSil from "@/assets/avatar-sil-veltman.webp"
 import placeholderImage from "@/assets/placeholder.svg"
 ---
 
@@ -144,22 +141,21 @@ import placeholderImage from "@/assets/placeholder.svg"
   ]}
   socialProof={{
     avatars: [
-      { image: avatarSil, initials: "FD", name: "Sil Veltman" },
-      { image: avatarSil, initials: "AV", name: "Sil Veltman" },
-      { image: avatarSil, initials: "UI", name: "Sil Veltman" },
+      { image: placeholderImage, initials: "FD" },
+      { image: placeholderImage, initials: "AV" },
+      { image: placeholderImage, initials: "UI" },
     ],
-    rating: 5,
-    ratingLabel: "Rated 5 out of 5",
-    text: "Loved by Astro developers",
+    rating: 4.8,
+    ratingLabel: "Rated 4.8 out of 5",
+    text: "Example: 4.8 from 120 reviews",
   }}
-  image={{ src: placeholderImage, alt: "Product screenshot" }}
+  image={{ src: placeholderImage, alt: "" }}
 />
 ```
 
 ```astro live props={{ name: 'hero-7' }}
 ---
 import Hero7Block from "@/components/blocks/hero-7.astro"
-import avatarSil from "@/assets/avatar-sil-veltman.webp"
 import placeholderImage from "@/assets/placeholder.svg"
 ---
 
@@ -177,15 +173,15 @@ import placeholderImage from "@/assets/placeholder.svg"
   ]}
   socialProof={{
     avatars: [
-      { image: avatarSil, initials: "AM", name: "Sil Veltman" },
-      { image: avatarSil, initials: "KL", name: "Sil Veltman" },
-      { image: avatarSil, initials: "SV", name: "Sil Veltman" },
+      { image: placeholderImage, initials: "AM" },
+      { image: placeholderImage, initials: "KL" },
+      { image: placeholderImage, initials: "SV" },
     ],
-    rating: 5,
-    ratingLabel: "Rated 5 out of 5",
-    text: "Used by design teams",
+    rating: 4.8,
+    ratingLabel: "Rated 4.8 out of 5",
+    text: "Example: 4.8 from 120 reviews",
   }}
-  image={{ src: placeholderImage, alt: "Dashboard preview" }}
+  image={{ src: placeholderImage, alt: "" }}
 />
 ```
 
@@ -202,14 +198,13 @@ import placeholderImage from "@/assets/placeholder.svg"
     { label: "Get started", href: "/docs/" },
     { label: "Learn more", href: "#" },
   ]}
-  image={{ src: placeholderImage, alt: "App screenshot" }}
+  image={{ src: placeholderImage, alt: "" }}
 />
 ```
 
 ```astro live props={{ name: 'hero-9' }}
 ---
 import Hero9Block from "@/components/blocks/hero-9.astro"
-import avatarSil from "@/assets/avatar-sil-veltman.webp"
 import placeholderImage from "@/assets/placeholder.svg"
 ---
 
@@ -228,22 +223,21 @@ import placeholderImage from "@/assets/placeholder.svg"
   ]}
   socialProof={{
     avatars: [
-      { image: avatarSil, initials: "AM", name: "Sil Veltman" },
-      { image: avatarSil, initials: "KL", name: "Sil Veltman" },
-      { image: avatarSil, initials: "SV", name: "Sil Veltman" },
+      { image: placeholderImage, initials: "AM" },
+      { image: placeholderImage, initials: "KL" },
+      { image: placeholderImage, initials: "SV" },
     ],
-    rating: 5,
-    ratingLabel: "Rated 5 out of 5",
-    text: "4.9 from product teams",
+    rating: 4.8,
+    ratingLabel: "Rated 4.8 out of 5",
+    text: "Example: 4.8 from 120 reviews",
   }}
-  image={{ src: placeholderImage, alt: "Atmospheric background" }}
+  image={{ src: placeholderImage }}
 />
 ```
 
 ```astro live props={{ name: 'hero-10' }}
 ---
 import Hero10Block from "@/components/blocks/hero-10.astro"
-import avatarSil from "@/assets/avatar-sil-veltman.webp"
 import placeholderImage from "@/assets/placeholder.svg"
 ---
 
@@ -256,22 +250,21 @@ import placeholderImage from "@/assets/placeholder.svg"
   ]}
   socialProof={{
     avatars: [
-      { image: avatarSil, initials: "FD", name: "Sil Veltman" },
-      { image: avatarSil, initials: "AV", name: "Sil Veltman" },
-      { image: avatarSil, initials: "UI", name: "Sil Veltman" },
+      { image: placeholderImage, initials: "FD" },
+      { image: placeholderImage, initials: "AV" },
+      { image: placeholderImage, initials: "UI" },
     ],
-    rating: 5,
-    ratingLabel: "Rated 5 out of 5",
-    text: "Trusted by 2,400+ teams",
+    rating: 4.8,
+    ratingLabel: "Rated 4.8 out of 5",
+    text: "Example: 4.8 from 120 reviews",
   }}
-  image={{ src: placeholderImage, alt: "Full background" }}
+  image={{ src: placeholderImage }}
 />
 ```
 
 ```astro live props={{ name: 'hero-11' }}
 ---
 import Hero11Block from "@/components/blocks/hero-11.astro"
-import avatarSil from "@/assets/avatar-sil-veltman.webp"
 import placeholderImage from "@/assets/placeholder.svg"
 ---
 
@@ -284,15 +277,15 @@ import placeholderImage from "@/assets/placeholder.svg"
   ]}
   socialProof={{
     avatars: [
-      { image: avatarSil, initials: "AM", name: "Sil Veltman" },
-      { image: avatarSil, initials: "KL", name: "Sil Veltman" },
-      { image: avatarSil, initials: "SV", name: "Sil Veltman" },
+      { image: placeholderImage, initials: "AM" },
+      { image: placeholderImage, initials: "KL" },
+      { image: placeholderImage, initials: "SV" },
     ],
-    rating: 5,
-    ratingLabel: "Rated 5 out of 5",
-    text: "Loved by developers",
+    rating: 4.8,
+    ratingLabel: "Rated 4.8 out of 5",
+    text: "Example: 4.8 from 120 reviews",
   }}
-  image={{ src: placeholderImage, alt: "Full background" }}
+  image={{ src: placeholderImage }}
 />
 ```
 
@@ -306,7 +299,7 @@ import placeholderImage from "@/assets/placeholder.svg"
   title="A minimal editorial hero with a border bar and full-width image"
   description="Title, description, and actions spread across a bordered bar, followed by a large image below."
   buttons={[{ label: "Read the story", href: "#" }]}
-  image={{ src: placeholderImage, alt: "Editorial image" }}
+  image={{ src: placeholderImage, alt: "" }}
 />
 ```
 
@@ -320,6 +313,6 @@ import placeholderImage from "@/assets/placeholder.svg"
   title="Small text, large image"
   description="A 1:3 split where the content stays compact on the left and the image takes the dominant position on the right."
   buttons={[{ label: "View products", href: "/blocks/products/" }]}
-  image={{ src: placeholderImage, alt: "Product showcase" }}
+  image={{ src: placeholderImage, alt: "" }}
 />
 ```
diff --git a/src/content/pages/blocks/index.mdx b/src/content/pages/blocks/index.mdx
index 72431f9cd..2af476a7e 100644
--- a/src/content/pages/blocks/index.mdx
+++ b/src/content/pages/blocks/index.mdx
@@ -96,7 +96,7 @@ import placeholderImage from "@/assets/placeholder.svg"
     { label: "Browse docs", href: "/docs/" },
     { label: "See components", href: "/components/" },
   ]}
-  image={{ src: placeholderImage, alt: "Fulldev block preview" }}
+  image={{ src: placeholderImage, alt: "" }}
 />
 ```
 
diff --git a/src/content/pages/index.mdx b/src/content/pages/index.mdx
index 93c8c8d2e..036352b1b 100644
--- a/src/content/pages/index.mdx
+++ b/src/content/pages/index.mdx
@@ -263,14 +263,14 @@ import avatarSpjpgrd from "@/assets/avatar-contributor-spjpgrd.webp"
   ]}
   socialProof={{
     avatars: [
-      { image: avatarSil, initials: "SV", name: "Sil Veltman" },
-      { image: avatarJeremy, initials: "JB", name: "Jeremy Bosma" },
-      { image: avatarSaran, initials: "SR", name: "Saran Raj" },
-      { image: avatarNeko, initials: "NL", name: "NekoSakuraLucia" },
-      { image: avatarRakshit, initials: "RG", name: "Rakshit Gumber" },
-      { image: avatarBupt, initials: "BS", name: "BuptStEve" },
-      { image: avatarLjstella, initials: "LJ", name: "ljstella" },
-      { image: avatarSpjpgrd, initials: "SP", name: "spjpgrd" },
+      { image: avatarSil, initials: "SV" },
+      { image: avatarJeremy, initials: "JB" },
+      { image: avatarSaran, initials: "SR" },
+      { image: avatarNeko, initials: "NL" },
+      { image: avatarRakshit, initials: "RG" },
+      { image: avatarBupt, initials: "BS" },
+      { image: avatarLjstella, initials: "LJ" },
+      { image: avatarSpjpgrd, initials: "SP" },
     ],
     count: "+8",
     text: "560 GitHub stars 16 contributors",

From 3a3033ff4d717273448092a3b5c675dd5937518b Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 17:37:41 +0200
Subject: [PATCH 35/60] Show header actions in the mobile menu and drop new-tab
 inference

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/blocks/header-1.astro | 42 ++++++++++++++++---------
 src/components/blocks/header-2.astro | 42 ++++++++++++++++---------
 src/components/blocks/header-3.astro | 44 ++++++++++++++++----------
 src/components/blocks/header-4.astro | 44 ++++++++++++++++----------
 src/components/blocks/header-5.astro | 46 +++++++++++++++++-----------
 src/content/pages/blocks/header.mdx  | 37 +++++++++-------------
 6 files changed, 151 insertions(+), 104 deletions(-)

diff --git a/src/components/blocks/header-1.astro b/src/components/blocks/header-1.astro
index 144005ef9..1f232437c 100644
--- a/src/components/blocks/header-1.astro
+++ b/src/components/blocks/header-1.astro
@@ -1,4 +1,5 @@
 ---
+import type { ImageMetadata } from "astro"
 import type { HTMLAttributes } from "astro/types"
 import XIcon from "@lucide/astro/icons/x"
 
@@ -27,10 +28,9 @@ type Props = HTMLAttributes<"header"> & {
   logo: {
     label: string
     href: string
-    src?: any
-    srcLight?: any
-    srcDark?: any
-    alt?: string
+    src?: ImageMetadata
+    srcLight?: ImageMetadata
+    srcDark?: ImageMetadata
   }
   navigation: {
     label: string
@@ -41,6 +41,7 @@ type Props = HTMLAttributes<"header"> & {
     label: string
     href: string
     icon?: string
+    target?: "_self" | "_blank"
   }[]
   navigationLabel: string
   menu: {
@@ -70,9 +71,9 @@ const {
           src={logo.src}
           srcLight={logo.srcLight}
           srcDark={logo.srcDark}
-          alt={logo.alt}
+          alt=""
         />
-        {logo.label && <LogoText>{logo.label}</LogoText>}
+        <LogoText>{logo.label}</LogoText>
       </Logo>
     </HeaderGroup>
     <NavigationMenu
@@ -90,16 +91,14 @@ const {
       </NavigationMenuList>
     </NavigationMenu>
     <HeaderGroup class="ml-auto hidden flex-1 justify-end lg:flex">
-      <slot />
-      {buttons.map(({ label, href, icon }, index) => (
+      {buttons.map(({ label, href, icon, target }, index) => (
         <Button
           as="a"
           href={href}
-          size={icon && !label ? "icon-sm" : "sm"}
+          target={target}
+          rel={target === "_blank" ? "noreferrer" : undefined}
+          size="sm"
           variant={index === buttons.length - 1 ? "default" : "ghost"}
-          aria-label={label}
-          target={href.startsWith("http") ? "_blank" : undefined}
-          rel={href.startsWith("http") ? "noreferrer" : undefined}
         >
           {icon && <Icon name={icon} />}
           {label}
@@ -134,9 +133,22 @@ const {
               </SheetClose>
             ))}
           </nav>
-          <div class="mt-auto flex flex-col gap-2">
-            <slot name="mobile" />
-          </div>
+          {buttons.length > 0 && (
+            <div class="mt-auto flex flex-col gap-2">
+              {buttons.map(({ label, href, icon, target }, index) => (
+                <SheetClose
+                  as="a"
+                  href={href}
+                  target={target}
+                  rel={target === "_blank" ? "noreferrer" : undefined}
+                  variant={index === buttons.length - 1 ? "default" : "outline"}
+                >
+                  {icon && <Icon name={icon} />}
+                  {label}
+                </SheetClose>
+              ))}
+            </div>
+          )}
         </div>
         <SheetClose
           type="button"
diff --git a/src/components/blocks/header-2.astro b/src/components/blocks/header-2.astro
index 269191154..1bcd4d5ad 100644
--- a/src/components/blocks/header-2.astro
+++ b/src/components/blocks/header-2.astro
@@ -1,4 +1,5 @@
 ---
+import type { ImageMetadata } from "astro"
 import type { HTMLAttributes } from "astro/types"
 import XIcon from "@lucide/astro/icons/x"
 
@@ -27,10 +28,9 @@ type Props = HTMLAttributes<"header"> & {
   logo: {
     label: string
     href: string
-    src?: any
-    srcLight?: any
-    srcDark?: any
-    alt?: string
+    src?: ImageMetadata
+    srcLight?: ImageMetadata
+    srcDark?: ImageMetadata
   }
   navigation: {
     label: string
@@ -41,6 +41,7 @@ type Props = HTMLAttributes<"header"> & {
     label: string
     href: string
     icon?: string
+    target?: "_self" | "_blank"
   }[]
   navigationLabel: string
   menu: {
@@ -70,9 +71,9 @@ const {
           src={logo.src}
           srcLight={logo.srcLight}
           srcDark={logo.srcDark}
-          alt={logo.alt}
+          alt=""
         />
-        {logo.label && <LogoText>{logo.label}</LogoText>}
+        <LogoText>{logo.label}</LogoText>
       </Logo>
     </HeaderGroup>
     <NavigationMenu
@@ -90,16 +91,14 @@ const {
       </NavigationMenuList>
     </NavigationMenu>
     <HeaderGroup class="ml-auto hidden justify-end lg:flex">
-      <slot />
-      {buttons.map(({ label, href, icon }, index) => (
+      {buttons.map(({ label, href, icon, target }, index) => (
         <Button
           as="a"
           href={href}
-          size={icon && !label ? "icon-sm" : "sm"}
+          target={target}
+          rel={target === "_blank" ? "noreferrer" : undefined}
+          size="sm"
           variant={index === buttons.length - 1 ? "default" : "ghost"}
-          aria-label={label}
-          target={href.startsWith("http") ? "_blank" : undefined}
-          rel={href.startsWith("http") ? "noreferrer" : undefined}
         >
           {icon && <Icon name={icon} />}
           {label}
@@ -134,9 +133,22 @@ const {
               </SheetClose>
             ))}
           </nav>
-          <div class="mt-auto flex flex-col gap-2">
-            <slot name="mobile" />
-          </div>
+          {buttons.length > 0 && (
+            <div class="mt-auto flex flex-col gap-2">
+              {buttons.map(({ label, href, icon, target }, index) => (
+                <SheetClose
+                  as="a"
+                  href={href}
+                  target={target}
+                  rel={target === "_blank" ? "noreferrer" : undefined}
+                  variant={index === buttons.length - 1 ? "default" : "outline"}
+                >
+                  {icon && <Icon name={icon} />}
+                  {label}
+                </SheetClose>
+              ))}
+            </div>
+          )}
         </div>
         <SheetClose
           type="button"
diff --git a/src/components/blocks/header-3.astro b/src/components/blocks/header-3.astro
index 8a8679ce2..d9b1a0f4b 100644
--- a/src/components/blocks/header-3.astro
+++ b/src/components/blocks/header-3.astro
@@ -1,4 +1,5 @@
 ---
+import type { ImageMetadata } from "astro"
 import type { HTMLAttributes } from "astro/types"
 import XIcon from "@lucide/astro/icons/x"
 
@@ -28,10 +29,9 @@ type Props = HTMLAttributes<"header"> & {
   logo: {
     label: string
     href: string
-    src?: any
-    srcLight?: any
-    srcDark?: any
-    alt?: string
+    src?: ImageMetadata
+    srcLight?: ImageMetadata
+    srcDark?: ImageMetadata
   }
   navigation: {
     label: string
@@ -42,6 +42,7 @@ type Props = HTMLAttributes<"header"> & {
     label: string
     href: string
     icon?: string
+    target?: "_self" | "_blank"
   }[]
   navigationLabel: string
   menu: {
@@ -71,9 +72,9 @@ const {
           src={logo.src}
           srcLight={logo.srcLight}
           srcDark={logo.srcDark}
-          alt={logo.alt}
+          alt=""
         />
-        {logo.label && <LogoText>{logo.label}</LogoText>}
+        <LogoText>{logo.label}</LogoText>
       </Logo>
     </HeaderGroup>
     <HeaderGroup class="ml-auto hidden justify-end gap-1 lg:flex">
@@ -95,16 +96,14 @@ const {
         orientation="vertical"
         class="mx-1 hidden h-5 self-center lg:block"
       />
-      <slot />
-      {buttons.map(({ label, href, icon }, index) => (
+      {buttons.map(({ label, href, icon, target }, index) => (
         <Button
           as="a"
           href={href}
-          size={icon && !label ? "icon-sm" : "sm"}
+          target={target}
+          rel={target === "_blank" ? "noreferrer" : undefined}
+          size="sm"
           variant={index === buttons.length - 1 ? "default" : "ghost"}
-          aria-label={label}
-          target={href.startsWith("http") ? "_blank" : undefined}
-          rel={href.startsWith("http") ? "noreferrer" : undefined}
         >
           {icon && <Icon name={icon} />}
           {label}
@@ -139,10 +138,23 @@ const {
               </SheetClose>
             ))}
           </nav>
-          <Separator />
-          <div class="mt-auto flex flex-col gap-2">
-            <slot name="mobile" />
-          </div>
+          {buttons.length > 0 && <Separator />}
+          {buttons.length > 0 && (
+            <div class="mt-auto flex flex-col gap-2">
+              {buttons.map(({ label, href, icon, target }, index) => (
+                <SheetClose
+                  as="a"
+                  href={href}
+                  target={target}
+                  rel={target === "_blank" ? "noreferrer" : undefined}
+                  variant={index === buttons.length - 1 ? "default" : "outline"}
+                >
+                  {icon && <Icon name={icon} />}
+                  {label}
+                </SheetClose>
+              ))}
+            </div>
+          )}
         </div>
         <SheetClose
           type="button"
diff --git a/src/components/blocks/header-4.astro b/src/components/blocks/header-4.astro
index c610b025b..2db347f37 100644
--- a/src/components/blocks/header-4.astro
+++ b/src/components/blocks/header-4.astro
@@ -32,10 +32,9 @@ type Props = HTMLAttributes<"header"> & {
   logo: {
     label: string
     href: string
-    src?: any
-    srcLight?: any
-    srcDark?: any
-    alt?: string
+    src?: ImageMetadata
+    srcLight?: ImageMetadata
+    srcDark?: ImageMetadata
   }
   navigation: {
     label: string
@@ -44,7 +43,6 @@ type Props = HTMLAttributes<"header"> & {
     active?: boolean
     image?: {
       src: ImageMetadata
-      alt: string
     }
     links?: {
       label: string
@@ -58,6 +56,7 @@ type Props = HTMLAttributes<"header"> & {
     label: string
     href: string
     icon?: string
+    target?: "_self" | "_blank"
   }[]
   navigationLabel: string
   menu: {
@@ -87,9 +86,9 @@ const {
           src={logo.src}
           srcLight={logo.srcLight}
           srcDark={logo.srcDark}
-          alt={logo.alt}
+          alt=""
         />
-        {logo.label && <LogoText>{logo.label}</LogoText>}
+        <LogoText>{logo.label}</LogoText>
       </Logo>
     </HeaderGroup>
     <NavigationMenu
@@ -112,7 +111,7 @@ const {
                     {item.image && (
                       <Image
                         src={item.image.src}
-                        alt={item.image.alt}
+                        alt=""
                         class="mb-auto aspect-[16/9] w-full rounded-md object-cover"
                         widths={[320, 480, 640]}
                         sizes="(min-width: 1024px) 22rem, 100vw"
@@ -167,16 +166,14 @@ const {
       </NavigationMenuList>
     </NavigationMenu>
     <HeaderGroup class="ml-auto hidden justify-end lg:flex">
-      <slot />
-      {buttons.map(({ label, href, icon }, index) => (
+      {buttons.map(({ label, href, icon, target }, index) => (
         <Button
           as="a"
           href={href}
-          size={icon && !label ? "icon-sm" : "sm"}
+          target={target}
+          rel={target === "_blank" ? "noreferrer" : undefined}
+          size="sm"
           variant={index === buttons.length - 1 ? "default" : "ghost"}
-          aria-label={label}
-          target={href.startsWith("http") ? "_blank" : undefined}
-          rel={href.startsWith("http") ? "noreferrer" : undefined}
         >
           {icon && <Icon name={icon} />}
           {label}
@@ -229,9 +226,22 @@ const {
               </div>
             ))}
           </nav>
-          <div class="mt-auto flex flex-col gap-2">
-            <slot name="mobile" />
-          </div>
+          {buttons.length > 0 && (
+            <div class="mt-auto flex flex-col gap-2">
+              {buttons.map(({ label, href, icon, target }, index) => (
+                <SheetClose
+                  as="a"
+                  href={href}
+                  target={target}
+                  rel={target === "_blank" ? "noreferrer" : undefined}
+                  variant={index === buttons.length - 1 ? "default" : "outline"}
+                >
+                  {icon && <Icon name={icon} />}
+                  {label}
+                </SheetClose>
+              ))}
+            </div>
+          )}
         </div>
         <SheetClose
           type="button"
diff --git a/src/components/blocks/header-5.astro b/src/components/blocks/header-5.astro
index 3f29c8f9a..3ad0d88eb 100644
--- a/src/components/blocks/header-5.astro
+++ b/src/components/blocks/header-5.astro
@@ -33,10 +33,9 @@ type Props = HTMLAttributes<"header"> & {
   logo: {
     label: string
     href: string
-    src?: any
-    srcLight?: any
-    srcDark?: any
-    alt?: string
+    src?: ImageMetadata
+    srcLight?: ImageMetadata
+    srcDark?: ImageMetadata
   }
   navigation: {
     label: string
@@ -45,7 +44,6 @@ type Props = HTMLAttributes<"header"> & {
     active?: boolean
     image?: {
       src: ImageMetadata
-      alt: string
     }
     links?: {
       label: string
@@ -59,6 +57,7 @@ type Props = HTMLAttributes<"header"> & {
     label: string
     href: string
     icon?: string
+    target?: "_self" | "_blank"
   }[]
   navigationLabel: string
   menu: {
@@ -91,22 +90,20 @@ const {
           src={logo.src}
           srcLight={logo.srcLight}
           srcDark={logo.srcDark}
-          alt={logo.alt}
+          alt=""
         />
-        {logo.label && <LogoText>{logo.label}</LogoText>}
+        <LogoText>{logo.label}</LogoText>
       </Logo>
     </HeaderGroup>
     <HeaderGroup class="ml-auto hidden justify-end lg:flex">
-      <slot />
-      {buttons.map(({ label, href, icon }, index) => (
+      {buttons.map(({ label, href, icon, target }, index) => (
         <Button
           as="a"
           href={href}
-          size={icon && !label ? "icon-sm" : "sm"}
+          target={target}
+          rel={target === "_blank" ? "noreferrer" : undefined}
+          size="sm"
           variant={index === buttons.length - 1 ? "default" : "ghost"}
-          aria-label={label}
-          target={href.startsWith("http") ? "_blank" : undefined}
-          rel={href.startsWith("http") ? "noreferrer" : undefined}
         >
           {icon && <Icon name={icon} />}
           {label}
@@ -159,10 +156,23 @@ const {
               </div>
             ))}
           </nav>
-          <Separator />
-          <div class="mt-auto flex flex-col gap-2">
-            <slot name="mobile" />
-          </div>
+          {buttons.length > 0 && <Separator />}
+          {buttons.length > 0 && (
+            <div class="mt-auto flex flex-col gap-2">
+              {buttons.map(({ label, href, icon, target }, index) => (
+                <SheetClose
+                  as="a"
+                  href={href}
+                  target={target}
+                  rel={target === "_blank" ? "noreferrer" : undefined}
+                  variant={index === buttons.length - 1 ? "default" : "outline"}
+                >
+                  {icon && <Icon name={icon} />}
+                  {label}
+                </SheetClose>
+              ))}
+            </div>
+          )}
         </div>
         <SheetClose
           type="button"
@@ -198,7 +208,7 @@ const {
                     {item.image && (
                       <Image
                         src={item.image.src}
-                        alt={item.image.alt}
+                        alt=""
                         class="aspect-[16/9] w-full rounded-md object-cover"
                         widths={[320, 480, 640]}
                         sizes="(min-width: 1024px) 22rem, 100vw"
diff --git a/src/content/pages/blocks/header.mdx b/src/content/pages/blocks/header.mdx
index 91fb339e6..fce9332c0 100644
--- a/src/content/pages/blocks/header.mdx
+++ b/src/content/pages/blocks/header.mdx
@@ -4,21 +4,10 @@ title: Header
 description: Header layouts for brand, navigation, and high-level page actions.
 ---
 
-Header blocks render their default slot once, in the desktop actions area.
-Use `slot="mobile"` for actions that should appear inside the mobile menu.
-Navigation items are rendered as real links in both layouts.
-
-```astro
-<Header1Block {...headerProps}>
-  <a href="/contact/">Contact</a>
-  <a slot="mobile" href="/contact/">
-    Contact
-  </a>
-</Header1Block>
-```
-
-When updating an existing header, move or copy the intended mobile actions
-into the named slot. Keep element IDs unique between the two slots.
+Header blocks render the same `buttons` on desktop and in the mobile menu,
+with visible labels and an optional icon. Links open in the same tab; set
+`target: "_blank"` on a button that should open a new tab.
+The logo image is decorative, because the logo label names the link.
 
 ```astro live props={{ name: 'header-1' }}
 ---
@@ -38,14 +27,15 @@ import HeaderBlock from "@/components/blocks/header-1.astro"
   ]}
   buttons={[
     {
-      label: "2.4k",
+      label: "GitHub",
       href: "https://github.com/fulldotdev/ui",
       icon: "github",
+      target: "_blank",
     },
     { label: "Sign in", href: "#" },
     { label: "Get started", href: "#" },
   ]}
-  navigationLabel="Main navigation"
+  navigationLabel="Header 1 navigation"
   menu={{
     label: "Open menu",
     title: "Menu",
@@ -75,7 +65,7 @@ import Header2Block from "@/components/blocks/header-2.astro"
     { label: "Sign in", href: "#" },
     { label: "Get started", href: "#" },
   ]}
-  navigationLabel="Main navigation"
+  navigationLabel="Header 2 navigation"
   menu={{
     label: "Open menu",
     title: "Menu",
@@ -105,11 +95,12 @@ import Header3Block from "@/components/blocks/header-3.astro"
       label: "GitHub",
       href: "https://github.com/fulldotdev/ui",
       icon: "github",
+      target: "_blank",
     },
     { label: "Roadmap", href: "#" },
     { label: "Browse blocks", href: "#" },
   ]}
-  navigationLabel="Main navigation"
+  navigationLabel="Header 3 navigation"
   menu={{
     label: "Open menu",
     title: "Menu",
@@ -135,7 +126,7 @@ import placeholderImage from "@/assets/placeholder.svg"
       label: "Products",
       href: "#",
       description: "Plan, launch, and measure product work from one place.",
-      image: { src: placeholderImage, alt: "Product navigation preview" },
+      image: { src: placeholderImage },
       links: [
         {
           label: "Analytics",
@@ -183,7 +174,7 @@ import placeholderImage from "@/assets/placeholder.svg"
     { label: "Sign in", href: "#" },
     { label: "Start trial", href: "#" },
   ]}
-  navigationLabel="Main navigation"
+  navigationLabel="Header 4 navigation"
   menu={{
     label: "Open menu",
     title: "Menu",
@@ -209,7 +200,7 @@ import placeholderImage from "@/assets/placeholder.svg"
       label: "Platform",
       href: "#",
       description: "A shared workspace for strategy, delivery, and insight.",
-      image: { src: placeholderImage, alt: "Platform navigation preview" },
+      image: { src: placeholderImage },
       links: [
         {
           label: "Roadmaps",
@@ -263,7 +254,7 @@ import placeholderImage from "@/assets/placeholder.svg"
     { label: "Contact sales", href: "#" },
     { label: "Get started", href: "#" },
   ]}
-  navigationLabel="Main navigation"
+  navigationLabel="Header 5 navigation"
   menu={{
     label: "Open menu",
     title: "Menu",

From 430ee47c5a9d0e1f7ccbd12cc89b7ede698bc621 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 17:37:41 +0200
Subject: [PATCH 36/60] Give footer columns headings and render socials only
 when present

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/blocks/footer-1.astro | 30 ++++++++++++++--------------
 src/components/blocks/footer-2.astro | 28 +++++++++++++-------------
 src/components/blocks/footer-3.astro | 30 ++++++++++++++--------------
 src/content/pages/blocks/footer.mdx  |  4 ++--
 4 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/src/components/blocks/footer-1.astro b/src/components/blocks/footer-1.astro
index c52ed8717..4f2ebd440 100644
--- a/src/components/blocks/footer-1.astro
+++ b/src/components/blocks/footer-1.astro
@@ -40,7 +40,7 @@ const {
 
 <footer class={cn("", className)} {...props}>
   <Section class="py-16 lg:py-20">
-    <SectionContainer>
+    <SectionContainer class="flex flex-col gap-8">
       <div class="grid gap-10 lg:grid-cols-[1fr_2fr]">
         <div class="flex flex-col gap-5">
           <Logo href={brandHref}>
@@ -49,24 +49,24 @@ const {
           <p class="text-muted-foreground max-w-xs text-sm leading-relaxed">
             {description}
           </p>
-          <div class="flex items-center gap-3">
-            {socials.map((social) => (
-              <a
-                href={social.href}
-                class="text-muted-foreground hover:text-foreground transition-colors"
-                aria-label={social.label}
-                target="_blank"
-                rel="noreferrer"
-              >
-                <Icon name={social.icon} href={social.href} class="size-4" />
-              </a>
-            ))}
-          </div>
+          {socials.length > 0 && (
+            <div class="flex items-center gap-3">
+              {socials.map((social) => (
+                <a
+                  href={social.href}
+                  class="text-muted-foreground hover:text-foreground transition-colors"
+                  aria-label={social.label}
+                >
+                  <Icon name={social.icon} href={social.href} class="size-4" />
+                </a>
+              ))}
+            </div>
+          )}
         </div>
         <div class="grid gap-8 sm:grid-cols-3">
           {columns.map((column) => (
             <div class="flex flex-col gap-3">
-              <p class="text-sm font-medium">{column.title}</p>
+              <h2 class="text-sm font-medium">{column.title}</h2>
               <ul class="flex flex-col gap-2.5">
                 {column.links.map((link) => (
                   <li>
diff --git a/src/components/blocks/footer-2.astro b/src/components/blocks/footer-2.astro
index 77428660a..967c1ec28 100644
--- a/src/components/blocks/footer-2.astro
+++ b/src/components/blocks/footer-2.astro
@@ -39,7 +39,7 @@ const {
 
 <footer class={cn("", className)} {...props}>
   <Section class="py-12 lg:py-16">
-    <SectionContainer class="items-center text-center">
+    <SectionContainer class="flex flex-col gap-8 items-center text-center">
       <Logo href={brandHref}>
         <LogoText>{brandName}</LogoText>
       </Logo>
@@ -59,19 +59,19 @@ const {
           </a>
         ))}
       </nav>
-      <div class="flex items-center justify-center gap-3">
-        {socials.map((social) => (
-          <a
-            href={social.href}
-            class="text-muted-foreground hover:text-foreground transition-colors"
-            aria-label={social.label}
-            target="_blank"
-            rel="noreferrer"
-          >
-            <Icon name={social.icon} href={social.href} class="size-4" />
-          </a>
-        ))}
-      </div>
+      {socials.length > 0 && (
+        <div class="flex items-center justify-center gap-3">
+          {socials.map((social) => (
+            <a
+              href={social.href}
+              class="text-muted-foreground hover:text-foreground transition-colors"
+              aria-label={social.label}
+            >
+              <Icon name={social.icon} href={social.href} class="size-4" />
+            </a>
+          ))}
+        </div>
+      )}
       <Separator />
       <p class="text-muted-foreground text-sm">{copyright}</p>
     </SectionContainer>
diff --git a/src/components/blocks/footer-3.astro b/src/components/blocks/footer-3.astro
index 2d4636c0a..e561be3b1 100644
--- a/src/components/blocks/footer-3.astro
+++ b/src/components/blocks/footer-3.astro
@@ -47,7 +47,7 @@ const {
 
 <footer class={cn("", className)} {...props}>
   <Section class="py-16 lg:py-20">
-    <SectionContainer>
+    <SectionContainer class="flex flex-col gap-8">
       <div class="grid gap-10 lg:grid-cols-[1fr_2fr]">
         <div class="flex flex-col gap-5">
           <Logo href={brandHref}>
@@ -56,24 +56,24 @@ const {
           <p class="text-muted-foreground max-w-xs text-sm leading-relaxed">
             {description}
           </p>
-          <div class="flex items-center gap-3">
-            {socials.map((social) => (
-              <a
-                href={social.href}
-                class="text-muted-foreground hover:text-foreground transition-colors"
-                aria-label={social.label}
-                target="_blank"
-                rel="noreferrer"
-              >
-                <Icon name={social.icon} href={social.href} class="size-4" />
-              </a>
-            ))}
-          </div>
+          {socials.length > 0 && (
+            <div class="flex items-center gap-3">
+              {socials.map((social) => (
+                <a
+                  href={social.href}
+                  class="text-muted-foreground hover:text-foreground transition-colors"
+                  aria-label={social.label}
+                >
+                  <Icon name={social.icon} href={social.href} class="size-4" />
+                </a>
+              ))}
+            </div>
+          )}
         </div>
         <div class="grid gap-8 sm:grid-cols-3">
           {columns.map((column) => (
             <div class="flex flex-col gap-3">
-              <p class="text-sm font-medium">{column.title}</p>
+              <h2 class="text-sm font-medium">{column.title}</h2>
               <ul class="flex flex-col gap-2.5">
                 {column.links.map((link) => (
                   <li>
diff --git a/src/content/pages/blocks/footer.mdx b/src/content/pages/blocks/footer.mdx
index f2664e8e7..04dbc17a7 100644
--- a/src/content/pages/blocks/footer.mdx
+++ b/src/content/pages/blocks/footer.mdx
@@ -77,7 +77,7 @@ import Footer2Block from "@/components/blocks/footer-2.astro"
     { label: "X", href: "https://x.com/", icon: "x" },
   ]}
   copyright="© 2026 fulldev/ui"
-  navigationLabel="Footer navigation"
+  navigationLabel="Footer 2 navigation"
 />
 ```
 
@@ -131,6 +131,6 @@ import Footer3Block from "@/components/blocks/footer-3.astro"
     { label: "Terms", href: "/" },
     { label: "Sitemap", href: "/" },
   ]}
-  navigationLabel="Footer navigation"
+  navigationLabel="Footer 3 navigation"
 />
 ```

From 1b2be256f89f7647ed4659c1f8aee6a8264d5099 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 17:37:41 +0200
Subject: [PATCH 37/60] Use one optional link per feature and service, without
 fake hover

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/blocks/features-1.astro | 22 ++++---
 src/components/blocks/features-2.astro | 12 ++--
 src/components/blocks/features-3.astro | 10 +--
 src/components/blocks/features-4.astro | 20 +++---
 src/components/blocks/features-5.astro | 10 +--
 src/components/blocks/features-6.astro |  8 +--
 src/components/blocks/services-1.astro | 10 +--
 src/components/blocks/services-2.astro |  6 +-
 src/components/blocks/services-3.astro | 10 +--
 src/components/blocks/services-4.astro | 25 ++++----
 src/components/blocks/services-5.astro | 23 +++----
 src/components/blocks/services-6.astro |  8 +--
 src/components/blocks/services-7.astro | 11 ++--
 src/content/pages/blocks/features.mdx  | 32 ++++------
 src/content/pages/blocks/services.mdx  | 84 +++++++++++++-------------
 15 files changed, 144 insertions(+), 147 deletions(-)

diff --git a/src/components/blocks/features-1.astro b/src/components/blocks/features-1.astro
index 56af85420..f342b6b45 100644
--- a/src/components/blocks/features-1.astro
+++ b/src/components/blocks/features-1.astro
@@ -23,8 +23,10 @@ type Props = HTMLAttributes<"section"> & {
     title: string
     description: string
     icon: string
-    href?: string
-    linkText?: string
+    link?: {
+      label: string
+      href: string
+    }
   }[]
 }
 
@@ -39,7 +41,7 @@ const {
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="items-center gap-6 text-center">
+  <SectionContainer class="flex flex-col items-center gap-6 text-center">
     <div class="flex max-w-2xl flex-col items-center gap-4">
       <SectionTitle>{title}</SectionTitle>
       <SectionDescription class="max-w-2xl">{description}</SectionDescription>
@@ -57,9 +59,9 @@ const {
     </div>
   </SectionContainer>
   <SectionContainer>
-    <div class="grid gap-6 sm:grid-cols-2">
+    <ul class="grid gap-6 sm:grid-cols-2">
       {features.map((feature) => (
-        <div class="group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors">
+        <li class="flex flex-col gap-4 rounded-xl border p-6">
           <div class="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
             <Icon name={feature.icon} class="size-5" />
           </div>
@@ -71,17 +73,17 @@ const {
               {feature.description}
             </p>
           </div>
-          {feature.href && feature.linkText && (
+          {feature.link && (
             <a
-              href={feature.href}
+              href={feature.link.href}
               class="text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline"
             >
-              {feature.linkText}
+              {feature.link.label}
               <ArrowRightIcon class="size-3.5" />
             </a>
           )}
-        </div>
+        </li>
       ))}
-    </div>
+    </ul>
   </SectionContainer>
 </Section>
diff --git a/src/components/blocks/features-2.astro b/src/components/blocks/features-2.astro
index 528086744..ba7b7040e 100644
--- a/src/components/blocks/features-2.astro
+++ b/src/components/blocks/features-2.astro
@@ -24,17 +24,17 @@ const { class: className, title, description, features, ...props } = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="items-center gap-6 text-center">
+  <SectionContainer class="flex flex-col items-center gap-6 text-center">
     <div class="flex max-w-2xl flex-col items-center gap-4">
       <SectionTitle>{title}</SectionTitle>
       <SectionDescription class="max-w-2xl">{description}</SectionDescription>
     </div>
   </SectionContainer>
   <SectionContainer>
-    <div class="ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3">
+    <ul class="ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3">
       {features.map((feature) => (
-        <div class="bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors">
-          <div class="bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105">
+        <li class="bg-background relative flex flex-col items-center gap-4 p-7 text-center">
+          <div class="bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 ring-inset">
             <Icon name={feature.icon} class="size-5" />
           </div>
           <h3 class="text-foreground text-base font-medium tracking-tight text-balance">
@@ -43,8 +43,8 @@ const { class: className, title, description, features, ...props } = Astro.props
           <p class="text-muted-foreground text-sm leading-relaxed text-balance">
             {feature.description}
           </p>
-        </div>
+        </li>
       ))}
-    </div>
+    </ul>
   </SectionContainer>
 </Section>
diff --git a/src/components/blocks/features-3.astro b/src/components/blocks/features-3.astro
index 32a28a19d..919fb7dfb 100644
--- a/src/components/blocks/features-3.astro
+++ b/src/components/blocks/features-3.astro
@@ -28,16 +28,16 @@ const { class: className, title, description, features, ...props } = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="items-center gap-6 text-center">
+  <SectionContainer class="flex flex-col items-center gap-6 text-center">
     <div class="flex max-w-2xl flex-col items-center gap-4">
       <SectionTitle>{title}</SectionTitle>
       <SectionDescription class="max-w-2xl">{description}</SectionDescription>
     </div>
   </SectionContainer>
   <SectionContainer>
-    <div class="grid gap-6 sm:grid-cols-2">
+    <ul class="grid gap-6 sm:grid-cols-2">
       {features.map((feature) => (
-        <div class="group/feature hover:bg-muted/40 flex items-center gap-5 rounded-xl border p-4 transition-colors">
+        <li class="flex items-center gap-5 rounded-xl border p-4">
           <Image
             src={feature.image.src}
             alt={feature.image.alt}
@@ -53,8 +53,8 @@ const { class: className, title, description, features, ...props } = Astro.props
               {feature.description}
             </p>
           </div>
-        </div>
+        </li>
       ))}
-    </div>
+    </ul>
   </SectionContainer>
 </Section>
diff --git a/src/components/blocks/features-4.astro b/src/components/blocks/features-4.astro
index dc2f67556..7c74e9465 100644
--- a/src/components/blocks/features-4.astro
+++ b/src/components/blocks/features-4.astro
@@ -22,8 +22,10 @@ type Props = HTMLAttributes<"section"> & {
     title: string
     description: string
     icon: string
-    href?: string
-    linkText?: string
+    link?: {
+      label: string
+      href: string
+    }
   }[]
 }
 
@@ -57,9 +59,9 @@ const {
           ))}
         </div>
       </div>
-      <div class="grid gap-6 sm:grid-cols-2">
+      <ul class="grid gap-6 sm:grid-cols-2">
         {features.map((feature) => (
-          <div class="group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors">
+          <li class="flex flex-col gap-4 rounded-xl border p-6">
             <div class="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
               <Icon name={feature.icon} class="size-5" />
             </div>
@@ -71,18 +73,18 @@ const {
                 {feature.description}
               </p>
             </div>
-            {feature.href && feature.linkText && (
+            {feature.link && (
               <a
-                href={feature.href}
+                href={feature.link.href}
                 class="text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline"
               >
-                {feature.linkText}
+                {feature.link.label}
                 <ArrowRightIcon class="size-3.5" />
               </a>
             )}
-          </div>
+          </li>
         ))}
-      </div>
+      </ul>
     </div>
   </SectionContainer>
 </Section>
diff --git a/src/components/blocks/features-5.astro b/src/components/blocks/features-5.astro
index f991c4e6c..3b2f384b3 100644
--- a/src/components/blocks/features-5.astro
+++ b/src/components/blocks/features-5.astro
@@ -24,16 +24,16 @@ const { class: className, title, description, features, ...props } = Astro.props
 ---
 
 <Section variant="floating" class={cn("", className)} {...props}>
-  <SectionContainer class="items-center gap-6 text-center">
+  <SectionContainer class="flex flex-col items-center gap-6 text-center">
     <div class="flex max-w-2xl flex-col items-center gap-4">
       <SectionTitle>{title}</SectionTitle>
       <SectionDescription class="max-w-2xl">{description}</SectionDescription>
     </div>
   </SectionContainer>
   <SectionContainer>
-    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+    <ul class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
       {features.map((feature) => (
-        <div class="group/feature flex flex-col items-center gap-4 text-center">
+        <li class="flex flex-col items-center gap-4 text-center">
           <div class="bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border">
             <Icon name={feature.icon} class="size-5" />
           </div>
@@ -43,8 +43,8 @@ const { class: className, title, description, features, ...props } = Astro.props
           <p class="text-muted-foreground text-sm leading-relaxed text-balance">
             {feature.description}
           </p>
-        </div>
+        </li>
       ))}
-    </div>
+    </ul>
   </SectionContainer>
 </Section>
diff --git a/src/components/blocks/features-6.astro b/src/components/blocks/features-6.astro
index 4a211d49b..bea48fcc3 100644
--- a/src/components/blocks/features-6.astro
+++ b/src/components/blocks/features-6.astro
@@ -54,9 +54,9 @@ const {
     </div>
   </SectionContainer>
   <SectionContainer>
-    <div class="grid gap-12 sm:grid-cols-2 lg:grid-cols-3">
+    <ul class="grid gap-12 sm:grid-cols-2 lg:grid-cols-3">
       {features.map((feature) => (
-        <div>
+        <li>
           <Separator />
           <div class="pt-6">
             <h3 class="text-foreground text-lg font-medium">{feature.title}</h3>
@@ -64,8 +64,8 @@ const {
               {feature.description}
             </p>
           </div>
-        </div>
+        </li>
       ))}
-    </div>
+    </ul>
   </SectionContainer>
 </Section>
diff --git a/src/components/blocks/services-1.astro b/src/components/blocks/services-1.astro
index 2e603dd4d..71490bdcf 100644
--- a/src/components/blocks/services-1.astro
+++ b/src/components/blocks/services-1.astro
@@ -44,7 +44,7 @@ const {
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="gap-8">
+  <SectionContainer class="flex flex-col gap-8">
     <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
       <div class="max-w-2xl">
         <Badge variant="secondary">{badge}</Badge>
@@ -65,16 +65,16 @@ const {
           <Wrapper
             href={service.href}
             class={cn(
-              "group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow",
-              service.href != null && "hover:shadow-md"
+              "group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs",
+              service.href != null && "transition-shadow hover:shadow-md"
             )}
           >
             <Image
               src={service.image?.src ?? PlaceholderImage}
-              alt={service.image?.alt ?? service.title}
+              alt={service.image?.alt ?? ""}
               class="aspect-[4/3] w-full object-cover"
               widths={[320, 480, 640]}
-              sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw"
+              sizes="(min-width: 80rem) 294px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw"
             />
             <div class="flex flex-1 flex-col gap-2 px-5 pb-5">
               <span class="text-primary text-xs font-medium">
diff --git a/src/components/blocks/services-2.astro b/src/components/blocks/services-2.astro
index 4feb088b6..59ce65f04 100644
--- a/src/components/blocks/services-2.astro
+++ b/src/components/blocks/services-2.astro
@@ -43,7 +43,7 @@ const {
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="gap-12">
+  <SectionContainer class="flex flex-col gap-12">
     <div class="mx-auto max-w-2xl text-center">
       <Badge variant="secondary">{badge}</Badge>
       <SectionTitle class="mt-4">{title}</SectionTitle>
@@ -53,10 +53,10 @@ const {
     </div>
     <div class="grid gap-6 lg:gap-8">
       {services.map((service) => (
-        <div class="group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0">
+        <div class="grid items-center gap-6 rounded-xl border p-4 shadow-xs md:grid-cols-[16rem_minmax(0,1fr)] md:p-0">
           <Image
             src={service.image?.src ?? PlaceholderImage}
-            alt={service.image?.alt ?? service.title}
+            alt={service.image?.alt ?? ""}
             class="aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none"
             widths={[320, 480]}
             sizes="(min-width: 768px) 16rem, 100vw"
diff --git a/src/components/blocks/services-3.astro b/src/components/blocks/services-3.astro
index 90352c060..d93b73ab1 100644
--- a/src/components/blocks/services-3.astro
+++ b/src/components/blocks/services-3.astro
@@ -47,7 +47,7 @@ const {
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="gap-8">
+  <SectionContainer class="flex flex-col gap-8">
     <div class="mx-auto max-w-2xl text-center">
       <Badge variant="secondary">{badge}</Badge>
       <SectionTitle class="mt-4">{title}</SectionTitle>
@@ -68,13 +68,13 @@ const {
     </div>
     <div class="grid gap-6 sm:grid-cols-2">
       {services.map((service) => (
-        <div class="group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl">
+        <div class="relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl">
           <Image
             src={service.image?.src ?? PlaceholderImage}
-            alt={service.image?.alt ?? service.title}
-            class="absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105"
+            alt={service.image?.alt ?? ""}
+            class="absolute inset-0 -z-10 size-full object-cover"
             widths={[480, 640, 960]}
-            sizes="(min-width: 640px) 50vw, 100vw"
+            sizes="(min-width: 80rem) 612px, (min-width: 40rem) 50vw, 100vw"
           />
           <div class="absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent" />
           <div class="flex flex-col gap-2 p-6 text-white">
diff --git a/src/components/blocks/services-4.astro b/src/components/blocks/services-4.astro
index 0ce561918..739e30f6d 100644
--- a/src/components/blocks/services-4.astro
+++ b/src/components/blocks/services-4.astro
@@ -16,7 +16,6 @@ import PlaceholderImage from "@/assets/placeholder.svg"
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
-  linkLabel: string
   buttons: {
     label: string
     href: string
@@ -28,7 +27,10 @@ type Props = HTMLAttributes<"section"> & {
     }
     title: string
     description: string
-    href?: string
+    link?: {
+      label: string
+      href: string
+    }
   }[]
 }
 
@@ -37,14 +39,13 @@ const {
   title,
   description,
   buttons,
-  linkLabel,
   services,
   ...props
 } = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="gap-8">
+  <SectionContainer class="flex flex-col gap-8">
     <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
       <div class="max-w-2xl">
         <SectionTitle>{title}</SectionTitle>
@@ -66,13 +67,13 @@ const {
     </div>
     <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
       {services.map((service) => (
-        <article class="group/service flex flex-col gap-4">
+        <article class="flex flex-col gap-4">
           <Image
             src={service.image?.src ?? PlaceholderImage}
-            alt={service.image?.alt ?? service.title}
+            alt={service.image?.alt ?? ""}
             class="aspect-[16/10] w-full rounded-lg object-cover"
             widths={[320, 480, 640]}
-            sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw"
+            sizes="(min-width: 80rem) 294px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw"
           />
           <div class="flex flex-1 flex-col gap-1">
             <h3 class="text-base font-medium">{service.title}</h3>
@@ -80,13 +81,13 @@ const {
               {service.description}
             </p>
           </div>
-          {service.href != null && (
+          {service.link && (
             <a
-              href={service.href}
-              class="text-primary inline-flex items-center gap-1.5 text-sm font-medium"
+              href={service.link.href}
+              class="text-primary inline-flex w-fit items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline"
             >
-              {linkLabel}
-              <ArrowRightIcon class="size-3.5 transition-transform group-hover/service:translate-x-1" />
+              {service.link.label}
+              <ArrowRightIcon class="size-3.5" />
             </a>
           )}
         </article>
diff --git a/src/components/blocks/services-5.astro b/src/components/blocks/services-5.astro
index dc9ec3ea9..435729d11 100644
--- a/src/components/blocks/services-5.astro
+++ b/src/components/blocks/services-5.astro
@@ -15,12 +15,14 @@ type Props = HTMLAttributes<"section"> & {
   badge: string
   title: string
   description: string
-  linkLabel: string
   services: {
     icon: string
     title: string
     description: string
-    href?: string
+    link?: {
+      label: string
+      href: string
+    }
   }[]
 }
 
@@ -29,14 +31,13 @@ const {
   badge,
   title,
   description,
-  linkLabel,
   services,
   ...props
 } = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="gap-12">
+  <SectionContainer class="flex flex-col gap-12">
     <div class="mx-auto max-w-2xl text-center">
       <Badge variant="secondary">{badge}</Badge>
       <SectionTitle class="mt-4">{title}</SectionTitle>
@@ -46,21 +47,21 @@ const {
     </div>
     <div class="ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4">
       {services.map((service) => (
-        <div class="bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors">
-          <div class="bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105">
+        <div class="bg-background relative flex flex-col gap-4 p-7">
+          <div class="bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 ring-inset">
             <Icon name={service.icon} class="size-5" />
           </div>
           <h3 class="text-base font-medium tracking-tight">{service.title}</h3>
           <p class="text-muted-foreground text-sm leading-relaxed">
             {service.description}
           </p>
-          {service.href != null && (
+          {service.link && (
             <a
-              href={service.href}
-              class="text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium"
+              href={service.link.href}
+              class="text-primary mt-auto inline-flex w-fit items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline"
             >
-              {linkLabel}
-              <ArrowRightIcon class="size-3.5 transition-transform group-hover/service:translate-x-1" />
+              {service.link.label}
+              <ArrowRightIcon class="size-3.5" />
             </a>
           )}
         </div>
diff --git a/src/components/blocks/services-6.astro b/src/components/blocks/services-6.astro
index 8f13cfe31..5a5d79eca 100644
--- a/src/components/blocks/services-6.astro
+++ b/src/components/blocks/services-6.astro
@@ -64,13 +64,13 @@ const {
     </div>
     <div class="grid gap-6 sm:grid-cols-2">
       {services.map((service) => (
-        <div class="group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black">
+        <div class="relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black">
           <Image
             src={service.image?.src ?? PlaceholderImage}
-            alt={service.image?.alt ?? service.title}
-            class="absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105"
+            alt={service.image?.alt ?? ""}
+            class="absolute inset-0 -z-10 size-full object-cover opacity-60"
             widths={[320, 480, 640]}
-            sizes="(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw"
+            sizes="(min-width: 80rem) 436px, (min-width: 64rem) 35vw, (min-width: 40rem) 50vw, 100vw"
           />
           <div class="absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent" />
           <div class="flex items-end justify-between gap-4 p-5 text-white">
diff --git a/src/components/blocks/services-7.astro b/src/components/blocks/services-7.astro
index a6a007a98..b8f060122 100644
--- a/src/components/blocks/services-7.astro
+++ b/src/components/blocks/services-7.astro
@@ -48,7 +48,7 @@ const {
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="gap-8">
+  <SectionContainer class="flex flex-col gap-8">
     <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
       <div class="max-w-2xl">
         <Badge variant="secondary">{badge}</Badge>
@@ -76,13 +76,14 @@ const {
           <Wrapper
             href={service.href}
             class={cn(
-              "group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md",
+              "group/service flex flex-col overflow-hidden rounded-xl border shadow-xs",
+              service.href != null && "transition-shadow hover:shadow-md",
               index === 0 && "lg:col-span-2 lg:row-span-2"
             )}
           >
             <Image
               src={service.image?.src ?? PlaceholderImage}
-              alt={service.image?.alt ?? service.title}
+              alt={service.image?.alt ?? ""}
               class={cn(
                 "w-full object-cover",
                 index === 0 ? "aspect-[16/9]" : "aspect-[16/10]"
@@ -90,8 +91,8 @@ const {
               widths={[320, 480, 640, 960]}
               sizes={
                 index === 0
-                  ? "(min-width: 1024px) 66vw, 100vw"
-                  : "(min-width: 1024px) 33vw, 100vw"
+                  ? "(min-width: 80rem) 824px, (min-width: 64rem) 66vw, 100vw"
+                  : "(min-width: 80rem) 400px, (min-width: 64rem) 33vw, 100vw"
               }
             />
             <div class="flex flex-1 flex-col gap-2 p-5">
diff --git a/src/content/pages/blocks/features.mdx b/src/content/pages/blocks/features.mdx
index 5cc9e2d33..5f9c3df22 100644
--- a/src/content/pages/blocks/features.mdx
+++ b/src/content/pages/blocks/features.mdx
@@ -22,32 +22,28 @@ import Features1Block from "@/components/blocks/features-1.astro"
       title: "Lightning fast",
       description:
         "Optimized for speed at every layer. Pages load instantly and interactions feel native.",
-      linkText: "Learn more",
-      href: "#",
+      link: { label: "Learn more", href: "/docs/" },
     },
     {
       icon: "layers",
       title: "Composable sections",
       description:
         "Build pages from pre-designed sections that snap together and stay consistent.",
-      linkText: "View sections",
-      href: "#",
+      link: { label: "View sections", href: "/blocks/" },
     },
     {
       icon: "palette",
       title: "Token-driven theming",
       description:
         "Swap color palettes, typography, and spacing through a single token file.",
-      linkText: "Explore themes",
-      href: "#",
+      link: { label: "Explore themes", href: "/components/" },
     },
     {
       icon: "code",
       title: "Developer friendly",
       description:
         "Clean APIs, typed props, and predictable patterns that scale with your codebase.",
-      linkText: "Read the docs",
-      href: "#",
+      link: { label: "Read the docs", href: "/docs/installation/" },
     },
   ]}
 />
@@ -116,25 +112,25 @@ import placeholderImage from "@/assets/placeholder.svg"
       title: "Responsive layouts",
       description:
         "Every section adapts gracefully from mobile to ultrawide without extra configuration.",
-      image: { src: placeholderImage, alt: "Responsive layout preview" },
+      image: { src: placeholderImage, alt: "" },
     },
     {
       title: "Accessible by default",
       description:
         "Semantic markup, keyboard navigation, and screen reader support built into every component.",
-      image: { src: placeholderImage, alt: "Accessibility preview" },
+      image: { src: placeholderImage, alt: "" },
     },
     {
       title: "Visual consistency",
       description:
         "Shared design tokens keep spacing, color, and typography aligned across all sections.",
-      image: { src: placeholderImage, alt: "Design tokens preview" },
+      image: { src: placeholderImage, alt: "" },
     },
     {
       title: "Instant previews",
       description:
         "See exactly how blocks look in context with the live preview shell.",
-      image: { src: placeholderImage, alt: "Live preview" },
+      image: { src: placeholderImage, alt: "" },
     },
   ]}
 />
@@ -158,32 +154,28 @@ import Features4Block from "@/components/blocks/features-4.astro"
       title: "Composable architecture",
       description:
         "Build pages from pre-designed sections that snap together. Mix and match hero, features, pricing, and CTA blocks.",
-      linkText: "Learn more",
-      href: "#",
+      link: { label: "Learn more", href: "/docs/" },
     },
     {
       icon: "shield",
       title: "Type-safe props",
       description:
         "Every component ships with TypeScript interfaces so your editor catches mistakes before the browser does.",
-      linkText: "See examples",
-      href: "#",
+      link: { label: "See examples", href: "/blocks/" },
     },
     {
       icon: "rocket",
       title: "Zero JS by default",
       description:
         "Server-rendered Astro components mean no client bundle. Add interactivity only where you need it.",
-      linkText: "Read the docs",
-      href: "#",
+      link: { label: "Read the docs", href: "/components/" },
     },
     {
       icon: "code",
       title: "Fulldev powered",
       description:
         "Install individual components through the shadcn CLI and the @fulldev registry. No monolithic dependency to manage.",
-      linkText: "Browse components",
-      href: "#",
+      link: { label: "Browse components", href: "/docs/installation/" },
     },
   ]}
 />
diff --git a/src/content/pages/blocks/services.mdx b/src/content/pages/blocks/services.mdx
index 7988eef08..96ddb3534 100644
--- a/src/content/pages/blocks/services.mdx
+++ b/src/content/pages/blocks/services.mdx
@@ -16,36 +16,36 @@ import PlaceholderImage from "@/assets/placeholder.svg"
   buttons={[{ label: "View all services", href: "#" }]}
   services={[
     {
-      image: { src: PlaceholderImage, alt: "Page strategy" },
+      image: { src: PlaceholderImage, alt: "" },
       label: "Strategy",
       title: "Page strategy",
       description:
         "Describe the service in one or two sentences and let the next section handle process or case studies.",
-      href: "#",
+      href: "/blocks/",
     },
     {
-      image: { src: PlaceholderImage, alt: "Section implementation" },
+      image: { src: PlaceholderImage, alt: "" },
       label: "Development",
       title: "Section implementation",
       description:
         "Describe the service in one or two sentences and let the next section handle process or case studies.",
-      href: "#",
+      href: "/components/",
     },
     {
-      image: { src: PlaceholderImage, alt: "Design system tuning" },
+      image: { src: PlaceholderImage, alt: "" },
       label: "Design",
       title: "Design system tuning",
       description:
         "Describe the service in one or two sentences and let the next section handle process or case studies.",
-      href: "#",
+      href: "/docs/installation/",
     },
     {
-      image: { src: PlaceholderImage, alt: "Performance audits" },
+      image: { src: PlaceholderImage, alt: "" },
       label: "Optimization",
       title: "Performance audits",
       description:
         "Describe the service in one or two sentences and let the next section handle process or case studies.",
-      href: "#",
+      href: "/docs/",
     },
   ]}
 />
@@ -63,7 +63,7 @@ import PlaceholderImage from "@/assets/placeholder.svg"
   description="This layout pairs each service with an image, giving clients a clear picture of the deliverable."
   services={[
     {
-      image: { src: PlaceholderImage, alt: "Audit" },
+      image: { src: PlaceholderImage, alt: "" },
       label: "Step 01",
       title: "Audit & discovery",
       description:
@@ -71,7 +71,7 @@ import PlaceholderImage from "@/assets/placeholder.svg"
       button: { label: "Learn more", href: "#" },
     },
     {
-      image: { src: PlaceholderImage, alt: "Refine" },
+      image: { src: PlaceholderImage, alt: "" },
       label: "Step 02",
       title: "Refine & prototype",
       description:
@@ -79,7 +79,7 @@ import PlaceholderImage from "@/assets/placeholder.svg"
       button: { label: "Learn more", href: "#" },
     },
     {
-      image: { src: PlaceholderImage, alt: "Ship" },
+      image: { src: PlaceholderImage, alt: "" },
       label: "Step 03",
       title: "Ship & iterate",
       description:
@@ -106,28 +106,28 @@ import PlaceholderImage from "@/assets/placeholder.svg"
   ]}
   services={[
     {
-      image: { src: PlaceholderImage, alt: "Strategy workshops" },
+      image: { src: PlaceholderImage, alt: "" },
       title: "Strategy workshops",
       description:
         "Guide teams through product discovery and service definition with structured facilitation.",
       button: { label: "Learn more", href: "#" },
     },
     {
-      image: { src: PlaceholderImage, alt: "Component audits" },
+      image: { src: PlaceholderImage, alt: "" },
       title: "Component audits",
       description:
         "Review existing design systems and recommend improvements for consistency and scale.",
       button: { label: "Learn more", href: "#" },
     },
     {
-      image: { src: PlaceholderImage, alt: "Section implementation" },
+      image: { src: PlaceholderImage, alt: "" },
       title: "Section implementation",
       description:
         "Translate designs into production-ready, responsive section layouts.",
       button: { label: "Learn more", href: "#" },
     },
     {
-      image: { src: PlaceholderImage, alt: "Launch support" },
+      image: { src: PlaceholderImage, alt: "" },
       title: "Launch support",
       description:
         "Dedicated hands-on support for shipping day and the critical first week.",
@@ -149,31 +149,30 @@ import PlaceholderImage from "@/assets/placeholder.svg"
   buttons={[{ label: "Get started", href: "#" }]}
   services={[
     {
-      image: { src: PlaceholderImage, alt: "Research" },
+      image: { src: PlaceholderImage, alt: "" },
       title: "Research",
       description: "Understand the problem space before designing solutions.",
-      href: "#",
+      link: { label: "About research", href: "/docs/" },
     },
     {
-      image: { src: PlaceholderImage, alt: "System design" },
+      image: { src: PlaceholderImage, alt: "" },
       title: "System design",
       description: "Architect scalable systems that grow with your team.",
-      href: "#",
+      link: { label: "About system design", href: "/blocks/" },
     },
     {
-      image: { src: PlaceholderImage, alt: "Build" },
+      image: { src: PlaceholderImage, alt: "" },
       title: "Build",
       description: "Translate refined designs into production-ready code.",
-      href: "#",
+      link: { label: "About build", href: "/components/" },
     },
     {
-      image: { src: PlaceholderImage, alt: "Rollout" },
+      image: { src: PlaceholderImage, alt: "" },
       title: "Rollout",
       description: "Deploy and support the launch across all environments.",
-      href: "#",
+      link: { label: "About rollout", href: "/docs/installation/" },
     },
   ]}
-  linkLabel="Learn more"
 />
 ```
 
@@ -192,31 +191,30 @@ import Services5Block from "@/components/blocks/services-5.astro"
       title: "Documentation systems",
       description:
         "Pair concise cards with a broader framing message. Structure content for discoverability and maintainability.",
-      href: "#",
+      link: { label: "About documentation systems", href: "/docs/" },
     },
     {
       icon: "pencil-ruler",
       title: "Launch pages",
       description:
         "Pair concise cards with a broader framing message. Design high-converting pages that ship on schedule.",
-      href: "#",
+      link: { label: "About launch pages", href: "/blocks/" },
     },
     {
       icon: "code",
       title: "Editorial redesigns",
       description:
         "Pair concise cards with a broader framing message. Modernize editorial layouts without disrupting the content pipeline.",
-      href: "#",
+      link: { label: "About editorial redesigns", href: "/components/" },
     },
     {
       icon: "rocket",
       title: "Platform migration",
       description:
         "Pair concise cards with a broader framing message. Move between platforms without losing content or momentum.",
-      href: "#",
+      link: { label: "About platform migration", href: "/docs/installation/" },
     },
   ]}
-  linkLabel="Learn more"
 />
 ```
 
@@ -236,31 +234,31 @@ import PlaceholderImage from "@/assets/placeholder.svg"
   ]}
   services={[
     {
-      image: { src: PlaceholderImage, alt: "Strategy workshops" },
+      image: { src: PlaceholderImage, alt: "" },
       title: "Strategy workshops",
       description:
         "Guide teams through product discovery and service definition.",
-      href: "#",
+      href: "/blocks/",
     },
     {
-      image: { src: PlaceholderImage, alt: "Component audits" },
+      image: { src: PlaceholderImage, alt: "" },
       title: "Component audits",
       description:
         "Review existing systems and recommend improvements for scale.",
-      href: "#",
+      href: "/components/",
     },
     {
-      image: { src: PlaceholderImage, alt: "Section implementation" },
+      image: { src: PlaceholderImage, alt: "" },
       title: "Section implementation",
       description: "Translate designs into production-ready section layouts.",
-      href: "#",
+      href: "/docs/installation/",
     },
     {
-      image: { src: PlaceholderImage, alt: "Launch support" },
+      image: { src: PlaceholderImage, alt: "" },
       title: "Launch support",
       description:
         "Hands-on support for shipping day and the first week after.",
-      href: "#",
+      href: "/docs/",
     },
   ]}
 />
@@ -282,27 +280,27 @@ import PlaceholderImage from "@/assets/placeholder.svg"
   ]}
   services={[
     {
-      image: { src: PlaceholderImage, alt: "Brand strategy" },
+      image: { src: PlaceholderImage, alt: "" },
       label: "Featured",
       title: "Brand strategy & identity",
       description:
         "A comprehensive service that covers positioning, visual identity, and brand guidelines for teams scaling fast.",
-      href: "#",
+      href: "/blocks/",
     },
     {
-      image: { src: PlaceholderImage, alt: "Design systems" },
+      image: { src: PlaceholderImage, alt: "" },
       label: "Core",
       title: "Design systems",
       description: "Component libraries and tokens built for production scale.",
-      href: "#",
+      href: "/components/",
     },
     {
-      image: { src: PlaceholderImage, alt: "Development" },
+      image: { src: PlaceholderImage, alt: "" },
       label: "Core",
       title: "Front-end development",
       description:
         "Production-ready code from responsive layouts to interactions.",
-      href: "#",
+      href: "/docs/installation/",
     },
   ]}
   linkLabel="Learn more"

From c5f13a18a9f2639027d94ebf0d734d7e15e136dc Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 17:37:41 +0200
Subject: [PATCH 38/60] Render the contact form from the default slot

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/blocks/contact-1.astro | 139 +++++-----------------
 src/components/blocks/contact-2.astro | 137 +++++-----------------
 src/components/blocks/contact-3.astro | 139 +++++-----------------
 src/content/pages/blocks/contact.mdx  | 163 +++++++++++++++++++-------
 4 files changed, 212 insertions(+), 366 deletions(-)

diff --git a/src/components/blocks/contact-1.astro b/src/components/blocks/contact-1.astro
index 869164f79..55a6f772a 100644
--- a/src/components/blocks/contact-1.astro
+++ b/src/components/blocks/contact-1.astro
@@ -3,24 +3,13 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import {
-  Field,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSet,
-} from "@/components/ui/field"
-import { Form } from "@/components/ui/form"
 import { Icon } from "@/components/ui/icon"
-import { Input } from "@/components/ui/input"
 import {
   Section,
   SectionContainer,
   SectionDescription,
   SectionTitle,
 } from "@/components/ui/section"
-import { Textarea } from "@/components/ui/textarea"
 
 type Props = HTMLAttributes<"section"> & {
   title: string
@@ -31,20 +20,6 @@ type Props = HTMLAttributes<"section"> & {
     description: string
     href?: string
   }[]
-  form: {
-    id?: string
-    action?: string
-    method?: "get" | "post"
-    legend: string
-    nameLabel: string
-    namePlaceholder: string
-    emailLabel: string
-    emailPlaceholder: string
-    messageLabel: string
-    messagePlaceholder: string
-    messageDescription: string
-    actionLabel: string
-  }
 }
 
 const {
@@ -52,106 +27,52 @@ const {
   title,
   description,
   contactItems,
-  form,
   ...props
 } = Astro.props
-const formId = form.id ?? `contact-${crypto.randomUUID()}`
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="items-center gap-6 text-center">
+  <SectionContainer class="flex flex-col items-center gap-6 text-center">
     <div class="flex max-w-2xl flex-col items-center gap-4">
       <SectionTitle>{title}</SectionTitle>
       <SectionDescription class="max-w-2xl">{description}</SectionDescription>
     </div>
   </SectionContainer>
   <SectionContainer>
-    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+    <ul class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
       {contactItems.map((item) => (
-        <div class="flex flex-col gap-3 rounded-xl border p-5">
-          {item.href ? (
-            <Button
-              as="a"
+        <li class="flex flex-col gap-3 rounded-xl border p-5">
+          <Button
+            as="span"
+            variant="secondary"
+            size="icon"
+            class="text-primary"
+            aria-hidden="true"
+          >
+            <Icon name={item.icon} />
+          </Button>
+          <h3 class="text-foreground text-sm font-medium">{item.title}</h3>
+          {item.href != null ? (
+            <a
               href={item.href}
-              variant="secondary"
-              size="icon"
-              class="text-primary"
-              aria-label={item.title}
+              class="text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline"
             >
-              <Icon name={item.icon} />
-            </Button>
+              {item.description}
+            </a>
           ) : (
-            <Button
-              as="span"
-              variant="secondary"
-              size="icon"
-              class="text-primary"
-              aria-hidden="true"
-            >
-              <Icon name={item.icon} />
-            </Button>
+            <p class="text-muted-foreground text-sm leading-relaxed wrap-anywhere">
+              {item.description}
+            </p>
           )}
-          <h3 class="text-foreground text-sm font-medium">{item.title}</h3>
-          <p class="text-muted-foreground text-sm leading-relaxed">
-            {item.description}
-          </p>
-        </div>
+        </li>
       ))}
-    </div>
-  </SectionContainer>
-  <SectionContainer>
-    <div class="mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8">
-      <Form id={formId} action={form.action} method={form.method ?? "post"}>
-        <FieldSet>
-          <FieldLegend class="sr-only">{form.legend}</FieldLegend>
-          <FieldGroup>
-            <div class="grid gap-4 md:grid-cols-2">
-              <Field>
-                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>
-                <Input
-                  id={`${formId}-name`}
-                  name="name"
-                  autocomplete="name"
-                  required
-                  placeholder={form.namePlaceholder}
-                />
-              </Field>
-              <Field>
-                <FieldLabel for={`${formId}-email`}>
-                  {form.emailLabel}
-                </FieldLabel>
-                <Input
-                  id={`${formId}-email`}
-                  name="email"
-                  autocomplete="email"
-                  required
-                  type="email"
-                  placeholder={form.emailPlaceholder}
-                />
-              </Field>
-            </div>
-            <Field>
-              <FieldLabel for={`${formId}-message`}>
-                {form.messageLabel}
-              </FieldLabel>
-              <Textarea
-                id={`${formId}-message`}
-                name="message"
-                required
-                rows={5}
-                placeholder={form.messagePlaceholder}
-                aria-describedby={`${formId}-message-description`}
-              />
-              <FieldDescription id={`${formId}-message-description`}>
-                {form.messageDescription}
-              </FieldDescription>
-            </Field>
-            <Button type="submit" size="lg" class="w-full">
-              {form.actionLabel}
-            </Button>
-          </FieldGroup>
-        </FieldSet>
-      </Form>
-    </div>
+    </ul>
   </SectionContainer>
+  {Astro.slots.has("default") && (
+    <SectionContainer>
+      <div class="mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8">
+        <slot />
+      </div>
+    </SectionContainer>
+  )}
 </Section>
diff --git a/src/components/blocks/contact-2.astro b/src/components/blocks/contact-2.astro
index ced820012..a326fd7c9 100644
--- a/src/components/blocks/contact-2.astro
+++ b/src/components/blocks/contact-2.astro
@@ -3,22 +3,12 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import {
-  Field,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSet,
-} from "@/components/ui/field"
-import { Form } from "@/components/ui/form"
 import { Icon } from "@/components/ui/icon"
-import { Input } from "@/components/ui/input"
 import {
   Section,
   SectionContainer,
   SectionTitle,
 } from "@/components/ui/section"
-import { Textarea } from "@/components/ui/textarea"
 
 type Props = HTMLAttributes<"section"> & {
   title: string
@@ -29,20 +19,6 @@ type Props = HTMLAttributes<"section"> & {
     description: string
     href?: string
   }[]
-  form: {
-    id?: string
-    action?: string
-    method?: "get" | "post"
-    title: string
-    legend: string
-    nameLabel: string
-    namePlaceholder: string
-    emailLabel: string
-    emailPlaceholder: string
-    messageLabel: string
-    messagePlaceholder: string
-    actionLabel: string
-  }
 }
 
 const {
@@ -50,10 +26,8 @@ const {
   title,
   description,
   contactItems,
-  form,
   ...props
 } = Astro.props
-const formId = form.id ?? `contact-${crypto.randomUUID()}`
 ---
 
 <Section class={cn("", className)} {...props}>
@@ -65,95 +39,42 @@ const formId = form.id ?? `contact-${crypto.randomUUID()}`
           {description}
         </p>
       </div>
-      <div class="rounded-xl border p-6">
-        <div class="mb-6">
-          <h3 class="text-lg font-medium">{form.title}</h3>
+      {Astro.slots.has("default") && (
+        <div class="rounded-xl border p-6">
+          <slot />
         </div>
-        <Form id={formId} action={form.action} method={form.method ?? "post"}>
-          <FieldSet>
-            <FieldLegend class="sr-only">{form.legend}</FieldLegend>
-            <FieldGroup>
-              <div class="grid gap-4 md:grid-cols-2">
-                <Field>
-                  <FieldLabel for={`${formId}-name`}>
-                    {form.nameLabel}
-                  </FieldLabel>
-                  <Input
-                    id={`${formId}-name`}
-                    name="name"
-                    autocomplete="name"
-                    required
-                    placeholder={form.namePlaceholder}
-                  />
-                </Field>
-                <Field>
-                  <FieldLabel for={`${formId}-email`}>
-                    {form.emailLabel}
-                  </FieldLabel>
-                  <Input
-                    id={`${formId}-email`}
-                    name="email"
-                    autocomplete="email"
-                    required
-                    type="email"
-                    placeholder={form.emailPlaceholder}
-                  />
-                </Field>
-              </div>
-              <Field>
-                <FieldLabel for={`${formId}-message`}>
-                  {form.messageLabel}
-                </FieldLabel>
-                <Textarea
-                  id={`${formId}-message`}
-                  name="message"
-                  required
-                  rows={5}
-                  placeholder={form.messagePlaceholder}
-                />
-              </Field>
-              <Button type="submit" size="lg" class="w-full">
-                {form.actionLabel}
-              </Button>
-            </FieldGroup>
-          </FieldSet>
-        </Form>
-      </div>
+      )}
     </div>
 
-    <div class="flex flex-col gap-3">
+    <ul class="flex flex-col gap-3">
       {contactItems.map((item) => (
-        <div class="flex gap-4 rounded-xl border p-4">
-          {item.href ? (
-            <Button
-              as="a"
-              href={item.href}
-              variant="secondary"
-              size="icon"
-              class="text-primary shrink-0"
-              aria-label={item.title}
-            >
-              <Icon name={item.icon} />
-            </Button>
-          ) : (
-            <Button
-              as="span"
-              variant="secondary"
-              size="icon"
-              class="text-primary shrink-0"
-              aria-hidden="true"
-            >
-              <Icon name={item.icon} />
-            </Button>
-          )}
+        <li class="flex gap-4 rounded-xl border p-4">
+          <Button
+            as="span"
+            variant="secondary"
+            size="icon"
+            class="text-primary shrink-0"
+            aria-hidden="true"
+          >
+            <Icon name={item.icon} />
+          </Button>
           <div class="flex flex-col gap-1">
             <p class="text-foreground text-sm font-medium">{item.title}</p>
-            <p class="text-muted-foreground text-sm leading-relaxed">
-              {item.description}
-            </p>
+            {item.href != null ? (
+              <a
+                href={item.href}
+                class="text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline"
+              >
+                {item.description}
+              </a>
+            ) : (
+              <p class="text-muted-foreground text-sm leading-relaxed wrap-anywhere">
+                {item.description}
+              </p>
+            )}
           </div>
-        </div>
+        </li>
       ))}
-    </div>
+    </ul>
   </SectionContainer>
 </Section>
diff --git a/src/components/blocks/contact-3.astro b/src/components/blocks/contact-3.astro
index 05ec23f68..0879db8db 100644
--- a/src/components/blocks/contact-3.astro
+++ b/src/components/blocks/contact-3.astro
@@ -5,22 +5,12 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import {
-  Field,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSet,
-} from "@/components/ui/field"
-import { Form } from "@/components/ui/form"
 import { Icon } from "@/components/ui/icon"
-import { Input } from "@/components/ui/input"
 import {
   Section,
   SectionContainer,
   SectionTitle,
 } from "@/components/ui/section"
-import { Textarea } from "@/components/ui/textarea"
 import PlaceholderImage from "@/assets/placeholder.svg"
 
 type Props = HTMLAttributes<"section"> & {
@@ -32,19 +22,6 @@ type Props = HTMLAttributes<"section"> & {
     description: string
     href?: string
   }[]
-  form: {
-    id?: string
-    action?: string
-    method?: "get" | "post"
-    legend: string
-    nameLabel: string
-    namePlaceholder: string
-    emailLabel: string
-    emailPlaceholder: string
-    messageLabel: string
-    messagePlaceholder: string
-    actionLabel: string
-  }
   image?: {
     src: ImageMetadata
     alt: string
@@ -56,11 +33,9 @@ const {
   title,
   description,
   contactItems,
-  form,
   image = { src: PlaceholderImage, alt: "" },
   ...props
 } = Astro.props
-const formId = form.id ?? `contact-${crypto.randomUUID()}`
 ---
 
 <Section class={cn("", className)} {...props}>
@@ -72,98 +47,48 @@ const formId = form.id ?? `contact-${crypto.randomUUID()}`
           {description}
         </p>
       </div>
-      <div class="grid gap-4 sm:grid-cols-2">
+      <ul class="grid gap-4 sm:grid-cols-2">
         {contactItems.map((item) => (
-          <div class="flex gap-4">
-            {item.href ? (
-              <Button
-                as="a"
-                href={item.href}
-                variant="secondary"
-                size="icon"
-                class="text-primary shrink-0"
-                aria-label={item.title}
-              >
-                <Icon name={item.icon} />
-              </Button>
-            ) : (
-              <Button
-                as="span"
-                variant="secondary"
-                size="icon"
-                class="text-primary shrink-0"
-                aria-hidden="true"
-              >
-                <Icon name={item.icon} />
-              </Button>
-            )}
-            <div class="flex flex-col gap-1">
+          <li class="flex gap-4">
+            <Button
+              as="span"
+              variant="secondary"
+              size="icon"
+              class="text-primary shrink-0"
+              aria-hidden="true"
+            >
+              <Icon name={item.icon} />
+            </Button>
+            <div class="flex min-w-0 flex-col gap-1">
               <p class="text-foreground text-sm font-medium">{item.title}</p>
-              <p class="text-muted-foreground text-sm leading-relaxed">
-                {item.description}
-              </p>
+              {item.href != null ? (
+                <a
+                  href={item.href}
+                  class="text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline"
+                >
+                  {item.description}
+                </a>
+              ) : (
+                <p class="text-muted-foreground text-sm leading-relaxed wrap-anywhere">
+                  {item.description}
+                </p>
+              )}
             </div>
-          </div>
+          </li>
         ))}
-      </div>
-      <div class="rounded-xl border p-6">
-        <Form id={formId} action={form.action} method={form.method ?? "post"}>
-          <FieldSet>
-            <FieldLegend class="sr-only">{form.legend}</FieldLegend>
-            <FieldGroup>
-              <div class="grid gap-4 md:grid-cols-2">
-                <Field>
-                  <FieldLabel for={`${formId}-name`}>
-                    {form.nameLabel}
-                  </FieldLabel>
-                  <Input
-                    id={`${formId}-name`}
-                    name="name"
-                    autocomplete="name"
-                    required
-                    placeholder={form.namePlaceholder}
-                  />
-                </Field>
-                <Field>
-                  <FieldLabel for={`${formId}-email`}>
-                    {form.emailLabel}
-                  </FieldLabel>
-                  <Input
-                    id={`${formId}-email`}
-                    name="email"
-                    autocomplete="email"
-                    required
-                    type="email"
-                    placeholder={form.emailPlaceholder}
-                  />
-                </Field>
-              </div>
-              <Field>
-                <FieldLabel for={`${formId}-message`}>
-                  {form.messageLabel}
-                </FieldLabel>
-                <Textarea
-                  id={`${formId}-message`}
-                  name="message"
-                  required
-                  rows={5}
-                  placeholder={form.messagePlaceholder}
-                />
-              </Field>
-              <Button type="submit" size="lg" class="w-full">
-                {form.actionLabel}
-              </Button>
-            </FieldGroup>
-          </FieldSet>
-        </Form>
-      </div>
+      </ul>
+      {Astro.slots.has("default") && (
+        <div class="rounded-xl border p-6">
+          <slot />
+        </div>
+      )}
     </div>
     <Image
       src={image.src}
       alt={image.alt}
       class="aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24"
       widths={[640, 960, 1280]}
-      sizes="(min-width: 1024px) 50vw, 100vw"
+      sizes="(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw"
     />
   </SectionContainer>
 </Section>
diff --git a/src/content/pages/blocks/contact.mdx b/src/content/pages/blocks/contact.mdx
index c1d892ae4..e2f85d18d 100644
--- a/src/content/pages/blocks/contact.mdx
+++ b/src/content/pages/blocks/contact.mdx
@@ -4,14 +4,25 @@ title: Contact
 description: Contact sections for project inquiries, support, and sales conversations.
 ---
 
-Each block renders a real form with named, required fields and a submit button.
-Set `form.action` to your form handler and `form.method` to `"post"` (the
-default) or `"get"`. The blocks do not provide a submission backend.
-Pass `form.id` for a stable form ID; field IDs use it as their prefix.
+Each block shows your contact details and renders its default slot in a form
+panel. Put your own form in the slot, built from Form, Field, Input and
+Textarea, and point it at your form handler. The blocks do not provide a
+submission backend. Without slot content, the block shows only the contact
+details. Give each field an ID that is unique on the page.
 
 ```astro live props={{ name: 'contact-1' }}
 ---
 import Contact1Block from "@/components/blocks/contact-1.astro"
+import { Button } from "@/components/ui/button"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field"
+import { Form } from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
 ---
 
 <Contact1Block
@@ -42,24 +53,54 @@ import Contact1Block from "@/components/blocks/contact-1.astro"
       description: "Weekdays, 9 am to 6 pm CET",
     },
   ]}
-  form={{
-    legend: "Contact form",
-    nameLabel: "Name",
-    namePlaceholder: "Avery Morgan",
-    emailLabel: "Email",
-    emailPlaceholder: "avery@studio.dev",
-    messageLabel: "Message",
-    messagePlaceholder:
-      "Tell us about your project, timeline, and what kind of help you need...",
-    messageDescription: "Include goals, team size, and any hard deadlines.",
-    actionLabel: "Send message",
-  }}
-/>
+>
+  <Form method="post">
+    <FieldGroup>
+      <div class="grid gap-4 md:grid-cols-2">
+        <Field>
+          <FieldLabel for="contact-1-name">Name</FieldLabel>
+          <Input id="contact-1-name" name="name" autocomplete="name" required />
+        </Field>
+        <Field>
+          <FieldLabel for="contact-1-email">Email</FieldLabel>
+          <Input
+            id="contact-1-email"
+            name="email"
+            type="email"
+            autocomplete="email"
+            required
+          />
+        </Field>
+      </div>
+      <Field>
+        <FieldLabel for="contact-1-message">Message</FieldLabel>
+        <Textarea
+          id="contact-1-message"
+          name="message"
+          rows={5}
+          required
+          aria-describedby="contact-1-message-description"
+        />
+        <FieldDescription id="contact-1-message-description">
+          Include goals, team size, and any hard deadlines.
+        </FieldDescription>
+      </Field>
+      <Button type="submit" size="lg" class="w-full">
+        Send message
+      </Button>
+    </FieldGroup>
+  </Form>
+</Contact1Block>
 ```
 
 ```astro live props={{ name: 'contact-2' }}
 ---
 import Contact2Block from "@/components/blocks/contact-2.astro"
+import { Button } from "@/components/ui/button"
+import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
+import { Form } from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
 ---
 
 <Contact2Block
@@ -90,24 +131,45 @@ import Contact2Block from "@/components/blocks/contact-2.astro"
       description: "Weekdays, 9 am to 6 pm CET",
     },
   ]}
-  form={{
-    title: "Send us a message",
-    legend: "Contact form",
-    nameLabel: "Name",
-    namePlaceholder: "Jordan Lee",
-    emailLabel: "Email",
-    emailPlaceholder: "jordan@northwind.studio",
-    messageLabel: "Message",
-    messagePlaceholder:
-      "We are refreshing our docs and need reusable sections for onboarding, changelogs, and feature launches.",
-    actionLabel: "Send message",
-  }}
-/>
+>
+  <Form method="post">
+    <FieldGroup>
+      <div class="grid gap-4 md:grid-cols-2">
+        <Field>
+          <FieldLabel for="contact-2-name">Name</FieldLabel>
+          <Input id="contact-2-name" name="name" autocomplete="name" required />
+        </Field>
+        <Field>
+          <FieldLabel for="contact-2-email">Email</FieldLabel>
+          <Input
+            id="contact-2-email"
+            name="email"
+            type="email"
+            autocomplete="email"
+            required
+          />
+        </Field>
+      </div>
+      <Field>
+        <FieldLabel for="contact-2-message">Message</FieldLabel>
+        <Textarea id="contact-2-message" name="message" rows={5} required />
+      </Field>
+      <Button type="submit" size="lg" class="w-full">
+        Send message
+      </Button>
+    </FieldGroup>
+  </Form>
+</Contact2Block>
 ```
 
 ```astro live props={{ name: 'contact-3' }}
 ---
 import Contact3Block from "@/components/blocks/contact-3.astro"
+import { Button } from "@/components/ui/button"
+import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
+import { Form } from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
 ---
 
 <Contact3Block
@@ -138,16 +200,33 @@ import Contact3Block from "@/components/blocks/contact-3.astro"
       description: "Weekdays, 9 am to 6 pm CET",
     },
   ]}
-  form={{
-    legend: "Contact form",
-    nameLabel: "Name",
-    namePlaceholder: "Morgan Hale",
-    emailLabel: "Email",
-    emailPlaceholder: "morgan@team.dev",
-    messageLabel: "Message",
-    messagePlaceholder:
-      "Tell us what you are working on and how we can help...",
-    actionLabel: "Send message",
-  }}
-/>
+>
+  <Form method="post">
+    <FieldGroup>
+      <div class="grid gap-4 md:grid-cols-2">
+        <Field>
+          <FieldLabel for="contact-3-name">Name</FieldLabel>
+          <Input id="contact-3-name" name="name" autocomplete="name" required />
+        </Field>
+        <Field>
+          <FieldLabel for="contact-3-email">Email</FieldLabel>
+          <Input
+            id="contact-3-email"
+            name="email"
+            type="email"
+            autocomplete="email"
+            required
+          />
+        </Field>
+      </div>
+      <Field>
+        <FieldLabel for="contact-3-message">Message</FieldLabel>
+        <Textarea id="contact-3-message" name="message" rows={5} required />
+      </Field>
+      <Button type="submit" size="lg" class="w-full">
+        Send message
+      </Button>
+    </FieldGroup>
+  </Form>
+</Contact3Block>
 ```

From e1aa73bd73e38dc0dcedcb5de3dfbd000c485633 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 17:37:42 +0200
Subject: [PATCH 39/60] Pass locale and discount labels through pricing and
 product blocks

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/blocks/pricing-1.astro  | 31 ++++++++++-----
 src/components/blocks/pricing-2.astro  | 45 ++++++++++++++--------
 src/components/blocks/pricing-3.astro  | 31 ++++++++++-----
 src/components/blocks/product-1.astro  | 19 ++++++++-
 src/components/blocks/products-1.astro | 22 +++++++++--
 src/components/blocks/products-2.astro | 18 ++++++++-
 src/components/blocks/products-3.astro | 20 ++++++++--
 src/components/blocks/products-4.astro | 14 ++++++-
 src/components/blocks/products-5.astro | 28 +++++++++-----
 src/content/pages/blocks/pricing.mdx   | 53 +++++++++++++++++---------
 src/content/pages/blocks/product.mdx   |  2 +-
 src/content/pages/blocks/products.mdx  | 26 +++++++------
 12 files changed, 222 insertions(+), 87 deletions(-)

diff --git a/src/components/blocks/pricing-1.astro b/src/components/blocks/pricing-1.astro
index c4a7b57ca..a1420bc32 100644
--- a/src/components/blocks/pricing-1.astro
+++ b/src/components/blocks/pricing-1.astro
@@ -26,12 +26,17 @@ type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   featuredLabel: string
+  locale?: string
+  discountLabel?: string
   plans: {
     name: string
     description: string
-    price: number
-    currency: string
-    unit: string
+    price: {
+      value: number
+      compareAt?: number
+      currency: string
+      unit: string
+    }
     featured?: boolean
     features: string[]
     button: {
@@ -46,13 +51,15 @@ const {
   title,
   description,
   featuredLabel,
+  locale,
+  discountLabel,
   plans,
   ...props
 } = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="items-center gap-8 text-center">
+  <SectionContainer class="flex flex-col items-center gap-8 text-center">
     <div class="flex max-w-2xl flex-col items-center gap-4">
       <SectionTitle>{title}</SectionTitle>
       <SectionDescription>{description}</SectionDescription>
@@ -66,21 +73,27 @@ const {
         >
           <CardHeader>
             <div class="flex items-center gap-2">
-              <CardTitle>{plan.name}</CardTitle>
+              <CardTitle as="h3">{plan.name}</CardTitle>
               {plan.featured && <Badge>{featuredLabel}</Badge>}
             </div>
             <CardDescription>{plan.description}</CardDescription>
           </CardHeader>
           <CardContent class="flex flex-col gap-6">
             <Price>
-              <PriceValue price={plan.price} currency={plan.currency} />
-              <PriceUnit>{plan.unit}</PriceUnit>
+              <PriceValue
+                price={plan.price.value}
+                compareAt={plan.price.compareAt}
+                currency={plan.price.currency}
+                locale={locale}
+                discountLabel={discountLabel}
+              />
+              <PriceUnit>{plan.price.unit}</PriceUnit>
             </Price>
             <Separator />
             <ul class="flex flex-col gap-3">
               {plan.features.map((feature) => (
-                <li class="flex items-center gap-3 text-sm">
-                  <CheckIcon class="text-primary size-4 shrink-0" />
+                <li class="flex items-start gap-3 text-sm">
+                  <CheckIcon class="text-primary mt-0.5 size-4 shrink-0" />
                   {feature}
                 </li>
               ))}
diff --git a/src/components/blocks/pricing-2.astro b/src/components/blocks/pricing-2.astro
index 1545f9a47..f2e8c987a 100644
--- a/src/components/blocks/pricing-2.astro
+++ b/src/components/blocks/pricing-2.astro
@@ -24,13 +24,18 @@ import { Separator } from "@/components/ui/separator"
 type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
+  locale?: string
+  discountLabel?: string
   plans: {
     name: string
     description: string
-    price: number
-    compareAt?: number
-    currency: string
-    unit: string
+    price: {
+      value: number
+      compareAt?: number
+      currency: string
+      unit: string
+    }
+    featured?: boolean
     features: string[]
     button: {
       label: string
@@ -39,36 +44,46 @@ type Props = HTMLAttributes<"section"> & {
   }[]
 }
 
-const { class: className, title, description, plans, ...props } = Astro.props
+const {
+  class: className,
+  title,
+  description,
+  locale,
+  discountLabel,
+  plans,
+  ...props
+} = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="gap-8">
+  <SectionContainer class="flex flex-col gap-8">
     <div class="mx-auto max-w-2xl text-center">
       <SectionTitle>{title}</SectionTitle>
       <SectionDescription class="mt-4">{description}</SectionDescription>
     </div>
     <div class="mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]">
-      {plans.map((plan, index) => (
+      {plans.map((plan) => (
         <Card class="flex flex-col border-none shadow-none">
           <CardHeader>
-            <CardTitle>{plan.name}</CardTitle>
+            <CardTitle as="h3">{plan.name}</CardTitle>
             <CardDescription>{plan.description}</CardDescription>
           </CardHeader>
           <CardContent class="flex flex-col gap-6">
             <Price>
               <PriceValue
-                price={plan.price}
-                compareAt={plan.compareAt}
-                currency={plan.currency}
+                price={plan.price.value}
+                compareAt={plan.price.compareAt}
+                currency={plan.price.currency}
+                locale={locale}
+                discountLabel={discountLabel}
               />
-              <PriceUnit>{plan.unit}</PriceUnit>
+              <PriceUnit>{plan.price.unit}</PriceUnit>
             </Price>
             <Separator />
             <ul class="flex flex-col gap-3">
               {plan.features.map((feature) => (
-                <li class="flex items-center gap-3 text-sm">
-                  <CheckIcon class="text-primary size-4 shrink-0" />
+                <li class="flex items-start gap-3 text-sm">
+                  <CheckIcon class="text-primary mt-0.5 size-4 shrink-0" />
                   {feature}
                 </li>
               ))}
@@ -78,7 +93,7 @@ const { class: className, title, description, plans, ...props } = Astro.props
             <Button
               as="a"
               href={plan.button.href}
-              variant={index === 0 ? "outline" : "default"}
+              variant={plan.featured ? "default" : "outline"}
               class="w-full"
             >
               {plan.button.label}
diff --git a/src/components/blocks/pricing-3.astro b/src/components/blocks/pricing-3.astro
index 67b2b06f0..2d6f3acc2 100644
--- a/src/components/blocks/pricing-3.astro
+++ b/src/components/blocks/pricing-3.astro
@@ -26,12 +26,17 @@ type Props = HTMLAttributes<"section"> & {
   badge: string
   title: string
   description: string
+  locale?: string
+  discountLabel?: string
   offer: {
     name: string
     description: string
-    price: number
-    currency: string
-    unit: string
+    price: {
+      value: number
+      compareAt?: number
+      currency: string
+      unit: string
+    }
     features: string[]
     button: {
       label: string
@@ -45,13 +50,15 @@ const {
   badge,
   title,
   description,
+  locale,
+  discountLabel,
   offer,
   ...props
 } = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="items-center gap-8 text-center">
+  <SectionContainer class="flex flex-col items-center gap-8 text-center">
     <div class="flex max-w-2xl flex-col items-center gap-4">
       <Badge variant="secondary">{badge}</Badge>
       <SectionTitle>{title}</SectionTitle>
@@ -59,19 +66,25 @@ const {
     </div>
     <Card class="ring-primary w-full max-w-md ring-2">
       <CardHeader class="text-left">
-        <CardTitle>{offer.name}</CardTitle>
+        <CardTitle as="h3">{offer.name}</CardTitle>
         <CardDescription>{offer.description}</CardDescription>
       </CardHeader>
       <CardContent class="flex flex-col gap-6 text-left">
         <Price>
-          <PriceValue price={offer.price} currency={offer.currency} />
-          <PriceUnit>{offer.unit}</PriceUnit>
+          <PriceValue
+            price={offer.price.value}
+            compareAt={offer.price.compareAt}
+            currency={offer.price.currency}
+            locale={locale}
+            discountLabel={discountLabel}
+          />
+          <PriceUnit>{offer.price.unit}</PriceUnit>
         </Price>
         <Separator />
         <ul class="flex flex-col gap-3">
           {offer.features.map((feature) => (
-            <li class="flex items-center gap-3 text-sm">
-              <CheckIcon class="text-primary size-4 shrink-0" />
+            <li class="flex items-start gap-3 text-sm">
+              <CheckIcon class="text-primary mt-0.5 size-4 shrink-0" />
               {feature}
             </li>
           ))}
diff --git a/src/components/blocks/product-1.astro b/src/components/blocks/product-1.astro
index 80b39aad3..bd6648024 100644
--- a/src/components/blocks/product-1.astro
+++ b/src/components/blocks/product-1.astro
@@ -19,9 +19,12 @@ type Props = HTMLAttributes<"section"> & {
   }
   price: {
     value: number
+    compareAt?: number
     currency: string
     unit: string
   }
+  locale?: string
+  discountLabel?: string
   note: string
   buttons: {
     label: string
@@ -36,6 +39,8 @@ const {
   description,
   image,
   price,
+  locale,
+  discountLabel,
   note,
   buttons,
   ...props
@@ -47,7 +52,11 @@ const {
     <Image
       src={image.src}
       alt={image.alt}
-      class="aspect-[16/11] rounded-lg object-cover"
+      class="aspect-[16/11] w-full rounded-lg object-cover"
+      widths={[640, 960, 1280]}
+      sizes="(min-width: 80rem) 608px, (min-width: 64rem) 50vw, 100vw"
+      loading="eager"
+      fetchpriority="high"
     />
     <div class="flex flex-col gap-5">
       <Badge variant="secondary" class="w-fit">
@@ -58,7 +67,13 @@ const {
       </h1>
       <p class="text-muted-foreground text-lg leading-8">{description}</p>
       <Price>
-        <PriceValue price={price.value} currency={price.currency} />
+        <PriceValue
+          price={price.value}
+          compareAt={price.compareAt}
+          currency={price.currency}
+          locale={locale}
+          discountLabel={discountLabel}
+        />
         <PriceUnit>{price.unit}</PriceUnit>
       </Price>
       <p class="border-y py-4 text-sm leading-7">{note}</p>
diff --git a/src/components/blocks/products-1.astro b/src/components/blocks/products-1.astro
index f174776f5..6e0241997 100644
--- a/src/components/blocks/products-1.astro
+++ b/src/components/blocks/products-1.astro
@@ -22,6 +22,8 @@ import {
 type Props = HTMLAttributes<"section"> & {
   badge: string
   title: string
+  locale?: string
+  discountLabel?: string
   products: {
     image: {
       src: ImageMetadata
@@ -31,17 +33,26 @@ type Props = HTMLAttributes<"section"> & {
     description: string
     price: {
       value: number
+      compareAt?: number
       currency: string
       unit: string
     }
   }[]
 }
 
-const { class: className, badge, title, products, ...props } = Astro.props
+const {
+  class: className,
+  badge,
+  title,
+  locale,
+  discountLabel,
+  products,
+  ...props
+} = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="gap-8">
+  <SectionContainer class="flex flex-col gap-8">
     <div class="mx-auto max-w-2xl text-center">
       <Badge variant="secondary">{badge}</Badge>
       <SectionTitle class="mt-4">{title}</SectionTitle>
@@ -53,16 +64,21 @@ const { class: className, badge, title, products, ...props } = Astro.props
             src={product.image.src}
             alt={product.image.alt}
             class="aspect-[4/3] w-full object-cover"
+            widths={[320, 480, 640]}
+            sizes="(min-width: 80rem) 302px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw"
           />
           <CardHeader>
-            <CardTitle>{product.title}</CardTitle>
+            <CardTitle as="h3">{product.title}</CardTitle>
             <CardDescription>{product.description}</CardDescription>
           </CardHeader>
           <CardContent>
             <Price>
               <PriceValue
                 price={product.price.value}
+                compareAt={product.price.compareAt}
                 currency={product.price.currency}
+                locale={locale}
+                discountLabel={discountLabel}
               />
               <PriceUnit>{product.price.unit}</PriceUnit>
             </Price>
diff --git a/src/components/blocks/products-2.astro b/src/components/blocks/products-2.astro
index f7c7cf6fd..2ff01d7ff 100644
--- a/src/components/blocks/products-2.astro
+++ b/src/components/blocks/products-2.astro
@@ -14,22 +14,33 @@ import { Separator } from "@/components/ui/separator"
 type Props = HTMLAttributes<"section"> & {
   badge: string
   title: string
+  locale?: string
+  discountLabel?: string
   products: {
     title: string
     description: string
     price: {
       value: number
+      compareAt?: number
       currency: string
       unit: string
     }
   }[]
 }
 
-const { class: className, badge, title, products, ...props } = Astro.props
+const {
+  class: className,
+  badge,
+  title,
+  locale,
+  discountLabel,
+  products,
+  ...props
+} = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="gap-8">
+  <SectionContainer class="flex flex-col gap-8">
     <div class="max-w-2xl">
       <Badge variant="secondary">{badge}</Badge>
       <SectionTitle class="mt-4">{title}</SectionTitle>
@@ -48,7 +59,10 @@ const { class: className, badge, title, products, ...props } = Astro.props
             <Price>
               <PriceValue
                 price={item.price.value}
+                compareAt={item.price.compareAt}
                 currency={item.price.currency}
+                locale={locale}
+                discountLabel={discountLabel}
               />
               <PriceUnit>{item.price.unit}</PriceUnit>
             </Price>
diff --git a/src/components/blocks/products-3.astro b/src/components/blocks/products-3.astro
index fe6c7dcc1..243e21e1e 100644
--- a/src/components/blocks/products-3.astro
+++ b/src/components/blocks/products-3.astro
@@ -20,21 +20,32 @@ import {
 type Props = HTMLAttributes<"section"> & {
   badge: string
   title: string
+  locale?: string
+  discountLabel?: string
   products: {
     title: string
     description: string
     price: {
       value: number
+      compareAt?: number
       currency: string
     }
   }[]
 }
 
-const { class: className, badge, title, products, ...props } = Astro.props
+const {
+  class: className,
+  badge,
+  title,
+  locale,
+  discountLabel,
+  products,
+  ...props
+} = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="gap-8">
+  <SectionContainer class="flex flex-col gap-8">
     <div class="mx-auto max-w-2xl text-center">
       <Badge variant="secondary">{badge}</Badge>
       <SectionTitle class="mt-4">{title}</SectionTitle>
@@ -47,12 +58,15 @@ const { class: className, badge, title, products, ...props } = Astro.props
               <PriceValue
                 class="text-3xl font-semibold"
                 price={product.price.value}
+                compareAt={product.price.compareAt}
                 currency={product.price.currency}
+                locale={locale}
+                discountLabel={discountLabel}
               />
             </Price>
           </CardHeader>
           <CardContent class="flex flex-col gap-2">
-            <CardTitle>{product.title}</CardTitle>
+            <CardTitle as="h3">{product.title}</CardTitle>
             <CardDescription>{product.description}</CardDescription>
           </CardContent>
         </Card>
diff --git a/src/components/blocks/products-4.astro b/src/components/blocks/products-4.astro
index f98c3ec7e..cf063a7ba 100644
--- a/src/components/blocks/products-4.astro
+++ b/src/components/blocks/products-4.astro
@@ -26,6 +26,8 @@ type Props = HTMLAttributes<"section"> & {
     label: string
     href: string
   }[]
+  locale?: string
+  discountLabel?: string
   products: {
     image: {
       src: ImageMetadata
@@ -35,6 +37,7 @@ type Props = HTMLAttributes<"section"> & {
     description: string
     price: {
       value: number
+      compareAt?: number
       currency: string
       unit: string
     }
@@ -46,13 +49,15 @@ const {
   title,
   description,
   buttons,
+  locale,
+  discountLabel,
   products,
   ...props
 } = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="gap-8">
+  <SectionContainer class="flex flex-col gap-8">
     <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
       <div class="max-w-2xl">
         <SectionTitle>{title}</SectionTitle>
@@ -75,16 +80,21 @@ const {
             src={product.image.src}
             alt={product.image.alt}
             class="aspect-[4/3] w-full object-cover"
+            widths={[320, 480, 640]}
+            sizes="(min-width: 80rem) 405px, (min-width: 64rem) 33vw, (min-width: 40rem) 50vw, 100vw"
           />
           <CardHeader>
-            <CardTitle>{product.title}</CardTitle>
+            <CardTitle as="h3">{product.title}</CardTitle>
             <CardDescription>{product.description}</CardDescription>
           </CardHeader>
           <CardContent>
             <Price>
               <PriceValue
                 price={product.price.value}
+                compareAt={product.price.compareAt}
                 currency={product.price.currency}
+                locale={locale}
+                discountLabel={discountLabel}
               />
               <PriceUnit>{product.price.unit}</PriceUnit>
             </Price>
diff --git a/src/components/blocks/products-5.astro b/src/components/blocks/products-5.astro
index 2ec35a152..746faaca6 100644
--- a/src/components/blocks/products-5.astro
+++ b/src/components/blocks/products-5.astro
@@ -27,6 +27,8 @@ type Props = HTMLAttributes<"section"> & {
     label: string
     href: string
   }[]
+  locale?: string
+  discountLabel?: string
   products: {
     image: {
       src: ImageMetadata
@@ -36,6 +38,7 @@ type Props = HTMLAttributes<"section"> & {
     description: string
     price: {
       value: number
+      compareAt?: number
       currency: string
       unit: string
     }
@@ -47,13 +50,15 @@ const {
   badge,
   title,
   buttons,
+  locale,
+  discountLabel,
   products,
   ...props
 } = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="gap-8">
+  <SectionContainer class="flex flex-col gap-8">
     <div class="mx-auto max-w-2xl text-center">
       <Badge variant="secondary">{badge}</Badge>
       <SectionTitle class="mt-4">{title}</SectionTitle>
@@ -67,23 +72,26 @@ const {
     </div>
     <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
       {products.map((product) => (
-        <Card class="group/product gap-0 overflow-hidden">
-          <div class="overflow-hidden">
-            <Image
-              src={product.image.src}
-              alt={product.image.alt}
-              class="aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105"
-            />
-          </div>
+        <Card class="gap-0 overflow-hidden">
+          <Image
+            src={product.image.src}
+            alt={product.image.alt}
+            class="aspect-[3/4] w-full object-cover"
+            widths={[320, 480, 640]}
+            sizes="(min-width: 80rem) 302px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw"
+          />
           <CardHeader>
-            <CardTitle>{product.title}</CardTitle>
+            <CardTitle as="h3">{product.title}</CardTitle>
             <CardDescription>{product.description}</CardDescription>
           </CardHeader>
           <CardContent>
             <Price>
               <PriceValue
                 price={product.price.value}
+                compareAt={product.price.compareAt}
                 currency={product.price.currency}
+                locale={locale}
+                discountLabel={discountLabel}
               />
               <PriceUnit>{product.price.unit}</PriceUnit>
             </Price>
diff --git a/src/content/pages/blocks/pricing.mdx b/src/content/pages/blocks/pricing.mdx
index ae65959a6..b0fa26618 100644
--- a/src/content/pages/blocks/pricing.mdx
+++ b/src/content/pages/blocks/pricing.mdx
@@ -17,9 +17,11 @@ import Pricing1Block from "@/components/blocks/pricing-1.astro"
     {
       name: "Starter",
       description: "For individuals and small projects getting started.",
-      price: 19,
-      currency: "USD",
-      unit: "month",
+      price: {
+        value: 19,
+        currency: "USD",
+        unit: "month",
+      },
       features: [
         "Up to 3 projects",
         "Basic analytics",
@@ -31,9 +33,11 @@ import Pricing1Block from "@/components/blocks/pricing-1.astro"
     {
       name: "Team",
       description: "For growing teams that need more power and collaboration.",
-      price: 49,
-      currency: "USD",
-      unit: "month",
+      price: {
+        value: 49,
+        currency: "USD",
+        unit: "month",
+      },
       featured: true,
       features: [
         "Unlimited projects",
@@ -47,9 +51,11 @@ import Pricing1Block from "@/components/blocks/pricing-1.astro"
     {
       name: "Studio",
       description: "For agencies and large teams with advanced needs.",
-      price: 99,
-      currency: "USD",
-      unit: "month",
+      price: {
+        value: 99,
+        currency: "USD",
+        unit: "month",
+      },
       features: [
         "Everything in Team",
         "Custom integrations",
@@ -69,15 +75,19 @@ import Pricing2Block from "@/components/blocks/pricing-2.astro"
 ---
 
 <Pricing2Block
+  locale="en-US"
+  discountLabel="Save"
   title="Pick the plan that matches your needs"
   description="Start small and scale as you grow. All plans include a 14-day free trial."
   plans={[
     {
       name: "Basic",
       description: "Essential tools for personal use and small projects.",
-      price: 29,
-      currency: "USD",
-      unit: "month",
+      price: {
+        value: 29,
+        currency: "USD",
+        unit: "month",
+      },
       features: [
         "5 projects",
         "Basic analytics",
@@ -89,10 +99,13 @@ import Pricing2Block from "@/components/blocks/pricing-2.astro"
     {
       name: "Pro",
       description: "Advanced features for professionals and growing teams.",
-      price: 79,
-      compareAt: 99,
-      currency: "USD",
-      unit: "month",
+      price: {
+        value: 79,
+        compareAt: 99,
+        currency: "USD",
+        unit: "month",
+      },
+      featured: true,
       features: [
         "Unlimited projects",
         "Advanced analytics",
@@ -120,9 +133,11 @@ import Pricing3Block from "@/components/blocks/pricing-3.astro"
     name: "Studio bundle",
     description:
       "Full access for teams managing content, product, and marketing.",
-    price: 249,
-    currency: "USD",
-    unit: "month",
+    price: {
+      value: 249,
+      currency: "USD",
+      unit: "month",
+    },
     features: [
       "Unlimited projects and users",
       "Advanced analytics and reporting",
diff --git a/src/content/pages/blocks/product.mdx b/src/content/pages/blocks/product.mdx
index ccaa33cec..f13210710 100644
--- a/src/content/pages/blocks/product.mdx
+++ b/src/content/pages/blocks/product.mdx
@@ -16,7 +16,7 @@ import placeholderImage from "@/assets/placeholder.svg"
   description="The product family only needs one strong section when the page should quickly explain the offer, its price, and the next action."
   image={{
     src: placeholderImage,
-    alt: "Featured product image placeholder",
+    alt: "",
   }}
   price={{
     value: 129,
diff --git a/src/content/pages/blocks/products.mdx b/src/content/pages/blocks/products.mdx
index 0fac61a5b..bef3f614c 100644
--- a/src/content/pages/blocks/products.mdx
+++ b/src/content/pages/blocks/products.mdx
@@ -11,23 +11,25 @@ import placeholderImage from "@/assets/placeholder.svg"
 ---
 
 <Products1Block
+  locale="en-US"
+  discountLabel="Save"
   badge="Product grid"
   title="A simple product grid that works well after a features section"
   products={[
     {
       image: {
         src: placeholderImage,
-        alt: "Landing page kit image placeholder",
+        alt: "",
       },
       title: "Landing page kit",
       description:
         "Tight cards are enough when the page already established the main product story.",
-      price: { value: 100, currency: "USD", unit: "month" },
+      price: { value: 80, compareAt: 100, currency: "USD", unit: "month" },
     },
     {
       image: {
         src: placeholderImage,
-        alt: "Docs launch kit image placeholder",
+        alt: "",
       },
       title: "Docs launch kit",
       description:
@@ -37,7 +39,7 @@ import placeholderImage from "@/assets/placeholder.svg"
     {
       image: {
         src: placeholderImage,
-        alt: "Section starter pack image placeholder",
+        alt: "",
       },
       title: "Section starter pack",
       description:
@@ -47,7 +49,7 @@ import placeholderImage from "@/assets/placeholder.svg"
     {
       image: {
         src: placeholderImage,
-        alt: "Conversion toolkit image placeholder",
+        alt: "",
       },
       title: "Conversion toolkit",
       description:
@@ -143,7 +145,7 @@ import placeholderImage from "@/assets/placeholder.svg"
     {
       image: {
         src: placeholderImage,
-        alt: "Launch page bundle image placeholder",
+        alt: "",
       },
       title: "Launch page bundle",
       description:
@@ -153,7 +155,7 @@ import placeholderImage from "@/assets/placeholder.svg"
     {
       image: {
         src: placeholderImage,
-        alt: "Editorial bundle image placeholder",
+        alt: "",
       },
       title: "Editorial bundle",
       description:
@@ -163,7 +165,7 @@ import placeholderImage from "@/assets/placeholder.svg"
     {
       image: {
         src: placeholderImage,
-        alt: "Onboarding bundle image placeholder",
+        alt: "",
       },
       title: "Onboarding bundle",
       description:
@@ -188,7 +190,7 @@ import placeholderImage from "@/assets/placeholder.svg"
     {
       image: {
         src: placeholderImage,
-        alt: "Landing page kit image placeholder",
+        alt: "",
       },
       title: "Landing page kit",
       description:
@@ -198,7 +200,7 @@ import placeholderImage from "@/assets/placeholder.svg"
     {
       image: {
         src: placeholderImage,
-        alt: "Docs launch kit image placeholder",
+        alt: "",
       },
       title: "Docs launch kit",
       description:
@@ -208,7 +210,7 @@ import placeholderImage from "@/assets/placeholder.svg"
     {
       image: {
         src: placeholderImage,
-        alt: "Section starter pack image placeholder",
+        alt: "",
       },
       title: "Section starter pack",
       description:
@@ -218,7 +220,7 @@ import placeholderImage from "@/assets/placeholder.svg"
     {
       image: {
         src: placeholderImage,
-        alt: "Conversion toolkit image placeholder",
+        alt: "",
       },
       title: "Conversion toolkit",
       description:

From 267fb9c4d9576e0af18942a085cecf0fe0293001 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 17:37:42 +0200
Subject: [PATCH 40/60] Wrap article pages in one article and style only linked
 article cards

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/blocks/article-1.astro  | 62 ++++++++++++-----------
 src/components/blocks/article-2.astro  | 70 +++++++++++++-------------
 src/components/blocks/articles-1.astro | 15 +++---
 src/components/blocks/articles-2.astro | 32 ++++++------
 src/components/blocks/articles-3.astro | 15 +++---
 src/components/blocks/articles-4.astro | 15 +++---
 src/content/pages/blocks/article.mdx   |  4 +-
 src/content/pages/blocks/articles.mdx  | 22 ++++----
 8 files changed, 122 insertions(+), 113 deletions(-)

diff --git a/src/components/blocks/article-1.astro b/src/components/blocks/article-1.astro
index 4fe85c629..bc2fbb49d 100644
--- a/src/components/blocks/article-1.astro
+++ b/src/components/blocks/article-1.astro
@@ -33,38 +33,40 @@ const {
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="mx-auto max-w-2xl gap-8">
-    <div class="mx-auto flex w-full max-w-2xl flex-col gap-6">
-      <div class="flex flex-col gap-4">
-        <h1 class="text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl">
-          {title}
-        </h1>
-        <p class="text-muted-foreground text-lg leading-8 text-balance">
-          {description}
-        </p>
-      </div>
-      <div class="flex items-center gap-3">
-        <Avatar size="lg">
-          <AvatarImage src={author.image} alt={author.name} />
-          <AvatarFallback>{author.initials}</AvatarFallback>
-        </Avatar>
-        <div class="flex flex-col">
-          <p class="text-sm font-medium">{author.name}</p>
-          <p class="text-muted-foreground text-xs">{author.date}</p>
+  <SectionContainer class="max-w-2xl">
+    <article class="flex flex-col gap-8">
+      <header class="flex flex-col gap-6">
+        <div class="flex flex-col gap-4">
+          <h1 class="text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl">
+            {title}
+          </h1>
+          <p class="text-muted-foreground text-lg leading-8 text-balance">
+            {description}
+          </p>
+        </div>
+        <div class="flex items-center gap-3">
+          <Avatar size="lg" aria-hidden="true">
+            <AvatarImage src={author.image} />
+            <AvatarFallback>{author.initials}</AvatarFallback>
+          </Avatar>
+          <div class="flex flex-col">
+            <p class="text-sm font-medium">{author.name}</p>
+            <p class="text-muted-foreground text-xs">{author.date}</p>
+          </div>
         </div>
+      </header>
+      <Image
+        src={image.src}
+        alt={image.alt}
+        class="aspect-[16/10] w-full rounded-xl object-cover"
+        widths={[640, 960, 1280]}
+        sizes="(min-width: 42rem) 42rem, 100vw"
+        loading="eager"
+        fetchpriority="high"
+      />
+      <div class="flex flex-col gap-6 text-base leading-8">
+        <slot />
       </div>
-    </div>
-
-    <Image
-      src={image.src}
-      alt={image.alt}
-      class="aspect-[16/10] w-full rounded-xl object-cover"
-      widths={[640, 960]}
-      sizes="(min-width: 42rem) 42rem, 100vw"
-    />
-
-    <article class="mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8">
-      <slot />
     </article>
   </SectionContainer>
 </Section>
diff --git a/src/components/blocks/article-2.astro b/src/components/blocks/article-2.astro
index dc782110d..b09627dea 100644
--- a/src/components/blocks/article-2.astro
+++ b/src/components/blocks/article-2.astro
@@ -34,43 +34,45 @@ const {
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="mx-auto max-w-2xl items-center gap-8 text-center">
-    <div class="mx-auto flex w-full max-w-2xl flex-col items-center gap-6">
-      <div class="flex flex-col gap-4">
-        <h1 class="text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl">
-          {title}
-        </h1>
-        <p class="text-muted-foreground text-lg leading-8 text-balance">
-          {description}
-        </p>
-      </div>
-      <div class="flex items-center gap-3">
-        <Avatar size="lg">
-          <AvatarImage src={author.image} alt={author.name} />
-          <AvatarFallback>{author.initials}</AvatarFallback>
-        </Avatar>
-        <div class="flex flex-col text-left">
-          <p class="text-sm font-medium">
-            {author.name}{" "}
-            <span class="text-muted-foreground font-normal">
-              &middot; {author.date}
-            </span>
+  <SectionContainer class="max-w-2xl">
+    <article class="flex flex-col gap-8">
+      <header class="flex flex-col items-center gap-6 text-center">
+        <div class="flex flex-col gap-4">
+          <h1 class="text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl">
+            {title}
+          </h1>
+          <p class="text-muted-foreground text-lg leading-8 text-balance">
+            {description}
           </p>
-          <p class="text-muted-foreground text-xs">{author.readingTime}</p>
         </div>
+        <div class="flex items-center gap-3">
+          <Avatar size="lg" aria-hidden="true">
+            <AvatarImage src={author.image} />
+            <AvatarFallback>{author.initials}</AvatarFallback>
+          </Avatar>
+          <div class="flex flex-col text-left">
+            <p class="text-sm font-medium">
+              {author.name}{" "}
+              <span class="text-muted-foreground font-normal">
+                &middot; {author.date}
+              </span>
+            </p>
+            <p class="text-muted-foreground text-xs">{author.readingTime}</p>
+          </div>
+        </div>
+      </header>
+      <Image
+        src={image.src}
+        alt={image.alt}
+        class="aspect-[16/10] w-full rounded-xl object-cover"
+        widths={[640, 960, 1280]}
+        sizes="(min-width: 42rem) 42rem, 100vw"
+        loading="eager"
+        fetchpriority="high"
+      />
+      <div class="flex flex-col gap-6 text-base leading-8">
+        <slot />
       </div>
-    </div>
-
-    <Image
-      src={image.src}
-      alt={image.alt}
-      class="aspect-[16/10] w-full rounded-xl object-cover"
-      widths={[640, 960]}
-      sizes="(min-width: 42rem) 42rem, 100vw"
-    />
-
-    <article class="mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8">
-      <slot />
     </article>
   </SectionContainer>
 </Section>
diff --git a/src/components/blocks/articles-1.astro b/src/components/blocks/articles-1.astro
index febcad679..dce60e703 100644
--- a/src/components/blocks/articles-1.astro
+++ b/src/components/blocks/articles-1.astro
@@ -36,7 +36,7 @@ const { class: className, title, description, articles, ...props } = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="gap-8">
+  <SectionContainer class="flex flex-col gap-8">
     <div class="flex max-w-2xl flex-col gap-4">
       <SectionTitle>{title}</SectionTitle>
       <p class="text-muted-foreground text-base leading-7">{description}</p>
@@ -48,7 +48,11 @@ const { class: className, title, description, articles, ...props } = Astro.props
         return (
           <Wrapper
             href={article.href}
-            class="group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+            class={cn(
+              "flex h-full flex-col gap-4 rounded-xl p-4",
+              article.href != null &&
+                "group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+            )}
           >
             <Image
               src={article.image.src}
@@ -69,11 +73,8 @@ const { class: className, title, description, articles, ...props } = Astro.props
               </p>
             </div>
             <div class="mt-auto flex items-center gap-3">
-              <Avatar>
-                <AvatarImage
-                  src={article.author.image}
-                  alt={article.author.name}
-                />
+              <Avatar aria-hidden="true">
+                <AvatarImage src={article.author.image} />
                 <AvatarFallback>{article.author.initials}</AvatarFallback>
               </Avatar>
               <div class="flex flex-col">
diff --git a/src/components/blocks/articles-2.astro b/src/components/blocks/articles-2.astro
index a861e9ea9..3e759bd23 100644
--- a/src/components/blocks/articles-2.astro
+++ b/src/components/blocks/articles-2.astro
@@ -58,7 +58,7 @@ const FeaturedWrapper = featured.href != null ? "a" : "div"
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="gap-8">
+  <SectionContainer class="flex flex-col gap-8">
     <div class="mx-auto max-w-2xl text-center">
       <h2 class="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
         {title}
@@ -70,14 +70,18 @@ const FeaturedWrapper = featured.href != null ? "a" : "div"
 
     <FeaturedWrapper
       href={featured.href}
-      class="group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4"
+      class={cn(
+        "grid gap-6 rounded-xl lg:grid-cols-2 lg:items-center lg:pr-4",
+        featured.href != null &&
+          "group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+      )}
     >
       <Image
         src={featured.image.src}
         alt={featured.image.alt}
         class="aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85"
         widths={[640, 960, 1280]}
-        sizes="(min-width: 64rem) 50vw, 100vw"
+        sizes="(min-width: 80rem) 616px, (min-width: 64rem) 50vw, 100vw"
       />
       <div class="flex flex-col gap-4">
         <Badge variant="outline" class="w-fit">
@@ -90,11 +94,8 @@ const FeaturedWrapper = featured.href != null ? "a" : "div"
           {featured.description}
         </p>
         <div class="flex items-center gap-3">
-          <Avatar>
-            <AvatarImage
-              src={featured.author.image}
-              alt={featured.author.name}
-            />
+          <Avatar aria-hidden="true">
+            <AvatarImage src={featured.author.image} />
             <AvatarFallback>{featured.author.initials}</AvatarFallback>
           </Avatar>
           <div class="flex flex-col">
@@ -111,14 +112,18 @@ const FeaturedWrapper = featured.href != null ? "a" : "div"
         return (
           <Wrapper
             href={article.href}
-            class="group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+            class={cn(
+              "flex h-full flex-col gap-4 rounded-xl p-4",
+              article.href != null &&
+                "group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+            )}
           >
             <Image
               src={article.image.src}
               alt={article.image.alt}
               class="-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85"
               widths={[480, 720]}
-              sizes="(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw"
+              sizes="(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw"
             />
             <div class="flex flex-col gap-2">
               <p class="text-muted-foreground text-sm font-medium">
@@ -132,11 +137,8 @@ const FeaturedWrapper = featured.href != null ? "a" : "div"
               </p>
             </div>
             <div class="mt-auto flex items-center gap-3">
-              <Avatar>
-                <AvatarImage
-                  src={article.author.image}
-                  alt={article.author.name}
-                />
+              <Avatar aria-hidden="true">
+                <AvatarImage src={article.author.image} />
                 <AvatarFallback>{article.author.initials}</AvatarFallback>
               </Avatar>
               <div class="flex flex-col">
diff --git a/src/components/blocks/articles-3.astro b/src/components/blocks/articles-3.astro
index 34de891a7..776c2cbe2 100644
--- a/src/components/blocks/articles-3.astro
+++ b/src/components/blocks/articles-3.astro
@@ -35,7 +35,7 @@ const { class: className, title, articles, ...props } = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="gap-8">
+  <SectionContainer class="flex flex-col gap-8">
     <div class="flex flex-wrap items-end justify-between gap-4">
       <div class="flex flex-col gap-4">
         <SectionTitle>{title}</SectionTitle>
@@ -48,7 +48,11 @@ const { class: className, title, articles, ...props } = Astro.props
         return (
           <Wrapper
             href={article.href}
-            class="group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+            class={cn(
+              "bg-muted/50 flex h-full flex-col gap-4 rounded-xl p-4",
+              article.href != null &&
+                "group hover:bg-muted focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+            )}
           >
             <Image
               src={article.image.src}
@@ -69,11 +73,8 @@ const { class: className, title, articles, ...props } = Astro.props
               </p>
             </div>
             <div class="mt-auto flex items-center gap-3">
-              <Avatar>
-                <AvatarImage
-                  src={article.author.image}
-                  alt={article.author.name}
-                />
+              <Avatar aria-hidden="true">
+                <AvatarImage src={article.author.image} />
                 <AvatarFallback>{article.author.initials}</AvatarFallback>
               </Avatar>
               <div class="flex flex-col">
diff --git a/src/components/blocks/articles-4.astro b/src/components/blocks/articles-4.astro
index 739245077..05277f6e8 100644
--- a/src/components/blocks/articles-4.astro
+++ b/src/components/blocks/articles-4.astro
@@ -27,7 +27,7 @@ const { class: className, title, description, articles, ...props } = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="gap-8">
+  <SectionContainer class="flex flex-col gap-8">
     <div class="mx-auto max-w-2xl text-center">
       <h2 class="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
         {title}
@@ -43,7 +43,11 @@ const { class: className, title, description, articles, ...props } = Astro.props
         return (
           <Wrapper
             href={article.href}
-            class="group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+            class={cn(
+              "flex h-full flex-col gap-4 rounded-xl border p-6",
+              article.href != null &&
+                "group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+            )}
           >
             <div class="flex flex-col gap-2">
               <p class="text-muted-foreground text-sm font-medium">
@@ -57,11 +61,8 @@ const { class: className, title, description, articles, ...props } = Astro.props
               </p>
             </div>
             <div class="mt-auto flex items-center gap-3">
-              <Avatar>
-                <AvatarImage
-                  src={article.author.image}
-                  alt={article.author.name}
-                />
+              <Avatar aria-hidden="true">
+                <AvatarImage src={article.author.image} />
                 <AvatarFallback>{article.author.initials}</AvatarFallback>
               </Avatar>
               <div class="flex flex-col">
diff --git a/src/content/pages/blocks/article.mdx b/src/content/pages/blocks/article.mdx
index a14e34262..b4fa91015 100644
--- a/src/content/pages/blocks/article.mdx
+++ b/src/content/pages/blocks/article.mdx
@@ -22,7 +22,7 @@ import placeholderImage from "@/assets/placeholder.svg"
   }}
   image={{
     src: placeholderImage,
-    alt: "Editorial article hero image",
+    alt: "",
   }}
 >
   <p>
@@ -61,7 +61,7 @@ import placeholderImage from "@/assets/placeholder.svg"
   }}
   image={{
     src: placeholderImage,
-    alt: "Interview article image",
+    alt: "",
   }}
 >
   <p>
diff --git a/src/content/pages/blocks/articles.mdx b/src/content/pages/blocks/articles.mdx
index 3dbcba1a8..2976a825f 100644
--- a/src/content/pages/blocks/articles.mdx
+++ b/src/content/pages/blocks/articles.mdx
@@ -18,7 +18,7 @@ import placeholderImage from "@/assets/placeholder.svg"
     {
       image: {
         src: placeholderImage,
-        alt: "Astro patterns article image",
+        alt: "",
       },
       category: "Guide",
       title: "Astro patterns for editorial homepages",
@@ -34,7 +34,7 @@ import placeholderImage from "@/assets/placeholder.svg"
     {
       image: {
         src: placeholderImage,
-        alt: "Section primitives article image",
+        alt: "",
       },
       category: "Essay",
       title: "Why section primitives scale better than page templates",
@@ -50,7 +50,7 @@ import placeholderImage from "@/assets/placeholder.svg"
     {
       image: {
         src: placeholderImage,
-        alt: "Registry previews article image",
+        alt: "",
       },
       category: "Launch",
       title: "Shipping a registry with real previews",
@@ -80,7 +80,7 @@ import placeholderImage from "@/assets/placeholder.svg"
   featured={{
     image: {
       src: placeholderImage,
-      alt: "Editorial planning workspace",
+      alt: "",
     },
     category: "Strategy",
     title: "Designing a launch page that can keep changing after release day",
@@ -97,7 +97,7 @@ import placeholderImage from "@/assets/placeholder.svg"
     {
       image: {
         src: placeholderImage,
-        alt: "Release narrative outline",
+        alt: "",
       },
       category: "Planning",
       title: "How to turn release notes into a product story",
@@ -113,7 +113,7 @@ import placeholderImage from "@/assets/placeholder.svg"
     {
       image: {
         src: placeholderImage,
-        alt: "Customer quote review",
+        alt: "",
       },
       category: "Research",
       title: "Using customer language without flattening the message",
@@ -129,7 +129,7 @@ import placeholderImage from "@/assets/placeholder.svg"
     {
       image: {
         src: placeholderImage,
-        alt: "Editorial calendar board",
+        alt: "",
       },
       category: "Workflow",
       title: "A weekly editorial rhythm for product teams",
@@ -159,7 +159,7 @@ import placeholderImage from "@/assets/placeholder.svg"
     {
       image: {
         src: placeholderImage,
-        alt: "Release notes story image",
+        alt: "",
       },
       category: "Docs",
       title: "Designing better release notes",
@@ -175,7 +175,7 @@ import placeholderImage from "@/assets/placeholder.svg"
     {
       image: {
         src: placeholderImage,
-        alt: "Launch pages story image",
+        alt: "",
       },
       category: "Launch",
       title: "A content system for launch pages",
@@ -191,7 +191,7 @@ import placeholderImage from "@/assets/placeholder.svg"
     {
       image: {
         src: placeholderImage,
-        alt: "Reusable sections story image",
+        alt: "",
       },
       category: "Guide",
       title: "Working with reusable sections",
@@ -207,7 +207,7 @@ import placeholderImage from "@/assets/placeholder.svg"
     {
       image: {
         src: placeholderImage,
-        alt: "Editorial layouts story image",
+        alt: "",
       },
       category: "Essay",
       title: "The case for wider editorial layouts",

From 934c326ac828c1e9c4f2e23e3d09733d3fb34e90 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 17:37:42 +0200
Subject: [PATCH 41/60] Take currentPath in Sidebar1 and label the desktop
 sidebar

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/blocks/sidebar-1.astro   | 33 +++++++++++++------------
 src/components/create.astro             |  5 +++-
 src/components/ui/sidebar/sidebar.astro |  4 +--
 src/layouts/base.astro                  |  4 ++-
 4 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/components/blocks/sidebar-1.astro b/src/components/blocks/sidebar-1.astro
index cf31168ac..10e1052cd 100644
--- a/src/components/blocks/sidebar-1.astro
+++ b/src/components/blocks/sidebar-1.astro
@@ -1,4 +1,6 @@
 ---
+import type { ImageMetadata } from "astro"
+import type { HTMLAttributes } from "astro/types"
 import ChevronDownIcon from "@lucide/astro/icons/chevron-down"
 import SearchIcon from "@lucide/astro/icons/search"
 
@@ -51,15 +53,14 @@ import {
 } from "@/components/ui/sidebar"
 import { ThemeToggle } from "@/components/ui/theme-toggle"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"div"> & {
+  currentPath: string
   logo: {
     label: string
     href: string
-    src?: any
-    srcLight?: any
-    srcDark?: any
-    alt?: string
+    src?: ImageMetadata
+    srcLight?: ImageMetadata
+    srcDark?: ImageMetadata
   }
   search: {
     label: string
@@ -94,11 +95,12 @@ type Props = {
   githubRepo: string
   githubStars?: number
   labels: {
+    sidebar: string
     github: string
     stars: string
     breadcrumb: string
     breadcrumbMenu: string
-    sidebar: string
+    sidebarToggle: string
     mobileTitle: string
     mobileDescription: string
     theme: string
@@ -110,7 +112,7 @@ type Props = {
 }
 
 const {
-  class: className,
+  currentPath: rawCurrentPath,
   logo,
   search,
   breadcrumb,
@@ -118,6 +120,7 @@ const {
   githubRepo,
   githubStars,
   labels,
+  ...props
 } = Astro.props
 
 const normalizePath = (path: string) => {
@@ -125,7 +128,7 @@ const normalizePath = (path: string) => {
 
   return path.replace(/\/$/, "")
 }
-const currentPath = normalizePath(Astro.url.pathname)
+const currentPath = normalizePath(rawCurrentPath)
 const searchGroups = search.items.reduce<
   { label: string; items: typeof search.items }[]
 >((groups, item) => {
@@ -148,9 +151,9 @@ const githubStarsLabel =
 /* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */
 ---
 
-<SidebarProvider>
+<SidebarProvider {...props}>
   <Sidebar
-    class={cn("", className)}
+    aria-label={labels.sidebar}
     collapsible="offcanvas"
     variant="inset"
     mobileTitle={labels.mobileTitle}
@@ -162,7 +165,7 @@ const githubStarsLabel =
           src={logo.src}
           srcLight={logo.srcLight}
           srcDark={logo.srcDark}
-          alt={logo.alt}
+          alt=""
         />
         <LogoText class="font-semibold">{logo.label}</LogoText>
       </SidebarMenuButton>
@@ -244,7 +247,7 @@ const githubStarsLabel =
     <Header class="h-16">
       <HeaderContainer class="max-w-none justify-between">
         <HeaderGroup>
-          <SidebarTrigger aria-label={labels.sidebar} />
+          <SidebarTrigger aria-label={labels.sidebarToggle} />
           <Separator orientation="vertical" class="my-auto mr-2 h-4" />
           <Breadcrumb aria-label={labels.breadcrumb}>
             <BreadcrumbList>
@@ -337,11 +340,9 @@ const githubStarsLabel =
             href={`https://github.com/${githubRepo}`}
             size="sm"
             variant="ghost"
-            target="_blank"
-            rel="noreferrer"
-            aria-label={labels.github}
           >
             <Icon name="github" />
+            <span class="sr-only">{labels.github}</span>
             <span class="hidden sm:inline">{githubStarsLabel}</span>
           </Button>
           <ThemeToggle aria-label={labels.theme} />
diff --git a/src/components/create.astro b/src/components/create.astro
index 052e9c0d7..ef6b8dc3f 100644
--- a/src/components/create.astro
+++ b/src/components/create.astro
@@ -61,7 +61,10 @@ const command = (template: string) =>
 ---
 
 <div class="grid gap-6 @5xl:grid-cols-[16rem_minmax(0,1fr)]" data-create>
-  <aside class="flex flex-col gap-6 @5xl:sticky @5xl:top-6 @5xl:self-start">
+  <aside
+    aria-label="Preset options"
+    class="flex flex-col gap-6 @5xl:sticky @5xl:top-6 @5xl:self-start"
+  >
     <FieldGroup class="gap-4">
       {controls.map(({ name, label, options }) => (
         <Field>
diff --git a/src/components/ui/sidebar/sidebar.astro b/src/components/ui/sidebar/sidebar.astro
index e9ac87cd4..c1d2e7ddf 100644
--- a/src/components/ui/sidebar/sidebar.astro
+++ b/src/components/ui/sidebar/sidebar.astro
@@ -94,7 +94,7 @@ const desktopCollapsible = desktopState === "collapsed" ? collapsible : ""
             : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
         )}
       />
-      <div
+      <aside
         data-slot="sidebar-container"
         data-side={side}
         class={cn(
@@ -113,7 +113,7 @@ const desktopCollapsible = desktopState === "collapsed" ? collapsible : ""
         >
           <slot />
         </div>
-      </div>
+      </aside>
     </div>
   </>
 )}
diff --git a/src/layouts/base.astro b/src/layouts/base.astro
index 9bf7bfe71..b67a8da87 100644
--- a/src/layouts/base.astro
+++ b/src/layouts/base.astro
@@ -56,6 +56,7 @@ try {
   </LayoutHead>
   <LayoutBody>
     <Sidebar1
+      currentPath={Astro.url.pathname}
       logo={global.logo}
       search={{
         items: searchItems,
@@ -69,11 +70,12 @@ try {
       githubRepo={global.header.githubRepo}
       githubStars={githubStars}
       labels={{
+        sidebar: "Documentation",
         github: `View ${global.header.githubRepo} on GitHub`,
         stars: "Stars",
         breadcrumb: "Breadcrumb",
         breadcrumbMenu: "Toggle menu",
-        sidebar: "Toggle Sidebar",
+        sidebarToggle: "Toggle Sidebar",
         mobileTitle: "Sidebar",
         mobileDescription: "Displays the mobile sidebar.",
         theme: "Toggle theme",

From 6548d076be7009c4a20a37cc3c400c863f055e02 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 17:37:51 +0200
Subject: [PATCH 42/60] Write out Content, FAQ, Links and docs block layouts
 and size content images

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/blocks/blocks-1.astro  | 2 +-
 src/components/blocks/content-1.astro | 6 +++---
 src/components/blocks/content-2.astro | 6 +++---
 src/components/blocks/content-3.astro | 2 +-
 src/components/blocks/content-4.astro | 6 +++---
 src/components/blocks/doc-1.astro     | 2 +-
 src/components/blocks/faqs-1.astro    | 2 +-
 src/components/blocks/faqs-3.astro    | 2 +-
 src/components/blocks/faqs-4.astro    | 2 +-
 src/components/blocks/links-2.astro   | 2 +-
 10 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/blocks/blocks-1.astro b/src/components/blocks/blocks-1.astro
index 87c2bdfd3..2fe0e8c39 100644
--- a/src/components/blocks/blocks-1.astro
+++ b/src/components/blocks/blocks-1.astro
@@ -96,7 +96,7 @@ const openLinks = markdownUrl
 
 <SectionContainer
   data-slot="blocks-page"
-  class={cn("gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12", className)}
+  class={cn("flex flex-col gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12", className)}
   {...props}
 >
   <div class="mx-auto flex w-full max-w-[84rem] flex-col gap-10">
diff --git a/src/components/blocks/content-1.astro b/src/components/blocks/content-1.astro
index 4f4baee26..7cb9b917c 100644
--- a/src/components/blocks/content-1.astro
+++ b/src/components/blocks/content-1.astro
@@ -40,15 +40,15 @@ const {
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="gap-6">
+  <SectionContainer class="flex flex-col gap-6">
     <div class="flex flex-col gap-4">
       <SectionTitle>{title}</SectionTitle>
       <SectionDescription>{description}</SectionDescription>
     </div>
     <ul class="flex flex-col gap-3">
       {features.map((feature) => (
-        <li class="flex items-center gap-3 text-sm">
-          <CheckIcon class="text-primary size-4 shrink-0" />
+        <li class="flex items-start gap-3 text-sm">
+          <CheckIcon class="text-primary mt-0.5 size-4 shrink-0" />
           {feature}
         </li>
       ))}
diff --git a/src/components/blocks/content-2.astro b/src/components/blocks/content-2.astro
index a0ef8294b..c352926a5 100644
--- a/src/components/blocks/content-2.astro
+++ b/src/components/blocks/content-2.astro
@@ -48,8 +48,8 @@ const {
       </div>
       <ul class="flex flex-col gap-3">
         {features.map((feature) => (
-          <li class="flex items-center gap-3 text-sm">
-            <CheckIcon class="text-primary size-4 shrink-0" />
+          <li class="flex items-start gap-3 text-sm">
+            <CheckIcon class="text-primary mt-0.5 size-4 shrink-0" />
             {feature}
           </li>
         ))}
@@ -72,7 +72,7 @@ const {
       alt={image.alt}
       class="aspect-[4/3] w-full rounded-xl border object-cover"
       widths={[640, 960, 1280]}
-      sizes="(min-width: 1024px) 50vw, 100vw"
+      sizes="(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw"
     />
   </SectionContainer>
 </Section>
diff --git a/src/components/blocks/content-3.astro b/src/components/blocks/content-3.astro
index e16eacd88..0c20fe1b5 100644
--- a/src/components/blocks/content-3.astro
+++ b/src/components/blocks/content-3.astro
@@ -37,7 +37,7 @@ const {
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="gap-8">
+  <SectionContainer class="flex flex-col gap-8">
     <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
       <div class="max-w-2xl">
         <SectionTitle>{title}</SectionTitle>
diff --git a/src/components/blocks/content-4.astro b/src/components/blocks/content-4.astro
index 651175fde..ce2998e7c 100644
--- a/src/components/blocks/content-4.astro
+++ b/src/components/blocks/content-4.astro
@@ -49,8 +49,8 @@ const {
         </div>
         <ul class="flex flex-col gap-3">
           {features.map((feature) => (
-            <li class="flex items-center gap-3 text-sm">
-              <CheckIcon class="text-primary size-4 shrink-0" />
+            <li class="flex items-start gap-3 text-sm">
+              <CheckIcon class="text-primary mt-0.5 size-4 shrink-0" />
               {feature}
             </li>
           ))}
@@ -73,7 +73,7 @@ const {
         alt={image.alt}
         class="aspect-[4/3] w-full rounded-xl border object-cover"
         widths={[640, 960, 1280]}
-        sizes="(min-width: 1024px) 66vw, 100vw"
+        sizes="(min-width: 80rem) 800px, (min-width: 64rem) 66vw, 100vw"
       />
     </div>
   </SectionContainer>
diff --git a/src/components/blocks/doc-1.astro b/src/components/blocks/doc-1.astro
index cbf497d55..85eed8280 100644
--- a/src/components/blocks/doc-1.astro
+++ b/src/components/blocks/doc-1.astro
@@ -125,7 +125,7 @@ const openLinks = markdownUrl
 
 <SectionContainer
   class={cn(
-    "gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16",
+    "flex flex-col gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16",
     className
   )}
   {...props}
diff --git a/src/components/blocks/faqs-1.astro b/src/components/blocks/faqs-1.astro
index 5e8c0a435..d18a59795 100644
--- a/src/components/blocks/faqs-1.astro
+++ b/src/components/blocks/faqs-1.astro
@@ -43,7 +43,7 @@ const {
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="items-center text-center">
+  <SectionContainer class="flex flex-col gap-8 items-center text-center">
     <div class="flex max-w-2xl flex-col items-center gap-5">
       <SectionTitle>{title}</SectionTitle>
       <SectionDescription>{description}</SectionDescription>
diff --git a/src/components/blocks/faqs-3.astro b/src/components/blocks/faqs-3.astro
index 1090d5d29..e3997fbb3 100644
--- a/src/components/blocks/faqs-3.astro
+++ b/src/components/blocks/faqs-3.astro
@@ -37,7 +37,7 @@ const {
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="items-center text-center">
+  <SectionContainer class="flex flex-col gap-8 items-center text-center">
     <div class="flex max-w-2xl flex-col items-center gap-5">
       <Badge variant="secondary">{badge}</Badge>
       <SectionTitle>{title}</SectionTitle>
diff --git a/src/components/blocks/faqs-4.astro b/src/components/blocks/faqs-4.astro
index 890b717b0..53d67edb1 100644
--- a/src/components/blocks/faqs-4.astro
+++ b/src/components/blocks/faqs-4.astro
@@ -27,7 +27,7 @@ const { class: className, title, faqs, ...props } = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="items-center">
+  <SectionContainer class="flex flex-col gap-8 items-center">
     <div class="mx-auto w-full max-w-3xl">
       <SectionTitle>{title}</SectionTitle>
       <div class="mt-10">
diff --git a/src/components/blocks/links-2.astro b/src/components/blocks/links-2.astro
index 71633b050..67132e358 100644
--- a/src/components/blocks/links-2.astro
+++ b/src/components/blocks/links-2.astro
@@ -19,7 +19,7 @@ const { class: className, title, description, links, ...props } = Astro.props
 ---
 
 <Section class={cn("", className)} {...props}>
-  <SectionContainer class="gap-10">
+  <SectionContainer class="flex flex-col gap-10">
     <div class="flex min-w-0 flex-col gap-4 border-b pb-8">
       <h2 class="text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
         {title}

From bbab40db12be11a78f6a50277bdbf0f6937b2aea Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 17:37:51 +0200
Subject: [PATCH 43/60] Make SectionContainer a neutral width container

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ui/section/section-container.astro |  2 +-
 src/content/pages/components/section.mdx          | 10 ++++++----
 src/layouts/overview.astro                        |  2 +-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/section/section-container.astro b/src/components/ui/section/section-container.astro
index 4d2745b79..ff5466c1a 100644
--- a/src/components/ui/section/section-container.astro
+++ b/src/components/ui/section/section-container.astro
@@ -15,7 +15,7 @@ const {
 <div
   data-slot={dataSlot}
   class={cn(
-    "relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] flex-col gap-8 px-[var(--gutter,--spacing(4))]",
+    "relative mx-auto w-full max-w-[var(--container,var(--container-7xl))] px-[var(--gutter,--spacing(4))]",
     className
   )}
   {...props}
diff --git a/src/content/pages/components/section.mdx b/src/content/pages/components/section.mdx
index 0d9bb921e..a76398cf0 100644
--- a/src/content/pages/components/section.mdx
+++ b/src/content/pages/components/section.mdx
@@ -23,7 +23,7 @@ import {
 ---
 
 <Section id="services">
-  <SectionContainer>
+  <SectionContainer class="flex flex-col gap-4">
     <SectionTitle>Services</SectionTitle>
     <SectionDescription>How we can help.</SectionDescription>
   </SectionContainer>
@@ -39,7 +39,7 @@ import { Section, SectionContainer } from "@/components/ui/section"
 ---
 
 <Section>
-  <SectionContainer class="gap-6">
+  <SectionContainer class="flex flex-col gap-6">
     <div class="flex max-w-2xl flex-col gap-3">
       <p class="text-primary text-sm font-medium">Launch checklist</p>
       <h2 class="text-3xl font-semibold tracking-tight">
@@ -83,7 +83,7 @@ import { Section, SectionContainer } from "@/components/ui/section"
 
 ```astro
 <Section>
-  <SectionContainer>
+  <SectionContainer class="flex flex-col gap-4">
     <h2 class="text-2xl font-semibold">Release notes</h2>
     <p>Use the container for the section content you want aligned.</p>
   </SectionContainer>
@@ -98,7 +98,7 @@ import { Section, SectionContainer } from "@/components/ui/section"
 ---
 
 <Section variant="floating">
-  <SectionContainer class="gap-6">
+  <SectionContainer class="flex flex-col gap-6">
     <div class="flex max-w-2xl flex-col gap-3">
       <p class="text-primary text-sm font-medium">Customer story</p>
       <h2 class="text-3xl font-semibold tracking-tight">
@@ -121,6 +121,8 @@ import { Section, SectionContainer } from "@/components/ui/section"
 
 - `Section` controls spacing and surface treatment.
 - `SectionContainer` keeps the inner width and horizontal padding consistent.
+  It sets no layout of its own: add the flex or grid classes and gap your
+  content needs, such as `class="flex flex-col gap-8"`.
 - Use `class` on `Section` when a specific page needs custom vertical spacing.
 
 ## Site-wide width, gutter, and spacing
diff --git a/src/layouts/overview.astro b/src/layouts/overview.astro
index 77e38169f..4fdeed3b9 100644
--- a/src/layouts/overview.astro
+++ b/src/layouts/overview.astro
@@ -51,7 +51,7 @@ const overviewLinks = entries.map((entry) => ({
 ---
 
 <Base global={global} page={page}>
-  <SectionContainer class="gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12">
+  <SectionContainer class="flex flex-col gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12">
     <div class="mx-auto flex w-full max-w-[84rem] flex-col gap-10">
       <header class="flex min-w-0 flex-col gap-4 border-b pb-8">
         <TypographyH1 class="text-foreground text-left text-3xl tracking-tight sm:text-4xl">

From f00ce80d1712d82d4fe64ba352052eaad945b0c3 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 17:37:51 +0200
Subject: [PATCH 44/60] Match registry items to the marquee parts and block
 imports, and update the changeset

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/block-props-simplification.md | 12 +++++++-
 registry.json                            | 37 ++++++++++++------------
 2 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/.changeset/block-props-simplification.md b/.changeset/block-props-simplification.md
index 1e5168067..1ee6247d8 100644
--- a/.changeset/block-props-simplification.md
+++ b/.changeset/block-props-simplification.md
@@ -2,4 +2,14 @@
 "fulldev-ui": minor
 ---
 
-Simplify block props (breaking). Blocks drop unused fields and button variants: button styles are now fixed in each block. User-facing copy such as screen reader labels, close labels and rating labels is passed in by the caller. Banner1 takes an optional `storageKey` for dismissal instead of a shared hardcoded key. `BannerContainer` gains an optional `closeLabel` and `Sidebar` gains optional `mobileTitle` and `mobileDescription`.
+Simplify block props and improve block semantics (breaking).
+
+- Blocks drop unused fields and button variants: button styles are fixed in each block. User-facing copy such as screen reader labels, close labels and rating labels is passed in by the caller. Banner1 takes an optional `storageKey` for dismissal instead of a shared hardcoded key. `BannerContainer` gains an optional `closeLabel` and `Sidebar` gains optional `mobileTitle` and `mobileDescription`.
+- `SectionContainer` only sets width, gutter and position. It no longer adds `flex flex-col gap-8`; add the layout classes your content needs, such as `class="flex flex-col gap-8"`.
+- Marquee renders its items once and moves them with Embla and its Auto Scroll plugin. Compose it from `Marquee`, `MarqueeContent` (`reverse` replaces `direction`), `MarqueeItem` and `MarqueeToggle` (`playLabel`, `pauseLabel`). It stays static without a toggle, with reduced motion, or when the items do not fill the row. The `duration`, `gap`, `infinite` and `pauseOnHover` props are removed; set `--marquee-gap` for spacing. Logos2, Reviews4 and Reviews5 take `labels: { play, pause }`.
+- `PriceValue` takes `discountLabel` for the savings badge, keeps a `0` price or compare-at price, and only shows a compare-at price above the price. Pricing1-3, Product1 and Products1-5 take `locale` and `discountLabel`, and every price is `{ value, compareAt?, currency, unit }`. Pricing2 emphasizes plans with `featured` instead of the first plan.
+- Header1-5 render their `buttons` in the mobile menu too and no longer have a default or `mobile` slot. Buttons always show their label and open in the same tab unless they set `target: "_blank"`. The logo takes typed images without `alt`, and Header4 and Header5 menu images are decorative.
+- Features1 and Features4 take `link?: { label, href }` instead of `href` and `linkText`. Services4 and Services5 take a `link` per service instead of `linkLabel`.
+- Contact1-3 render your form from their default slot instead of building one from `form` props. Contact items link their visible text.
+- Sidebar1 takes `currentPath` and native attributes for its root, and `labels.sidebar` names the sidebar while `labels.sidebarToggle` names its trigger.
+- Hero1's badge is optional. Background images in Hero3, Hero4, Hero9-11 and CTA4 are decorative and take no `alt`; social proof avatars no longer take `name`.
diff --git a/registry.json b/registry.json
index 0c5af4ea0..2b35c015d 100644
--- a/registry.json
+++ b/registry.json
@@ -980,11 +980,29 @@
           "path": "src/components/ui/marquee/marquee.astro",
           "type": "registry:ui"
         },
+        {
+          "path": "src/components/ui/marquee/marquee-content.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/marquee/marquee-item.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/marquee/marquee-toggle.astro",
+          "type": "registry:ui"
+        },
         {
           "path": "src/components/ui/marquee/index.ts",
           "type": "registry:ui"
         }
-      ]
+      ],
+      "dependencies": [
+        "embla-carousel@8.6.0",
+        "embla-carousel-auto-scroll@8.6.0",
+        "@lucide/astro"
+      ],
+      "registryDependencies": ["@fulldev/button"]
     },
     {
       "name": "theme-toggle",
@@ -2445,14 +2463,9 @@
       "description": "Contact sections for project inquiries, support, and sales conversations.",
       "categories": ["contact"],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": ["@lucide/astro"],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -2469,14 +2482,9 @@
       "description": "Contact sections for project inquiries, support, and sales conversations.",
       "categories": ["contact"],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": ["@lucide/astro"],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -2493,14 +2501,9 @@
       "description": "Contact sections for project inquiries, support, and sales conversations.",
       "categories": ["contact"],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": ["@lucide/astro"],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -2890,7 +2893,6 @@
       "description": "Feature section layouts for product narratives, launch pages, and capability overviews.",
       "categories": ["features"],
       "docs": "https://ui.full.dev/blocks/features/",
-      "dependencies": ["@lucide/astro"],
       "registryDependencies": ["@fulldev/icon", "@fulldev/section"],
       "files": [
         {
@@ -2941,7 +2943,6 @@
       "description": "Feature section layouts for product narratives, launch pages, and capability overviews.",
       "categories": ["features"],
       "docs": "https://ui.full.dev/blocks/features/",
-      "dependencies": ["@lucide/astro"],
       "registryDependencies": ["@fulldev/icon", "@fulldev/section"],
       "files": [
         {

From 7e0ab515ba0fa886db0e5fab0c0db5eca0acf264 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 17:38:12 +0200
Subject: [PATCH 45/60] Render nothing for empty Features1 buttons and CTA5
 lists

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/blocks/cta-5.astro      | 44 ++++++++++++++------------
 src/components/blocks/features-1.astro | 24 +++++++-------
 2 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/src/components/blocks/cta-5.astro b/src/components/blocks/cta-5.astro
index 2e0f46647..69ebf9ddd 100644
--- a/src/components/blocks/cta-5.astro
+++ b/src/components/blocks/cta-5.astro
@@ -47,26 +47,30 @@ const {
           {description}
         </p>
       </div>
-      <ul class="flex flex-col gap-3">
-        {features.map((feature) => (
-          <li class="flex items-start gap-3 text-sm">
-            <CheckIcon class="text-primary mt-0.5 size-4 shrink-0" />
-            {feature}
-          </li>
-        ))}
-      </ul>
-      <div class="flex flex-wrap gap-3">
-        {buttons.map(({ href, label }, index) => (
-          <Button
-            as="a"
-            href={href}
-            size="lg"
-            variant={index === 0 ? "default" : "outline"}
-          >
-            {label}
-          </Button>
-        ))}
-      </div>
+      {features.length > 0 && (
+        <ul class="flex flex-col gap-3">
+          {features.map((feature) => (
+            <li class="flex items-start gap-3 text-sm">
+              <CheckIcon class="text-primary mt-0.5 size-4 shrink-0" />
+              {feature}
+            </li>
+          ))}
+        </ul>
+      )}
+      {buttons.length > 0 && (
+        <div class="flex flex-wrap gap-3">
+          {buttons.map(({ href, label }, index) => (
+            <Button
+              as="a"
+              href={href}
+              size="lg"
+              variant={index === 0 ? "default" : "outline"}
+            >
+              {label}
+            </Button>
+          ))}
+        </div>
+      )}
     </div>
     <Image
       src={image.src}
diff --git a/src/components/blocks/features-1.astro b/src/components/blocks/features-1.astro
index f342b6b45..cf001aa5d 100644
--- a/src/components/blocks/features-1.astro
+++ b/src/components/blocks/features-1.astro
@@ -46,17 +46,19 @@ const {
       <SectionTitle>{title}</SectionTitle>
       <SectionDescription class="max-w-2xl">{description}</SectionDescription>
     </div>
-    <div class="flex flex-wrap justify-center gap-3">
-      {buttons.map(({ href, label }, index) => (
-        <Button
-          as="a"
-          href={href}
-          variant={index === 0 ? "default" : "outline"}
-        >
-          {label}
-        </Button>
-      ))}
-    </div>
+    {buttons.length > 0 && (
+      <div class="flex flex-wrap justify-center gap-3">
+        {buttons.map(({ href, label }, index) => (
+          <Button
+            as="a"
+            href={href}
+            variant={index === 0 ? "default" : "outline"}
+          >
+            {label}
+          </Button>
+        ))}
+      </div>
+    )}
   </SectionContainer>
   <SectionContainer>
     <ul class="grid gap-6 sm:grid-cols-2">

From 81be7bb8f8cbd0fae1212a99d47f0b933a83b8d9 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 17:38:34 +0200
Subject: [PATCH 46/60] Regenerate registry for the blocks quality pass

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 public/r/article-1.json                   |  2 +-
 public/r/article-2.json                   |  2 +-
 public/r/articles-1.json                  |  2 +-
 public/r/articles-2.json                  |  2 +-
 public/r/articles-3.json                  |  2 +-
 public/r/articles-4.json                  |  2 +-
 public/r/blocks-1.json                    |  2 +-
 public/r/carousel.json                    | 10 ++---
 public/r/contact-1.json                   |  9 +----
 public/r/contact-2.json                   |  9 +----
 public/r/contact-3.json                   |  9 +----
 public/r/content-1.json                   |  2 +-
 public/r/content-2.json                   |  2 +-
 public/r/content-3.json                   |  2 +-
 public/r/content-4.json                   |  2 +-
 public/r/cta-1.json                       |  2 +-
 public/r/cta-2.json                       |  2 +-
 public/r/cta-3.json                       |  2 +-
 public/r/cta-4.json                       |  2 +-
 public/r/cta-5.json                       |  2 +-
 public/r/cta-6.json                       |  2 +-
 public/r/cta-7.json                       |  2 +-
 public/r/cta-8.json                       |  2 +-
 public/r/doc-1.json                       |  2 +-
 public/r/faqs-1.json                      |  2 +-
 public/r/faqs-3.json                      |  2 +-
 public/r/faqs-4.json                      |  2 +-
 public/r/features-1.json                  |  2 +-
 public/r/features-2.json                  |  5 +--
 public/r/features-3.json                  |  2 +-
 public/r/features-4.json                  |  2 +-
 public/r/features-5.json                  |  5 +--
 public/r/features-6.json                  |  2 +-
 public/r/footer-1.json                    |  2 +-
 public/r/footer-2.json                    |  2 +-
 public/r/footer-3.json                    |  2 +-
 public/r/header-1.json                    |  2 +-
 public/r/header-2.json                    |  2 +-
 public/r/header-3.json                    |  2 +-
 public/r/header-4.json                    |  2 +-
 public/r/header-5.json                    |  2 +-
 public/r/header.json                      |  2 +-
 public/r/hero-1.json                      |  2 +-
 public/r/hero-10.json                     |  2 +-
 public/r/hero-11.json                     |  2 +-
 public/r/hero-12.json                     |  2 +-
 public/r/hero-13.json                     |  2 +-
 public/r/hero-2.json                      |  2 +-
 public/r/hero-3.json                      |  2 +-
 public/r/hero-4.json                      |  2 +-
 public/r/hero-5.json                      |  2 +-
 public/r/hero-6.json                      |  2 +-
 public/r/hero-7.json                      |  2 +-
 public/r/hero-8.json                      |  2 +-
 public/r/hero-9.json                      |  2 +-
 public/r/links-2.json                     |  2 +-
 public/r/logos-1.json                     |  2 +-
 public/r/logos-2.json                     |  2 +-
 public/r/logos-3.json                     |  2 +-
 public/r/marquee.json                     | 29 ++++++++++++--
 public/r/price.json                       |  2 +-
 public/r/pricing-1.json                   |  2 +-
 public/r/pricing-2.json                   |  2 +-
 public/r/pricing-3.json                   |  2 +-
 public/r/product-1.json                   |  2 +-
 public/r/products-1.json                  |  2 +-
 public/r/products-2.json                  |  2 +-
 public/r/products-3.json                  |  2 +-
 public/r/products-4.json                  |  2 +-
 public/r/products-5.json                  |  2 +-
 public/r/registry.json                    | 49 ++++++++++-------------
 public/r/reviews-1.json                   |  2 +-
 public/r/reviews-2.json                   |  2 +-
 public/r/reviews-3.json                   |  2 +-
 public/r/reviews-4.json                   |  2 +-
 public/r/reviews-5.json                   |  2 +-
 public/r/section.json                     |  4 +-
 public/r/services-1.json                  |  2 +-
 public/r/services-2.json                  |  2 +-
 public/r/services-3.json                  |  2 +-
 public/r/services-4.json                  |  2 +-
 public/r/services-5.json                  |  2 +-
 public/r/services-6.json                  |  2 +-
 public/r/services-7.json                  |  2 +-
 public/r/sidebar-1.json                   |  2 +-
 public/r/sidebar.json                     |  4 +-
 public/r/styles/base-luma/article-1.json  |  2 +-
 public/r/styles/base-luma/article-2.json  |  2 +-
 public/r/styles/base-luma/articles-1.json |  2 +-
 public/r/styles/base-luma/articles-2.json |  2 +-
 public/r/styles/base-luma/articles-3.json |  2 +-
 public/r/styles/base-luma/articles-4.json |  2 +-
 public/r/styles/base-luma/blocks-1.json   |  2 +-
 public/r/styles/base-luma/carousel.json   | 10 ++---
 public/r/styles/base-luma/contact-1.json  |  9 +----
 public/r/styles/base-luma/contact-2.json  |  9 +----
 public/r/styles/base-luma/contact-3.json  |  9 +----
 public/r/styles/base-luma/content-1.json  |  2 +-
 public/r/styles/base-luma/content-2.json  |  2 +-
 public/r/styles/base-luma/content-3.json  |  2 +-
 public/r/styles/base-luma/content-4.json  |  2 +-
 public/r/styles/base-luma/cta-1.json      |  2 +-
 public/r/styles/base-luma/cta-2.json      |  2 +-
 public/r/styles/base-luma/cta-3.json      |  2 +-
 public/r/styles/base-luma/cta-4.json      |  2 +-
 public/r/styles/base-luma/cta-5.json      |  2 +-
 public/r/styles/base-luma/cta-6.json      |  2 +-
 public/r/styles/base-luma/cta-7.json      |  2 +-
 public/r/styles/base-luma/cta-8.json      |  2 +-
 public/r/styles/base-luma/doc-1.json      |  2 +-
 public/r/styles/base-luma/faqs-1.json     |  2 +-
 public/r/styles/base-luma/faqs-3.json     |  2 +-
 public/r/styles/base-luma/faqs-4.json     |  2 +-
 public/r/styles/base-luma/features-1.json |  2 +-
 public/r/styles/base-luma/features-2.json |  5 +--
 public/r/styles/base-luma/features-3.json |  2 +-
 public/r/styles/base-luma/features-4.json |  2 +-
 public/r/styles/base-luma/features-5.json |  5 +--
 public/r/styles/base-luma/features-6.json |  2 +-
 public/r/styles/base-luma/footer-1.json   |  2 +-
 public/r/styles/base-luma/footer-2.json   |  2 +-
 public/r/styles/base-luma/footer-3.json   |  2 +-
 public/r/styles/base-luma/header-1.json   |  2 +-
 public/r/styles/base-luma/header-2.json   |  2 +-
 public/r/styles/base-luma/header-3.json   |  2 +-
 public/r/styles/base-luma/header-4.json   |  2 +-
 public/r/styles/base-luma/header-5.json   |  2 +-
 public/r/styles/base-luma/header.json     |  2 +-
 public/r/styles/base-luma/hero-1.json     |  2 +-
 public/r/styles/base-luma/hero-10.json    |  2 +-
 public/r/styles/base-luma/hero-11.json    |  2 +-
 public/r/styles/base-luma/hero-12.json    |  2 +-
 public/r/styles/base-luma/hero-13.json    |  2 +-
 public/r/styles/base-luma/hero-2.json     |  2 +-
 public/r/styles/base-luma/hero-3.json     |  2 +-
 public/r/styles/base-luma/hero-4.json     |  2 +-
 public/r/styles/base-luma/hero-5.json     |  2 +-
 public/r/styles/base-luma/hero-6.json     |  2 +-
 public/r/styles/base-luma/hero-7.json     |  2 +-
 public/r/styles/base-luma/hero-8.json     |  2 +-
 public/r/styles/base-luma/hero-9.json     |  2 +-
 public/r/styles/base-luma/links-2.json    |  2 +-
 public/r/styles/base-luma/logos-1.json    |  2 +-
 public/r/styles/base-luma/logos-2.json    |  2 +-
 public/r/styles/base-luma/logos-3.json    |  2 +-
 public/r/styles/base-luma/marquee.json    | 29 ++++++++++++--
 public/r/styles/base-luma/price.json      |  2 +-
 public/r/styles/base-luma/pricing-1.json  |  2 +-
 public/r/styles/base-luma/pricing-2.json  |  2 +-
 public/r/styles/base-luma/pricing-3.json  |  2 +-
 public/r/styles/base-luma/product-1.json  |  2 +-
 public/r/styles/base-luma/products-1.json |  2 +-
 public/r/styles/base-luma/products-2.json |  2 +-
 public/r/styles/base-luma/products-3.json |  2 +-
 public/r/styles/base-luma/products-4.json |  2 +-
 public/r/styles/base-luma/products-5.json |  2 +-
 public/r/styles/base-luma/registry.json   | 49 ++++++++++-------------
 public/r/styles/base-luma/reviews-1.json  |  2 +-
 public/r/styles/base-luma/reviews-2.json  |  2 +-
 public/r/styles/base-luma/reviews-3.json  |  2 +-
 public/r/styles/base-luma/reviews-4.json  |  2 +-
 public/r/styles/base-luma/reviews-5.json  |  2 +-
 public/r/styles/base-luma/section.json    |  4 +-
 public/r/styles/base-luma/services-1.json |  2 +-
 public/r/styles/base-luma/services-2.json |  2 +-
 public/r/styles/base-luma/services-3.json |  2 +-
 public/r/styles/base-luma/services-4.json |  2 +-
 public/r/styles/base-luma/services-5.json |  2 +-
 public/r/styles/base-luma/services-6.json |  2 +-
 public/r/styles/base-luma/services-7.json |  2 +-
 public/r/styles/base-luma/sidebar-1.json  |  2 +-
 public/r/styles/base-luma/sidebar.json    |  4 +-
 public/r/styles/base-lyra/article-1.json  |  2 +-
 public/r/styles/base-lyra/article-2.json  |  2 +-
 public/r/styles/base-lyra/articles-1.json |  2 +-
 public/r/styles/base-lyra/articles-2.json |  2 +-
 public/r/styles/base-lyra/articles-3.json |  2 +-
 public/r/styles/base-lyra/articles-4.json |  2 +-
 public/r/styles/base-lyra/blocks-1.json   |  2 +-
 public/r/styles/base-lyra/carousel.json   | 10 ++---
 public/r/styles/base-lyra/contact-1.json  |  9 +----
 public/r/styles/base-lyra/contact-2.json  |  9 +----
 public/r/styles/base-lyra/contact-3.json  |  9 +----
 public/r/styles/base-lyra/content-1.json  |  2 +-
 public/r/styles/base-lyra/content-2.json  |  2 +-
 public/r/styles/base-lyra/content-3.json  |  2 +-
 public/r/styles/base-lyra/content-4.json  |  2 +-
 public/r/styles/base-lyra/cta-1.json      |  2 +-
 public/r/styles/base-lyra/cta-2.json      |  2 +-
 public/r/styles/base-lyra/cta-3.json      |  2 +-
 public/r/styles/base-lyra/cta-4.json      |  2 +-
 public/r/styles/base-lyra/cta-5.json      |  2 +-
 public/r/styles/base-lyra/cta-6.json      |  2 +-
 public/r/styles/base-lyra/cta-7.json      |  2 +-
 public/r/styles/base-lyra/cta-8.json      |  2 +-
 public/r/styles/base-lyra/doc-1.json      |  2 +-
 public/r/styles/base-lyra/faqs-1.json     |  2 +-
 public/r/styles/base-lyra/faqs-3.json     |  2 +-
 public/r/styles/base-lyra/faqs-4.json     |  2 +-
 public/r/styles/base-lyra/features-1.json |  2 +-
 public/r/styles/base-lyra/features-2.json |  5 +--
 public/r/styles/base-lyra/features-3.json |  2 +-
 public/r/styles/base-lyra/features-4.json |  2 +-
 public/r/styles/base-lyra/features-5.json |  5 +--
 public/r/styles/base-lyra/features-6.json |  2 +-
 public/r/styles/base-lyra/footer-1.json   |  2 +-
 public/r/styles/base-lyra/footer-2.json   |  2 +-
 public/r/styles/base-lyra/footer-3.json   |  2 +-
 public/r/styles/base-lyra/header-1.json   |  2 +-
 public/r/styles/base-lyra/header-2.json   |  2 +-
 public/r/styles/base-lyra/header-3.json   |  2 +-
 public/r/styles/base-lyra/header-4.json   |  2 +-
 public/r/styles/base-lyra/header-5.json   |  2 +-
 public/r/styles/base-lyra/header.json     |  2 +-
 public/r/styles/base-lyra/hero-1.json     |  2 +-
 public/r/styles/base-lyra/hero-10.json    |  2 +-
 public/r/styles/base-lyra/hero-11.json    |  2 +-
 public/r/styles/base-lyra/hero-12.json    |  2 +-
 public/r/styles/base-lyra/hero-13.json    |  2 +-
 public/r/styles/base-lyra/hero-2.json     |  2 +-
 public/r/styles/base-lyra/hero-3.json     |  2 +-
 public/r/styles/base-lyra/hero-4.json     |  2 +-
 public/r/styles/base-lyra/hero-5.json     |  2 +-
 public/r/styles/base-lyra/hero-6.json     |  2 +-
 public/r/styles/base-lyra/hero-7.json     |  2 +-
 public/r/styles/base-lyra/hero-8.json     |  2 +-
 public/r/styles/base-lyra/hero-9.json     |  2 +-
 public/r/styles/base-lyra/links-2.json    |  2 +-
 public/r/styles/base-lyra/logos-1.json    |  2 +-
 public/r/styles/base-lyra/logos-2.json    |  2 +-
 public/r/styles/base-lyra/logos-3.json    |  2 +-
 public/r/styles/base-lyra/marquee.json    | 29 ++++++++++++--
 public/r/styles/base-lyra/price.json      |  2 +-
 public/r/styles/base-lyra/pricing-1.json  |  2 +-
 public/r/styles/base-lyra/pricing-2.json  |  2 +-
 public/r/styles/base-lyra/pricing-3.json  |  2 +-
 public/r/styles/base-lyra/product-1.json  |  2 +-
 public/r/styles/base-lyra/products-1.json |  2 +-
 public/r/styles/base-lyra/products-2.json |  2 +-
 public/r/styles/base-lyra/products-3.json |  2 +-
 public/r/styles/base-lyra/products-4.json |  2 +-
 public/r/styles/base-lyra/products-5.json |  2 +-
 public/r/styles/base-lyra/registry.json   | 49 ++++++++++-------------
 public/r/styles/base-lyra/reviews-1.json  |  2 +-
 public/r/styles/base-lyra/reviews-2.json  |  2 +-
 public/r/styles/base-lyra/reviews-3.json  |  2 +-
 public/r/styles/base-lyra/reviews-4.json  |  2 +-
 public/r/styles/base-lyra/reviews-5.json  |  2 +-
 public/r/styles/base-lyra/section.json    |  4 +-
 public/r/styles/base-lyra/services-1.json |  2 +-
 public/r/styles/base-lyra/services-2.json |  2 +-
 public/r/styles/base-lyra/services-3.json |  2 +-
 public/r/styles/base-lyra/services-4.json |  2 +-
 public/r/styles/base-lyra/services-5.json |  2 +-
 public/r/styles/base-lyra/services-6.json |  2 +-
 public/r/styles/base-lyra/services-7.json |  2 +-
 public/r/styles/base-lyra/sidebar-1.json  |  2 +-
 public/r/styles/base-lyra/sidebar.json    |  4 +-
 public/r/styles/base-maia/article-1.json  |  2 +-
 public/r/styles/base-maia/article-2.json  |  2 +-
 public/r/styles/base-maia/articles-1.json |  2 +-
 public/r/styles/base-maia/articles-2.json |  2 +-
 public/r/styles/base-maia/articles-3.json |  2 +-
 public/r/styles/base-maia/articles-4.json |  2 +-
 public/r/styles/base-maia/blocks-1.json   |  2 +-
 public/r/styles/base-maia/carousel.json   | 10 ++---
 public/r/styles/base-maia/contact-1.json  |  9 +----
 public/r/styles/base-maia/contact-2.json  |  9 +----
 public/r/styles/base-maia/contact-3.json  |  9 +----
 public/r/styles/base-maia/content-1.json  |  2 +-
 public/r/styles/base-maia/content-2.json  |  2 +-
 public/r/styles/base-maia/content-3.json  |  2 +-
 public/r/styles/base-maia/content-4.json  |  2 +-
 public/r/styles/base-maia/cta-1.json      |  2 +-
 public/r/styles/base-maia/cta-2.json      |  2 +-
 public/r/styles/base-maia/cta-3.json      |  2 +-
 public/r/styles/base-maia/cta-4.json      |  2 +-
 public/r/styles/base-maia/cta-5.json      |  2 +-
 public/r/styles/base-maia/cta-6.json      |  2 +-
 public/r/styles/base-maia/cta-7.json      |  2 +-
 public/r/styles/base-maia/cta-8.json      |  2 +-
 public/r/styles/base-maia/doc-1.json      |  2 +-
 public/r/styles/base-maia/faqs-1.json     |  2 +-
 public/r/styles/base-maia/faqs-3.json     |  2 +-
 public/r/styles/base-maia/faqs-4.json     |  2 +-
 public/r/styles/base-maia/features-1.json |  2 +-
 public/r/styles/base-maia/features-2.json |  5 +--
 public/r/styles/base-maia/features-3.json |  2 +-
 public/r/styles/base-maia/features-4.json |  2 +-
 public/r/styles/base-maia/features-5.json |  5 +--
 public/r/styles/base-maia/features-6.json |  2 +-
 public/r/styles/base-maia/footer-1.json   |  2 +-
 public/r/styles/base-maia/footer-2.json   |  2 +-
 public/r/styles/base-maia/footer-3.json   |  2 +-
 public/r/styles/base-maia/header-1.json   |  2 +-
 public/r/styles/base-maia/header-2.json   |  2 +-
 public/r/styles/base-maia/header-3.json   |  2 +-
 public/r/styles/base-maia/header-4.json   |  2 +-
 public/r/styles/base-maia/header-5.json   |  2 +-
 public/r/styles/base-maia/header.json     |  2 +-
 public/r/styles/base-maia/hero-1.json     |  2 +-
 public/r/styles/base-maia/hero-10.json    |  2 +-
 public/r/styles/base-maia/hero-11.json    |  2 +-
 public/r/styles/base-maia/hero-12.json    |  2 +-
 public/r/styles/base-maia/hero-13.json    |  2 +-
 public/r/styles/base-maia/hero-2.json     |  2 +-
 public/r/styles/base-maia/hero-3.json     |  2 +-
 public/r/styles/base-maia/hero-4.json     |  2 +-
 public/r/styles/base-maia/hero-5.json     |  2 +-
 public/r/styles/base-maia/hero-6.json     |  2 +-
 public/r/styles/base-maia/hero-7.json     |  2 +-
 public/r/styles/base-maia/hero-8.json     |  2 +-
 public/r/styles/base-maia/hero-9.json     |  2 +-
 public/r/styles/base-maia/links-2.json    |  2 +-
 public/r/styles/base-maia/logos-1.json    |  2 +-
 public/r/styles/base-maia/logos-2.json    |  2 +-
 public/r/styles/base-maia/logos-3.json    |  2 +-
 public/r/styles/base-maia/marquee.json    | 29 ++++++++++++--
 public/r/styles/base-maia/price.json      |  2 +-
 public/r/styles/base-maia/pricing-1.json  |  2 +-
 public/r/styles/base-maia/pricing-2.json  |  2 +-
 public/r/styles/base-maia/pricing-3.json  |  2 +-
 public/r/styles/base-maia/product-1.json  |  2 +-
 public/r/styles/base-maia/products-1.json |  2 +-
 public/r/styles/base-maia/products-2.json |  2 +-
 public/r/styles/base-maia/products-3.json |  2 +-
 public/r/styles/base-maia/products-4.json |  2 +-
 public/r/styles/base-maia/products-5.json |  2 +-
 public/r/styles/base-maia/registry.json   | 49 ++++++++++-------------
 public/r/styles/base-maia/reviews-1.json  |  2 +-
 public/r/styles/base-maia/reviews-2.json  |  2 +-
 public/r/styles/base-maia/reviews-3.json  |  2 +-
 public/r/styles/base-maia/reviews-4.json  |  2 +-
 public/r/styles/base-maia/reviews-5.json  |  2 +-
 public/r/styles/base-maia/section.json    |  4 +-
 public/r/styles/base-maia/services-1.json |  2 +-
 public/r/styles/base-maia/services-2.json |  2 +-
 public/r/styles/base-maia/services-3.json |  2 +-
 public/r/styles/base-maia/services-4.json |  2 +-
 public/r/styles/base-maia/services-5.json |  2 +-
 public/r/styles/base-maia/services-6.json |  2 +-
 public/r/styles/base-maia/services-7.json |  2 +-
 public/r/styles/base-maia/sidebar-1.json  |  2 +-
 public/r/styles/base-maia/sidebar.json    |  4 +-
 public/r/styles/base-mira/article-1.json  |  2 +-
 public/r/styles/base-mira/article-2.json  |  2 +-
 public/r/styles/base-mira/articles-1.json |  2 +-
 public/r/styles/base-mira/articles-2.json |  2 +-
 public/r/styles/base-mira/articles-3.json |  2 +-
 public/r/styles/base-mira/articles-4.json |  2 +-
 public/r/styles/base-mira/blocks-1.json   |  2 +-
 public/r/styles/base-mira/carousel.json   | 10 ++---
 public/r/styles/base-mira/contact-1.json  |  9 +----
 public/r/styles/base-mira/contact-2.json  |  9 +----
 public/r/styles/base-mira/contact-3.json  |  9 +----
 public/r/styles/base-mira/content-1.json  |  2 +-
 public/r/styles/base-mira/content-2.json  |  2 +-
 public/r/styles/base-mira/content-3.json  |  2 +-
 public/r/styles/base-mira/content-4.json  |  2 +-
 public/r/styles/base-mira/cta-1.json      |  2 +-
 public/r/styles/base-mira/cta-2.json      |  2 +-
 public/r/styles/base-mira/cta-3.json      |  2 +-
 public/r/styles/base-mira/cta-4.json      |  2 +-
 public/r/styles/base-mira/cta-5.json      |  2 +-
 public/r/styles/base-mira/cta-6.json      |  2 +-
 public/r/styles/base-mira/cta-7.json      |  2 +-
 public/r/styles/base-mira/cta-8.json      |  2 +-
 public/r/styles/base-mira/doc-1.json      |  2 +-
 public/r/styles/base-mira/faqs-1.json     |  2 +-
 public/r/styles/base-mira/faqs-3.json     |  2 +-
 public/r/styles/base-mira/faqs-4.json     |  2 +-
 public/r/styles/base-mira/features-1.json |  2 +-
 public/r/styles/base-mira/features-2.json |  5 +--
 public/r/styles/base-mira/features-3.json |  2 +-
 public/r/styles/base-mira/features-4.json |  2 +-
 public/r/styles/base-mira/features-5.json |  5 +--
 public/r/styles/base-mira/features-6.json |  2 +-
 public/r/styles/base-mira/footer-1.json   |  2 +-
 public/r/styles/base-mira/footer-2.json   |  2 +-
 public/r/styles/base-mira/footer-3.json   |  2 +-
 public/r/styles/base-mira/header-1.json   |  2 +-
 public/r/styles/base-mira/header-2.json   |  2 +-
 public/r/styles/base-mira/header-3.json   |  2 +-
 public/r/styles/base-mira/header-4.json   |  2 +-
 public/r/styles/base-mira/header-5.json   |  2 +-
 public/r/styles/base-mira/header.json     |  2 +-
 public/r/styles/base-mira/hero-1.json     |  2 +-
 public/r/styles/base-mira/hero-10.json    |  2 +-
 public/r/styles/base-mira/hero-11.json    |  2 +-
 public/r/styles/base-mira/hero-12.json    |  2 +-
 public/r/styles/base-mira/hero-13.json    |  2 +-
 public/r/styles/base-mira/hero-2.json     |  2 +-
 public/r/styles/base-mira/hero-3.json     |  2 +-
 public/r/styles/base-mira/hero-4.json     |  2 +-
 public/r/styles/base-mira/hero-5.json     |  2 +-
 public/r/styles/base-mira/hero-6.json     |  2 +-
 public/r/styles/base-mira/hero-7.json     |  2 +-
 public/r/styles/base-mira/hero-8.json     |  2 +-
 public/r/styles/base-mira/hero-9.json     |  2 +-
 public/r/styles/base-mira/links-2.json    |  2 +-
 public/r/styles/base-mira/logos-1.json    |  2 +-
 public/r/styles/base-mira/logos-2.json    |  2 +-
 public/r/styles/base-mira/logos-3.json    |  2 +-
 public/r/styles/base-mira/marquee.json    | 29 ++++++++++++--
 public/r/styles/base-mira/price.json      |  2 +-
 public/r/styles/base-mira/pricing-1.json  |  2 +-
 public/r/styles/base-mira/pricing-2.json  |  2 +-
 public/r/styles/base-mira/pricing-3.json  |  2 +-
 public/r/styles/base-mira/product-1.json  |  2 +-
 public/r/styles/base-mira/products-1.json |  2 +-
 public/r/styles/base-mira/products-2.json |  2 +-
 public/r/styles/base-mira/products-3.json |  2 +-
 public/r/styles/base-mira/products-4.json |  2 +-
 public/r/styles/base-mira/products-5.json |  2 +-
 public/r/styles/base-mira/registry.json   | 49 ++++++++++-------------
 public/r/styles/base-mira/reviews-1.json  |  2 +-
 public/r/styles/base-mira/reviews-2.json  |  2 +-
 public/r/styles/base-mira/reviews-3.json  |  2 +-
 public/r/styles/base-mira/reviews-4.json  |  2 +-
 public/r/styles/base-mira/reviews-5.json  |  2 +-
 public/r/styles/base-mira/section.json    |  4 +-
 public/r/styles/base-mira/services-1.json |  2 +-
 public/r/styles/base-mira/services-2.json |  2 +-
 public/r/styles/base-mira/services-3.json |  2 +-
 public/r/styles/base-mira/services-4.json |  2 +-
 public/r/styles/base-mira/services-5.json |  2 +-
 public/r/styles/base-mira/services-6.json |  2 +-
 public/r/styles/base-mira/services-7.json |  2 +-
 public/r/styles/base-mira/sidebar-1.json  |  2 +-
 public/r/styles/base-mira/sidebar.json    |  4 +-
 public/r/styles/base-nova/article-1.json  |  2 +-
 public/r/styles/base-nova/article-2.json  |  2 +-
 public/r/styles/base-nova/articles-1.json |  2 +-
 public/r/styles/base-nova/articles-2.json |  2 +-
 public/r/styles/base-nova/articles-3.json |  2 +-
 public/r/styles/base-nova/articles-4.json |  2 +-
 public/r/styles/base-nova/blocks-1.json   |  2 +-
 public/r/styles/base-nova/carousel.json   | 10 ++---
 public/r/styles/base-nova/contact-1.json  |  9 +----
 public/r/styles/base-nova/contact-2.json  |  9 +----
 public/r/styles/base-nova/contact-3.json  |  9 +----
 public/r/styles/base-nova/content-1.json  |  2 +-
 public/r/styles/base-nova/content-2.json  |  2 +-
 public/r/styles/base-nova/content-3.json  |  2 +-
 public/r/styles/base-nova/content-4.json  |  2 +-
 public/r/styles/base-nova/cta-1.json      |  2 +-
 public/r/styles/base-nova/cta-2.json      |  2 +-
 public/r/styles/base-nova/cta-3.json      |  2 +-
 public/r/styles/base-nova/cta-4.json      |  2 +-
 public/r/styles/base-nova/cta-5.json      |  2 +-
 public/r/styles/base-nova/cta-6.json      |  2 +-
 public/r/styles/base-nova/cta-7.json      |  2 +-
 public/r/styles/base-nova/cta-8.json      |  2 +-
 public/r/styles/base-nova/doc-1.json      |  2 +-
 public/r/styles/base-nova/faqs-1.json     |  2 +-
 public/r/styles/base-nova/faqs-3.json     |  2 +-
 public/r/styles/base-nova/faqs-4.json     |  2 +-
 public/r/styles/base-nova/features-1.json |  2 +-
 public/r/styles/base-nova/features-2.json |  5 +--
 public/r/styles/base-nova/features-3.json |  2 +-
 public/r/styles/base-nova/features-4.json |  2 +-
 public/r/styles/base-nova/features-5.json |  5 +--
 public/r/styles/base-nova/features-6.json |  2 +-
 public/r/styles/base-nova/footer-1.json   |  2 +-
 public/r/styles/base-nova/footer-2.json   |  2 +-
 public/r/styles/base-nova/footer-3.json   |  2 +-
 public/r/styles/base-nova/header-1.json   |  2 +-
 public/r/styles/base-nova/header-2.json   |  2 +-
 public/r/styles/base-nova/header-3.json   |  2 +-
 public/r/styles/base-nova/header-4.json   |  2 +-
 public/r/styles/base-nova/header-5.json   |  2 +-
 public/r/styles/base-nova/header.json     |  2 +-
 public/r/styles/base-nova/hero-1.json     |  2 +-
 public/r/styles/base-nova/hero-10.json    |  2 +-
 public/r/styles/base-nova/hero-11.json    |  2 +-
 public/r/styles/base-nova/hero-12.json    |  2 +-
 public/r/styles/base-nova/hero-13.json    |  2 +-
 public/r/styles/base-nova/hero-2.json     |  2 +-
 public/r/styles/base-nova/hero-3.json     |  2 +-
 public/r/styles/base-nova/hero-4.json     |  2 +-
 public/r/styles/base-nova/hero-5.json     |  2 +-
 public/r/styles/base-nova/hero-6.json     |  2 +-
 public/r/styles/base-nova/hero-7.json     |  2 +-
 public/r/styles/base-nova/hero-8.json     |  2 +-
 public/r/styles/base-nova/hero-9.json     |  2 +-
 public/r/styles/base-nova/links-2.json    |  2 +-
 public/r/styles/base-nova/logos-1.json    |  2 +-
 public/r/styles/base-nova/logos-2.json    |  2 +-
 public/r/styles/base-nova/logos-3.json    |  2 +-
 public/r/styles/base-nova/marquee.json    | 29 ++++++++++++--
 public/r/styles/base-nova/price.json      |  2 +-
 public/r/styles/base-nova/pricing-1.json  |  2 +-
 public/r/styles/base-nova/pricing-2.json  |  2 +-
 public/r/styles/base-nova/pricing-3.json  |  2 +-
 public/r/styles/base-nova/product-1.json  |  2 +-
 public/r/styles/base-nova/products-1.json |  2 +-
 public/r/styles/base-nova/products-2.json |  2 +-
 public/r/styles/base-nova/products-3.json |  2 +-
 public/r/styles/base-nova/products-4.json |  2 +-
 public/r/styles/base-nova/products-5.json |  2 +-
 public/r/styles/base-nova/registry.json   | 49 ++++++++++-------------
 public/r/styles/base-nova/reviews-1.json  |  2 +-
 public/r/styles/base-nova/reviews-2.json  |  2 +-
 public/r/styles/base-nova/reviews-3.json  |  2 +-
 public/r/styles/base-nova/reviews-4.json  |  2 +-
 public/r/styles/base-nova/reviews-5.json  |  2 +-
 public/r/styles/base-nova/section.json    |  4 +-
 public/r/styles/base-nova/services-1.json |  2 +-
 public/r/styles/base-nova/services-2.json |  2 +-
 public/r/styles/base-nova/services-3.json |  2 +-
 public/r/styles/base-nova/services-4.json |  2 +-
 public/r/styles/base-nova/services-5.json |  2 +-
 public/r/styles/base-nova/services-6.json |  2 +-
 public/r/styles/base-nova/services-7.json |  2 +-
 public/r/styles/base-nova/sidebar-1.json  |  2 +-
 public/r/styles/base-nova/sidebar.json    |  4 +-
 public/r/styles/base-rhea/article-1.json  |  2 +-
 public/r/styles/base-rhea/article-2.json  |  2 +-
 public/r/styles/base-rhea/articles-1.json |  2 +-
 public/r/styles/base-rhea/articles-2.json |  2 +-
 public/r/styles/base-rhea/articles-3.json |  2 +-
 public/r/styles/base-rhea/articles-4.json |  2 +-
 public/r/styles/base-rhea/blocks-1.json   |  2 +-
 public/r/styles/base-rhea/carousel.json   | 10 ++---
 public/r/styles/base-rhea/contact-1.json  |  9 +----
 public/r/styles/base-rhea/contact-2.json  |  9 +----
 public/r/styles/base-rhea/contact-3.json  |  9 +----
 public/r/styles/base-rhea/content-1.json  |  2 +-
 public/r/styles/base-rhea/content-2.json  |  2 +-
 public/r/styles/base-rhea/content-3.json  |  2 +-
 public/r/styles/base-rhea/content-4.json  |  2 +-
 public/r/styles/base-rhea/cta-1.json      |  2 +-
 public/r/styles/base-rhea/cta-2.json      |  2 +-
 public/r/styles/base-rhea/cta-3.json      |  2 +-
 public/r/styles/base-rhea/cta-4.json      |  2 +-
 public/r/styles/base-rhea/cta-5.json      |  2 +-
 public/r/styles/base-rhea/cta-6.json      |  2 +-
 public/r/styles/base-rhea/cta-7.json      |  2 +-
 public/r/styles/base-rhea/cta-8.json      |  2 +-
 public/r/styles/base-rhea/doc-1.json      |  2 +-
 public/r/styles/base-rhea/faqs-1.json     |  2 +-
 public/r/styles/base-rhea/faqs-3.json     |  2 +-
 public/r/styles/base-rhea/faqs-4.json     |  2 +-
 public/r/styles/base-rhea/features-1.json |  2 +-
 public/r/styles/base-rhea/features-2.json |  5 +--
 public/r/styles/base-rhea/features-3.json |  2 +-
 public/r/styles/base-rhea/features-4.json |  2 +-
 public/r/styles/base-rhea/features-5.json |  5 +--
 public/r/styles/base-rhea/features-6.json |  2 +-
 public/r/styles/base-rhea/footer-1.json   |  2 +-
 public/r/styles/base-rhea/footer-2.json   |  2 +-
 public/r/styles/base-rhea/footer-3.json   |  2 +-
 public/r/styles/base-rhea/header-1.json   |  2 +-
 public/r/styles/base-rhea/header-2.json   |  2 +-
 public/r/styles/base-rhea/header-3.json   |  2 +-
 public/r/styles/base-rhea/header-4.json   |  2 +-
 public/r/styles/base-rhea/header-5.json   |  2 +-
 public/r/styles/base-rhea/header.json     |  2 +-
 public/r/styles/base-rhea/hero-1.json     |  2 +-
 public/r/styles/base-rhea/hero-10.json    |  2 +-
 public/r/styles/base-rhea/hero-11.json    |  2 +-
 public/r/styles/base-rhea/hero-12.json    |  2 +-
 public/r/styles/base-rhea/hero-13.json    |  2 +-
 public/r/styles/base-rhea/hero-2.json     |  2 +-
 public/r/styles/base-rhea/hero-3.json     |  2 +-
 public/r/styles/base-rhea/hero-4.json     |  2 +-
 public/r/styles/base-rhea/hero-5.json     |  2 +-
 public/r/styles/base-rhea/hero-6.json     |  2 +-
 public/r/styles/base-rhea/hero-7.json     |  2 +-
 public/r/styles/base-rhea/hero-8.json     |  2 +-
 public/r/styles/base-rhea/hero-9.json     |  2 +-
 public/r/styles/base-rhea/links-2.json    |  2 +-
 public/r/styles/base-rhea/logos-1.json    |  2 +-
 public/r/styles/base-rhea/logos-2.json    |  2 +-
 public/r/styles/base-rhea/logos-3.json    |  2 +-
 public/r/styles/base-rhea/marquee.json    | 29 ++++++++++++--
 public/r/styles/base-rhea/price.json      |  2 +-
 public/r/styles/base-rhea/pricing-1.json  |  2 +-
 public/r/styles/base-rhea/pricing-2.json  |  2 +-
 public/r/styles/base-rhea/pricing-3.json  |  2 +-
 public/r/styles/base-rhea/product-1.json  |  2 +-
 public/r/styles/base-rhea/products-1.json |  2 +-
 public/r/styles/base-rhea/products-2.json |  2 +-
 public/r/styles/base-rhea/products-3.json |  2 +-
 public/r/styles/base-rhea/products-4.json |  2 +-
 public/r/styles/base-rhea/products-5.json |  2 +-
 public/r/styles/base-rhea/registry.json   | 49 ++++++++++-------------
 public/r/styles/base-rhea/reviews-1.json  |  2 +-
 public/r/styles/base-rhea/reviews-2.json  |  2 +-
 public/r/styles/base-rhea/reviews-3.json  |  2 +-
 public/r/styles/base-rhea/reviews-4.json  |  2 +-
 public/r/styles/base-rhea/reviews-5.json  |  2 +-
 public/r/styles/base-rhea/section.json    |  4 +-
 public/r/styles/base-rhea/services-1.json |  2 +-
 public/r/styles/base-rhea/services-2.json |  2 +-
 public/r/styles/base-rhea/services-3.json |  2 +-
 public/r/styles/base-rhea/services-4.json |  2 +-
 public/r/styles/base-rhea/services-5.json |  2 +-
 public/r/styles/base-rhea/services-6.json |  2 +-
 public/r/styles/base-rhea/services-7.json |  2 +-
 public/r/styles/base-rhea/sidebar-1.json  |  2 +-
 public/r/styles/base-rhea/sidebar.json    |  4 +-
 public/r/styles/base-sera/article-1.json  |  2 +-
 public/r/styles/base-sera/article-2.json  |  2 +-
 public/r/styles/base-sera/articles-1.json |  2 +-
 public/r/styles/base-sera/articles-2.json |  2 +-
 public/r/styles/base-sera/articles-3.json |  2 +-
 public/r/styles/base-sera/articles-4.json |  2 +-
 public/r/styles/base-sera/blocks-1.json   |  2 +-
 public/r/styles/base-sera/carousel.json   | 10 ++---
 public/r/styles/base-sera/contact-1.json  |  9 +----
 public/r/styles/base-sera/contact-2.json  |  9 +----
 public/r/styles/base-sera/contact-3.json  |  9 +----
 public/r/styles/base-sera/content-1.json  |  2 +-
 public/r/styles/base-sera/content-2.json  |  2 +-
 public/r/styles/base-sera/content-3.json  |  2 +-
 public/r/styles/base-sera/content-4.json  |  2 +-
 public/r/styles/base-sera/cta-1.json      |  2 +-
 public/r/styles/base-sera/cta-2.json      |  2 +-
 public/r/styles/base-sera/cta-3.json      |  2 +-
 public/r/styles/base-sera/cta-4.json      |  2 +-
 public/r/styles/base-sera/cta-5.json      |  2 +-
 public/r/styles/base-sera/cta-6.json      |  2 +-
 public/r/styles/base-sera/cta-7.json      |  2 +-
 public/r/styles/base-sera/cta-8.json      |  2 +-
 public/r/styles/base-sera/doc-1.json      |  2 +-
 public/r/styles/base-sera/faqs-1.json     |  2 +-
 public/r/styles/base-sera/faqs-3.json     |  2 +-
 public/r/styles/base-sera/faqs-4.json     |  2 +-
 public/r/styles/base-sera/features-1.json |  2 +-
 public/r/styles/base-sera/features-2.json |  5 +--
 public/r/styles/base-sera/features-3.json |  2 +-
 public/r/styles/base-sera/features-4.json |  2 +-
 public/r/styles/base-sera/features-5.json |  5 +--
 public/r/styles/base-sera/features-6.json |  2 +-
 public/r/styles/base-sera/footer-1.json   |  2 +-
 public/r/styles/base-sera/footer-2.json   |  2 +-
 public/r/styles/base-sera/footer-3.json   |  2 +-
 public/r/styles/base-sera/header-1.json   |  2 +-
 public/r/styles/base-sera/header-2.json   |  2 +-
 public/r/styles/base-sera/header-3.json   |  2 +-
 public/r/styles/base-sera/header-4.json   |  2 +-
 public/r/styles/base-sera/header-5.json   |  2 +-
 public/r/styles/base-sera/header.json     |  2 +-
 public/r/styles/base-sera/hero-1.json     |  2 +-
 public/r/styles/base-sera/hero-10.json    |  2 +-
 public/r/styles/base-sera/hero-11.json    |  2 +-
 public/r/styles/base-sera/hero-12.json    |  2 +-
 public/r/styles/base-sera/hero-13.json    |  2 +-
 public/r/styles/base-sera/hero-2.json     |  2 +-
 public/r/styles/base-sera/hero-3.json     |  2 +-
 public/r/styles/base-sera/hero-4.json     |  2 +-
 public/r/styles/base-sera/hero-5.json     |  2 +-
 public/r/styles/base-sera/hero-6.json     |  2 +-
 public/r/styles/base-sera/hero-7.json     |  2 +-
 public/r/styles/base-sera/hero-8.json     |  2 +-
 public/r/styles/base-sera/hero-9.json     |  2 +-
 public/r/styles/base-sera/links-2.json    |  2 +-
 public/r/styles/base-sera/logos-1.json    |  2 +-
 public/r/styles/base-sera/logos-2.json    |  2 +-
 public/r/styles/base-sera/logos-3.json    |  2 +-
 public/r/styles/base-sera/marquee.json    | 29 ++++++++++++--
 public/r/styles/base-sera/price.json      |  2 +-
 public/r/styles/base-sera/pricing-1.json  |  2 +-
 public/r/styles/base-sera/pricing-2.json  |  2 +-
 public/r/styles/base-sera/pricing-3.json  |  2 +-
 public/r/styles/base-sera/product-1.json  |  2 +-
 public/r/styles/base-sera/products-1.json |  2 +-
 public/r/styles/base-sera/products-2.json |  2 +-
 public/r/styles/base-sera/products-3.json |  2 +-
 public/r/styles/base-sera/products-4.json |  2 +-
 public/r/styles/base-sera/products-5.json |  2 +-
 public/r/styles/base-sera/registry.json   | 49 ++++++++++-------------
 public/r/styles/base-sera/reviews-1.json  |  2 +-
 public/r/styles/base-sera/reviews-2.json  |  2 +-
 public/r/styles/base-sera/reviews-3.json  |  2 +-
 public/r/styles/base-sera/reviews-4.json  |  2 +-
 public/r/styles/base-sera/reviews-5.json  |  2 +-
 public/r/styles/base-sera/section.json    |  4 +-
 public/r/styles/base-sera/services-1.json |  2 +-
 public/r/styles/base-sera/services-2.json |  2 +-
 public/r/styles/base-sera/services-3.json |  2 +-
 public/r/styles/base-sera/services-4.json |  2 +-
 public/r/styles/base-sera/services-5.json |  2 +-
 public/r/styles/base-sera/services-6.json |  2 +-
 public/r/styles/base-sera/services-7.json |  2 +-
 public/r/styles/base-sera/sidebar-1.json  |  2 +-
 public/r/styles/base-sera/sidebar.json    |  4 +-
 public/r/styles/base-vega/article-1.json  |  2 +-
 public/r/styles/base-vega/article-2.json  |  2 +-
 public/r/styles/base-vega/articles-1.json |  2 +-
 public/r/styles/base-vega/articles-2.json |  2 +-
 public/r/styles/base-vega/articles-3.json |  2 +-
 public/r/styles/base-vega/articles-4.json |  2 +-
 public/r/styles/base-vega/blocks-1.json   |  2 +-
 public/r/styles/base-vega/carousel.json   | 10 ++---
 public/r/styles/base-vega/contact-1.json  |  9 +----
 public/r/styles/base-vega/contact-2.json  |  9 +----
 public/r/styles/base-vega/contact-3.json  |  9 +----
 public/r/styles/base-vega/content-1.json  |  2 +-
 public/r/styles/base-vega/content-2.json  |  2 +-
 public/r/styles/base-vega/content-3.json  |  2 +-
 public/r/styles/base-vega/content-4.json  |  2 +-
 public/r/styles/base-vega/cta-1.json      |  2 +-
 public/r/styles/base-vega/cta-2.json      |  2 +-
 public/r/styles/base-vega/cta-3.json      |  2 +-
 public/r/styles/base-vega/cta-4.json      |  2 +-
 public/r/styles/base-vega/cta-5.json      |  2 +-
 public/r/styles/base-vega/cta-6.json      |  2 +-
 public/r/styles/base-vega/cta-7.json      |  2 +-
 public/r/styles/base-vega/cta-8.json      |  2 +-
 public/r/styles/base-vega/doc-1.json      |  2 +-
 public/r/styles/base-vega/faqs-1.json     |  2 +-
 public/r/styles/base-vega/faqs-3.json     |  2 +-
 public/r/styles/base-vega/faqs-4.json     |  2 +-
 public/r/styles/base-vega/features-1.json |  2 +-
 public/r/styles/base-vega/features-2.json |  5 +--
 public/r/styles/base-vega/features-3.json |  2 +-
 public/r/styles/base-vega/features-4.json |  2 +-
 public/r/styles/base-vega/features-5.json |  5 +--
 public/r/styles/base-vega/features-6.json |  2 +-
 public/r/styles/base-vega/footer-1.json   |  2 +-
 public/r/styles/base-vega/footer-2.json   |  2 +-
 public/r/styles/base-vega/footer-3.json   |  2 +-
 public/r/styles/base-vega/header-1.json   |  2 +-
 public/r/styles/base-vega/header-2.json   |  2 +-
 public/r/styles/base-vega/header-3.json   |  2 +-
 public/r/styles/base-vega/header-4.json   |  2 +-
 public/r/styles/base-vega/header-5.json   |  2 +-
 public/r/styles/base-vega/header.json     |  2 +-
 public/r/styles/base-vega/hero-1.json     |  2 +-
 public/r/styles/base-vega/hero-10.json    |  2 +-
 public/r/styles/base-vega/hero-11.json    |  2 +-
 public/r/styles/base-vega/hero-12.json    |  2 +-
 public/r/styles/base-vega/hero-13.json    |  2 +-
 public/r/styles/base-vega/hero-2.json     |  2 +-
 public/r/styles/base-vega/hero-3.json     |  2 +-
 public/r/styles/base-vega/hero-4.json     |  2 +-
 public/r/styles/base-vega/hero-5.json     |  2 +-
 public/r/styles/base-vega/hero-6.json     |  2 +-
 public/r/styles/base-vega/hero-7.json     |  2 +-
 public/r/styles/base-vega/hero-8.json     |  2 +-
 public/r/styles/base-vega/hero-9.json     |  2 +-
 public/r/styles/base-vega/links-2.json    |  2 +-
 public/r/styles/base-vega/logos-1.json    |  2 +-
 public/r/styles/base-vega/logos-2.json    |  2 +-
 public/r/styles/base-vega/logos-3.json    |  2 +-
 public/r/styles/base-vega/marquee.json    | 29 ++++++++++++--
 public/r/styles/base-vega/price.json      |  2 +-
 public/r/styles/base-vega/pricing-1.json  |  2 +-
 public/r/styles/base-vega/pricing-2.json  |  2 +-
 public/r/styles/base-vega/pricing-3.json  |  2 +-
 public/r/styles/base-vega/product-1.json  |  2 +-
 public/r/styles/base-vega/products-1.json |  2 +-
 public/r/styles/base-vega/products-2.json |  2 +-
 public/r/styles/base-vega/products-3.json |  2 +-
 public/r/styles/base-vega/products-4.json |  2 +-
 public/r/styles/base-vega/products-5.json |  2 +-
 public/r/styles/base-vega/registry.json   | 49 ++++++++++-------------
 public/r/styles/base-vega/reviews-1.json  |  2 +-
 public/r/styles/base-vega/reviews-2.json  |  2 +-
 public/r/styles/base-vega/reviews-3.json  |  2 +-
 public/r/styles/base-vega/reviews-4.json  |  2 +-
 public/r/styles/base-vega/reviews-5.json  |  2 +-
 public/r/styles/base-vega/section.json    |  4 +-
 public/r/styles/base-vega/services-1.json |  2 +-
 public/r/styles/base-vega/services-2.json |  2 +-
 public/r/styles/base-vega/services-3.json |  2 +-
 public/r/styles/base-vega/services-4.json |  2 +-
 public/r/styles/base-vega/services-5.json |  2 +-
 public/r/styles/base-vega/services-6.json |  2 +-
 public/r/styles/base-vega/services-7.json |  2 +-
 public/r/styles/base-vega/sidebar-1.json  |  2 +-
 public/r/styles/base-vega/sidebar.json    |  4 +-
 registry.json                             | 16 ++++----
 775 files changed, 1241 insertions(+), 1340 deletions(-)

diff --git a/public/r/article-1.json b/public/r/article-1.json
index c45df6988..a864d2860 100644
--- a/public/r/article-1.json
+++ b/public/r/article-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/article-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"max-w-2xl\">\n    <article class=\"flex flex-col gap-8\">\n      <header class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n            {title}\n          </h1>\n          <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n            {description}\n          </p>\n        </div>\n        <div class=\"flex items-center gap-3\">\n          <Avatar size=\"lg\" aria-hidden=\"true\">\n            <AvatarImage src={author.image} />\n            <AvatarFallback>{author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n          </div>\n        </div>\n      </header>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 42rem) 42rem, 100vw\"\n        loading=\"eager\"\n        fetchpriority=\"high\"\n      />\n      <div class=\"flex flex-col gap-6 text-base leading-8\">\n        <slot />\n      </div>\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/article-2.json b/public/r/article-2.json
index 6511245f3..c0a3f5f9a 100644
--- a/public/r/article-2.json
+++ b/public/r/article-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/article-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"max-w-2xl\">\n    <article class=\"flex flex-col gap-8\">\n      <header class=\"flex flex-col items-center gap-6 text-center\">\n        <div class=\"flex flex-col gap-4\">\n          <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n            {title}\n          </h1>\n          <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n            {description}\n          </p>\n        </div>\n        <div class=\"flex items-center gap-3\">\n          <Avatar size=\"lg\" aria-hidden=\"true\">\n            <AvatarImage src={author.image} />\n            <AvatarFallback>{author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col text-left\">\n            <p class=\"text-sm font-medium\">\n              {author.name}{\" \"}\n              <span class=\"text-muted-foreground font-normal\">\n                &middot; {author.date}\n              </span>\n            </p>\n            <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n          </div>\n        </div>\n      </header>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 42rem) 42rem, 100vw\"\n        loading=\"eager\"\n        fetchpriority=\"high\"\n      />\n      <div class=\"flex flex-col gap-6 text-base leading-8\">\n        <slot />\n      </div>\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/articles-1.json b/public/r/articles-1.json
index 30aa52bd2..2c9f3ed3b 100644
--- a/public/r/articles-1.json
+++ b/public/r/articles-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/articles-2.json b/public/r/articles-2.json
index a9d78a9f5..6e60d3f18 100644
--- a/public/r/articles-2.json
+++ b/public/r/articles-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class={cn(\n        \"grid gap-6 rounded-xl lg:grid-cols-2 lg:items-center lg:pr-4\",\n        featured.href != null &&\n          \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n      )}\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 80rem) 616px, (min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar aria-hidden=\"true\">\n            <AvatarImage src={featured.author.image} />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/articles-3.json b/public/r/articles-3.json
index e4182724a..bd0837d65 100644
--- a/public/r/articles-3.json
+++ b/public/r/articles-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"bg-muted/50 flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/articles-4.json b/public/r/articles-4.json
index b0c908073..ddff63354 100644
--- a/public/r/articles-4.json
+++ b/public/r/articles-4.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl border p-6\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/blocks-1.json b/public/r/blocks-1.json
index a0da615ca..8719d1a46 100644
--- a/public/r/blocks-1.json
+++ b/public/r/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"flex flex-col gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/carousel.json b/public/r/carousel.json
index 9c27dc50e..5584f6f46 100644
--- a/public/r/carousel.json
+++ b/public/r/carousel.json
@@ -13,27 +13,27 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  \"data-slot\": dataSlot = \"carousel\",\n  // A named section is a region landmark. Without a name it would have no\n  // role, so it becomes a group, the other container role the APG carousel\n  // allows.\n  role = Astro.props[\"aria-label\"] || Astro.props[\"aria-labelledby\"]\n    ? undefined\n    : \"group\",\n  ...props\n} = Astro.props\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot={dataSlot}\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={role}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts. The data-carousel-* markers stay\n  // in place when a caller overrides data-slot.\n  const rootSelector = \"[data-carousel-options]\"\n  const getParts = <T extends Element>(root: CarouselRoot, part: string) =>\n    [...root.querySelectorAll<T>(`[data-carousel-${part}]`)].filter(\n      (element) => element.closest(rootSelector) === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(rootSelector)) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"viewport\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"previous\")\n      const next = getParts<HTMLButtonElement>(root, \"next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest(rootSelector) !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-content.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div class=\"overflow-hidden\" data-slot=\"carousel-content\">\n  <div\n    data-slot=\"carousel-container\"\n    class={cn(\n      \"flex [touch-action:pan-y_pinch-zoom]\",\n      \"group-data-[orientation=vertical]/carousel:-mt-4 group-data-[orientation=vertical]/carousel:[touch-action:pan-x_pinch-zoom] group-data-[orientation=vertical]/carousel:flex-col\",\n      \"group-data-[orientation=horizontal]/carousel:-ml-4\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"carousel-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class=\"overflow-hidden\"\n  data-slot=\"carousel-content\"\n  data-carousel-viewport\n>\n  <div\n    data-slot={dataSlot}\n    class={cn(\n      \"flex [touch-action:pan-y_pinch-zoom]\",\n      \"group-data-[orientation=vertical]/carousel:-mt-4 group-data-[orientation=vertical]/carousel:[touch-action:pan-x_pinch-zoom] group-data-[orientation=vertical]/carousel:flex-col\",\n      \"group-data-[orientation=horizontal]/carousel:-ml-4\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  \"data-slot\": dataSlot = \"carousel-item\",\n  role = \"group\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  role={role}\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-next.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  \"data-slot\": dataSlot = \"carousel-next\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot={dataSlot}\n  data-carousel-next\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-previous.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  \"data-slot\": dataSlot = \"carousel-previous\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot={dataSlot}\n  data-carousel-previous\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/contact-1.json b/public/r/contact-1.json
index 9af391672..cb4345f47 100644
--- a/public/r/contact-1.json
+++ b/public/r/contact-1.json
@@ -3,22 +3,15 @@
   "name": "contact-1",
   "title": "Contact 1",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n                aria-describedby={`${formId}-message-description`}\n              />\n              <FieldDescription id={`${formId}-message-description`}>\n                {form.messageDescription}\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <li class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          <Button\n            as=\"span\"\n            variant=\"secondary\"\n            size=\"icon\"\n            class=\"text-primary\"\n            aria-hidden=\"true\"\n          >\n            <Icon name={item.icon} />\n          </Button>\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          {item.href != null ? (\n            <a\n              href={item.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n            >\n              {item.description}\n            </a>\n          ) : (\n            <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n              {item.description}\n            </p>\n          )}\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n  {Astro.slots.has(\"default\") && (\n    <SectionContainer>\n      <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n        <slot />\n      </div>\n    </SectionContainer>\n  )}\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/contact-2.json b/public/r/contact-2.json
index 97172ad7d..ec5bb574f 100644
--- a/public/r/contact-2.json
+++ b/public/r/contact-2.json
@@ -3,22 +3,15 @@
   "name": "contact-2",
   "title": "Contact 2",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    title: string\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1fr)_22rem] lg:items-start\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <div class=\"mb-6\">\n          <h3 class=\"text-lg font-medium\">{form.title}</h3>\n        </div>\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n\n    <div class=\"flex flex-col gap-3\">\n      {contactItems.map((item) => (\n        <div class=\"flex gap-4 rounded-xl border p-4\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <div class=\"flex flex-col gap-1\">\n            <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1fr)_22rem] lg:items-start\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {Astro.slots.has(\"default\") && (\n        <div class=\"rounded-xl border p-6\">\n          <slot />\n        </div>\n      )}\n    </div>\n\n    <ul class=\"flex flex-col gap-3\">\n      {contactItems.map((item) => (\n        <li class=\"flex gap-4 rounded-xl border p-4\">\n          <Button\n            as=\"span\"\n            variant=\"secondary\"\n            size=\"icon\"\n            class=\"text-primary shrink-0\"\n            aria-hidden=\"true\"\n          >\n            <Icon name={item.icon} />\n          </Button>\n          <div class=\"flex flex-col gap-1\">\n            <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n            {item.href != null ? (\n              <a\n                href={item.href}\n                class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n              >\n                {item.description}\n              </a>\n            ) : (\n              <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n                {item.description}\n              </p>\n            )}\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/contact-3.json b/public/r/contact-3.json
index 15a42d48f..b50f57b6e 100644
--- a/public/r/contact-3.json
+++ b/public/r/contact-3.json
@@ -3,22 +3,15 @@
   "name": "contact-3",
   "title": "Contact 3",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <li class=\"flex gap-4\">\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n            <div class=\"flex min-w-0 flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              {item.href != null ? (\n                <a\n                  href={item.href}\n                  class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n                >\n                  {item.description}\n                </a>\n              ) : (\n                <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n                  {item.description}\n                </p>\n              )}\n            </div>\n          </li>\n        ))}\n      </ul>\n      {Astro.slots.has(\"default\") && (\n        <div class=\"rounded-xl border p-6\">\n          <slot />\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/content-1.json b/public/r/content-1.json
index 37cc98379..45ceca637 100644
--- a/public/r/content-1.json
+++ b/public/r/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-3 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-3 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/content-2.json b/public/r/content-2.json
index 693b5d9bb..7675cc352 100644
--- a/public/r/content-2.json
+++ b/public/r/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/content-3.json b/public/r/content-3.json
index fdc0b7afd..cf3b62853 100644
--- a/public/r/content-3.json
+++ b/public/r/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/content-4.json b/public/r/content-4.json
index 4dd1cd6f3..fcce4f136 100644
--- a/public/r/content-4.json
+++ b/public/r/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 80rem) 800px, (min-width: 64rem) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/cta-1.json b/public/r/cta-1.json
index 880fa60eb..10cbc452e 100644
--- a/public/r/cta-1.json
+++ b/public/r/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/cta-2.json b/public/r/cta-2.json
index 05cfb2687..347395042 100644
--- a/public/r/cta-2.json
+++ b/public/r/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/cta-3.json b/public/r/cta-3.json
index caf08c91a..d8a956197 100644
--- a/public/r/cta-3.json
+++ b/public/r/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/cta-4.json b/public/r/cta-4.json
index 2ed196c48..43d7c1bd8 100644
--- a/public/r/cta-4.json
+++ b/public/r/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/cta-5.json b/public/r/cta-5.json
index 39ff0c7bb..7a122cb13 100644
--- a/public/r/cta-5.json
+++ b/public/r/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/cta-6.json b/public/r/cta-6.json
index cbd7368fe..9aa3276fe 100644
--- a/public/r/cta-6.json
+++ b/public/r/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/cta-7.json b/public/r/cta-7.json
index 86813e6c0..b6755b388 100644
--- a/public/r/cta-7.json
+++ b/public/r/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-muted-foreground text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription class=\"text-foreground/80\">\n        {description}\n      </SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-foreground/80 text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/cta-8.json b/public/r/cta-8.json
index eaac34d78..7acaffa25 100644
--- a/public/r/cta-8.json
+++ b/public/r/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col gap-8 before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/doc-1.json b/public/r/doc-1.json
index 9c98b34f9..49048e0e5 100644
--- a/public/r/doc-1.json
+++ b/public/r/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"flex flex-col gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/faqs-1.json b/public/r/faqs-1.json
index 92d59430a..fe0decf6f 100644
--- a/public/r/faqs-1.json
+++ b/public/r/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/faqs-3.json b/public/r/faqs-3.json
index a0d634566..cd5d5197c 100644
--- a/public/r/faqs-3.json
+++ b/public/r/faqs-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/faqs-4.json b/public/r/faqs-4.json
index 4fe0db0bb..19de0d927 100644
--- a/public/r/faqs-4.json
+++ b/public/r/faqs-4.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst { class: className, title, faqs, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center\">\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <SectionTitle>{title}</SectionTitle>\n      <div class=\"mt-10\">\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst { class: className, title, faqs, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center\">\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <SectionTitle>{title}</SectionTitle>\n      <div class=\"mt-10\">\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/features-1.json b/public/r/features-1.json
index 585c6b7f2..61240563f 100644
--- a/public/r/features-1.json
+++ b/public/r/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <li class=\"flex flex-col gap-4 rounded-xl border p-6\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.link && (\n            <a\n              href={feature.link.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/features-2.json b/public/r/features-2.json
index 467338413..a15ebe78c 100644
--- a/public/r/features-2.json
+++ b/public/r/features-2.json
@@ -3,9 +3,6 @@
   "name": "features-2",
   "title": "Features 2",
   "description": "Feature section layouts for product narratives, launch pages, and capability overviews.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/icon",
     "@fulldev/section"
@@ -13,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li class=\"bg-background relative flex flex-col items-center gap-4 p-7 text-center\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 ring-inset\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/features-3.json b/public/r/features-3.json
index 83402f1a0..0f7902b8c 100644
--- a/public/r/features-3.json
+++ b/public/r/features-3.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex items-center gap-5 rounded-xl border p-4 transition-colors\">\n          <Image\n            src={feature.image.src}\n            alt={feature.image.alt}\n            class=\"size-20 shrink-0 rounded-lg object-cover\"\n            widths={[160, 320]}\n            sizes=\"80px\"\n          />\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-5 rounded-xl border p-4\">\n          <Image\n            src={feature.image.src}\n            alt={feature.image.alt}\n            class=\"size-20 shrink-0 rounded-lg object-cover\"\n            widths={[160, 320]}\n            sizes=\"80px\"\n          />\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/features-4.json b/public/r/features-4.json
index 6cadcba43..437798358 100644
--- a/public/r/features-4.json
+++ b/public/r/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <ul class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <li class=\"flex flex-col gap-4 rounded-xl border p-6\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.link && (\n              <a\n                href={feature.link.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.link.label}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </li>\n        ))}\n      </ul>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/features-5.json b/public/r/features-5.json
index 61eba406f..420643adf 100644
--- a/public/r/features-5.json
+++ b/public/r/features-5.json
@@ -3,9 +3,6 @@
   "name": "features-5",
   "title": "Features 5",
   "description": "Feature section layouts for product narratives, launch pages, and capability overviews.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/icon",
     "@fulldev/section"
@@ -13,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li class=\"flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/features-6.json b/public/r/features-6.json
index d21ff5c93..9b01c7537 100644
--- a/public/r/features-6.json
+++ b/public/r/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/footer-1.json b/public/r/footer-1.json
index 7ac3e8331..6e75db4ac 100644
--- a/public/r/footer-1.json
+++ b/public/r/footer-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer class=\"flex flex-col gap-8\">\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <h2 class=\"text-sm font-medium\">{column.title}</h2>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/footer-2.json b/public/r/footer-2.json
index 217f595bb..d5fbcdfec 100644
--- a/public/r/footer-2.json
+++ b/public/r/footer-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      <div class=\"flex items-center justify-center gap-3\">\n        {socials.map((social) => (\n          <a\n            href={social.href}\n            class=\"text-muted-foreground hover:text-foreground transition-colors\"\n            aria-label={social.label}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n          >\n            <Icon name={social.icon} href={social.href} class=\"size-4\" />\n          </a>\n        ))}\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      {socials.length > 0 && (\n        <div class=\"flex items-center justify-center gap-3\">\n          {socials.map((social) => (\n            <a\n              href={social.href}\n              class=\"text-muted-foreground hover:text-foreground transition-colors\"\n              aria-label={social.label}\n            >\n              <Icon name={social.icon} href={social.href} class=\"size-4\" />\n            </a>\n          ))}\n        </div>\n      )}\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/footer-3.json b/public/r/footer-3.json
index b5bc278e9..27d6eb84e 100644
--- a/public/r/footer-3.json
+++ b/public/r/footer-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer class=\"flex flex-col gap-8\">\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <h2 class=\"text-sm font-medium\">{column.title}</h2>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/header-1.json b/public/r/header-1.json
index 5b7896a87..0bfb9eb6d 100644
--- a/public/r/header-1.json
+++ b/public/r/header-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/header-2.json b/public/r/header-2.json
index 6a35ca3c4..16c30ad25 100644
--- a/public/r/header-2.json
+++ b/public/r/header-2.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/header-3.json b/public/r/header-3.json
index 70418bc87..fd0157b7f 100644
--- a/public/r/header-3.json
+++ b/public/r/header-3.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/header-4.json b/public/r/header-4.json
index 0a7d02adf..60663b63f 100644
--- a/public/r/header-4.json
+++ b/public/r/header-4.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/header-5.json b/public/r/header-5.json
index 97bc283a6..a09f4b53b 100644
--- a/public/r/header-5.json
+++ b/public/r/header-5.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/header.json b/public/r/header.json
index 4108fed3e..6f38b7e4c 100644
--- a/public/r/header.json
+++ b/public/r/header.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/header/header.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-lg border bg-background shadow-sm mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-lg border bg-background shadow-sm mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  \"data-slot\": dataSlot = \"header\",\n  ...props\n} = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot={dataSlot}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/hero-1.json b/public/r/hero-1.json
index 74dc8b92d..3001b9ff4 100644
--- a/public/r/hero-1.json
+++ b/public/r/hero-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n      {badge.label}\n    </Badge>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge?: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    {badge && (\n      <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n        {badge.label}\n      </Badge>\n    )}\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/hero-10.json b/public/r/hero-10.json
index 96ed3c089..770bb0a86 100644
--- a/public/r/hero-10.json
+++ b/public/r/hero-10.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-10.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/hero-11.json b/public/r/hero-11.json
index 86a7f5e03..09a801205 100644
--- a/public/r/hero-11.json
+++ b/public/r/hero-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-11.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/hero-12.json b/public/r/hero-12.json
index a88805751..77a37b010 100644
--- a/public/r/hero-12.json
+++ b/public/r/hero-12.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-12.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/hero-13.json b/public/r/hero-13.json
index f25d55373..f1f708613 100644
--- a/public/r/hero-13.json
+++ b/public/r/hero-13.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-13.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 900px, (min-width: 64rem) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/hero-2.json b/public/r/hero-2.json
index 672b023de..872bdcf70 100644
--- a/public/r/hero-2.json
+++ b/public/r/hero-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/hero-3.json b/public/r/hero-3.json
index 03cde7001..dcd3d0d23 100644
--- a/public/r/hero-3.json
+++ b/public/r/hero-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/hero-4.json b/public/r/hero-4.json
index ccdf499cf..b0e278928 100644
--- a/public/r/hero-4.json
+++ b/public/r/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/hero-5.json b/public/r/hero-5.json
index a11173eff..1b95a5469 100644
--- a/public/r/hero-5.json
+++ b/public/r/hero-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/hero-6.json b/public/r/hero-6.json
index f458c5879..b60078e9c 100644
--- a/public/r/hero-6.json
+++ b/public/r/hero-6.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/hero-7.json b/public/r/hero-7.json
index e417ccade..75d00053f 100644
--- a/public/r/hero-7.json
+++ b/public/r/hero-7.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 750px, (min-width: 64rem) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/hero-8.json b/public/r/hero-8.json
index a3db6ba64..2ed1b607f 100644
--- a/public/r/hero-8.json
+++ b/public/r/hero-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-8.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 936px, (min-width: 64rem) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/hero-9.json b/public/r/hero-9.json
index 22397aa77..3fc4a2faa 100644
--- a/public/r/hero-9.json
+++ b/public/r/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/links-2.json b/public/r/links-2.json
index 9e1d20ae8..ed6e31559 100644
--- a/public/r/links-2.json
+++ b/public/r/links-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/links-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/logos-1.json b/public/r/logos-1.json
index de017ff6a..de62b4b00 100644
--- a/public/r/logos-1.json
+++ b/public/r/logos-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <li>\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground transition-colors focus-visible:text-foreground\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/logos-2.json b/public/r/logos-2.json
index 3d3960693..48760e394 100644
--- a/public/r/logos-2.json
+++ b/public/r/logos-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n  labels: {\n    play: string\n    pause: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  brands,\n  labels,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-4 [--marquee-gap:--spacing(12)]\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    <MarqueeContent class=\"text-muted-foreground mask-x-from-90%\">\n      {brands.map((brand) => (\n        <MarqueeItem class=\"flex items-center\">\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground focus-visible:text-foreground transition-colors\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </MarqueeItem>\n      ))}\n    </MarqueeContent>\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/logos-3.json b/public/r/logos-3.json
index f0f2762ed..4824f14cc 100644
--- a/public/r/logos-3.json
+++ b/public/r/logos-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"py-12 lg:py-16\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"text-muted-foreground flex flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"py-12 lg:py-16\", className)} {...props}>\n  <SectionContainer>\n    <ul class=\"text-muted-foreground flex flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <li>\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground transition-colors focus-visible:text-foreground\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/marquee.json b/public/r/marquee.json
index c932b246a..c0543ae7f 100644
--- a/public/r/marquee.json
+++ b/public/r/marquee.json
@@ -2,16 +2,39 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "marquee",
   "title": "Marquee",
-  "description": "A continuous scrolling animation component for displaying content in a loop.",
+  "description": "A continuously scrolling row of content, with a pause control and a static fallback.",
+  "dependencies": [
+    "embla-carousel@8.6.0",
+    "embla-carousel-auto-scroll@8.6.0",
+    "@lucide/astro"
+  ],
+  "registryDependencies": [
+    "@fulldev/button"
+  ],
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  data-slot={dataSlot}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({ viewport }))\n      // Moving content needs a way to pause it, so a marquee without a toggle\n      // stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no focusable content of its own.\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = row.viewport.querySelector(\n          \"a[href], button, input, select, textarea, [tabindex]\"\n        )\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || toggles.length === 0) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-content.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  reverse?: boolean\n}\n\nconst {\n  class: className,\n  reverse = false,\n  \"data-slot\": dataSlot = \"marquee-content\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee-viewport\n  data-reverse={reverse ? \"\" : undefined}\n  class={cn(\n    \"focus-visible:ring-ring/50 overflow-x-auto outline-none contain-inline-size focus-visible:ring-3 data-active:overflow-hidden\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"-ms-[var(--marquee-gap,--spacing(4))] flex justify-center-safe\">\n    <slot />\n  </div>\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-item.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee-item\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 ps-[var(--marquee-gap,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-toggle.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  hidden\n  data-slot={dataSlot}\n  data-marquee-toggle\n  data-state=\"playing\"\n  data-play-label={playLabel}\n  data-pause-label={pauseLabel}\n  data-variant={variant}\n  data-size={size}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"group/marquee-toggle\",\n    className\n  )}\n  {...props}\n>\n  <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n  <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n  <span class=\"sr-only\" data-marquee-label>\n    {pauseLabel}\n  </span>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/marquee/index.ts",
-      "content": "export { default as Marquee } from \"./marquee.astro\"\n",
+      "content": "export { default as Marquee } from \"./marquee.astro\"\nexport { default as MarqueeContent } from \"./marquee-content.astro\"\nexport { default as MarqueeItem } from \"./marquee-item.astro\"\nexport { default as MarqueeToggle } from \"./marquee-toggle.astro\"\n",
       "type": "registry:ui"
     }
   ],
diff --git a/public/r/price.json b/public/r/price.json
index d815f6576..e512209cd 100644
--- a/public/r/price.json
+++ b/public/r/price.json
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/price/price-value.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  parseSinglePriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n    discountLabel?: string\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  discountLabel = \"Save\",\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst currentValue = parseSinglePriceValue(price)\nconst compareAtValue = parseSinglePriceValue(compareAt)\n// A compare-at price only shows when it is higher than the price.\nconst formattedCompareAt =\n  currentValue !== null &&\n  compareAtValue !== null &&\n  compareAtValue <= currentValue\n    ? null\n    : formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && formattedCompareAt !== null\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\n---\n\n{formattedPrice !== null && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt !== null && (\n      <del class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </del>\n    )}\n    {formattedDiscount !== null && (\n      <span class=\"rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-foreground\">\n        {discountLabel} {formattedDiscount}\n      </span>\n    )}\n  </span>\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/pricing-1.json b/public/r/pricing-1.json
index 69ddbb891..2649f08fb 100644
--- a/public/r/pricing-1.json
+++ b/public/r/pricing-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  locale?: string\n  discountLabel?: string\n  plans: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  locale,\n  discountLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle as=\"h3\">{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price.value}\n                compareAt={plan.price.compareAt}\n                currency={plan.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{plan.price.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-start gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/pricing-2.json b/public/r/pricing-2.json
index 6f6a446c3..14d7ffde3 100644
--- a/public/r/pricing-2.json
+++ b/public/r/pricing-2.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={index === 0 ? \"outline\" : \"default\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  locale?: string\n  discountLabel?: string\n  plans: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  locale,\n  discountLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle as=\"h3\">{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price.value}\n                compareAt={plan.price.compareAt}\n                currency={plan.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{plan.price.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-start gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/pricing-3.json b/public/r/pricing-3.json
index cf14ce08c..5e767ea90 100644
--- a/public/r/pricing-3.json
+++ b/public/r/pricing-3.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  locale?: string\n  discountLabel?: string\n  offer: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  locale,\n  discountLabel,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle as=\"h3\">{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue\n            price={offer.price.value}\n            compareAt={offer.price.compareAt}\n            currency={offer.price.currency}\n            locale={locale}\n            discountLabel={discountLabel}\n          />\n          <PriceUnit>{offer.price.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/product-1.json b/public/r/product-1.json
index 74777c9da..d09a7114b 100644
--- a/public/r/product-1.json
+++ b/public/r/product-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/product-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    compareAt?: number\n    currency: string\n    unit: string\n  }\n  locale?: string\n  discountLabel?: string\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  locale,\n  discountLabel,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] w-full rounded-lg object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 608px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue\n          price={price.value}\n          compareAt={price.compareAt}\n          currency={price.currency}\n          locale={locale}\n          discountLabel={discountLabel}\n        />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/products-1.json b/public/r/products-1.json
index 551e0e726..2bc2c4508 100644
--- a/public/r/products-1.json
+++ b/public/r/products-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 302px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/products-2.json b/public/r/products-2.json
index 47d395874..34a441afd 100644
--- a/public/r/products-2.json
+++ b/public/r/products-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"max-w-2xl\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-3\">\n      {products.map((item) => (\n        <div>\n          <Separator />\n          <div class=\"flex flex-col gap-4 py-5 md:flex-row md:items-center md:justify-between\">\n            <div class=\"flex flex-col gap-1 md:max-w-lg\">\n              <h3 class=\"text-base font-medium\">{item.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-6\">\n                {item.description}\n              </p>\n            </div>\n            <Price>\n              <PriceValue\n                price={item.price.value}\n                currency={item.price.currency}\n              />\n              <PriceUnit>{item.price.unit}</PriceUnit>\n            </Price>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"max-w-2xl\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-3\">\n      {products.map((item) => (\n        <div>\n          <Separator />\n          <div class=\"flex flex-col gap-4 py-5 md:flex-row md:items-center md:justify-between\">\n            <div class=\"flex flex-col gap-1 md:max-w-lg\">\n              <h3 class=\"text-base font-medium\">{item.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-6\">\n                {item.description}\n              </p>\n            </div>\n            <Price>\n              <PriceValue\n                price={item.price.value}\n                compareAt={item.price.compareAt}\n                currency={item.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{item.price.unit}</PriceUnit>\n            </Price>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/products-3.json b/public/r/products-3.json
index 91921d696..0e6645c63 100644
--- a/public/r/products-3.json
+++ b/public/r/products-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card class=\"text-center\">\n          <CardHeader>\n            <Price class=\"justify-center\">\n              <PriceValue\n                class=\"text-3xl font-semibold\"\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n            </Price>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-2\">\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card class=\"text-center\">\n          <CardHeader>\n            <Price class=\"justify-center\">\n              <PriceValue\n                class=\"text-3xl font-semibold\"\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n            </Price>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-2\">\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/products-4.json b/public/r/products-4.json
index 5c64e3d1f..6885edb3d 100644
--- a/public/r/products-4.json
+++ b/public/r/products-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 405px, (min-width: 64rem) 33vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/products-5.json b/public/r/products-5.json
index c9420d383..9b0a09fb9 100644
--- a/public/r/products-5.json
+++ b/public/r/products-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"gap-0 overflow-hidden\">\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[3/4] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 302px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/registry.json b/public/r/registry.json
index e5fcf8263..ba9d1ef86 100644
--- a/public/r/registry.json
+++ b/public/r/registry.json
@@ -1064,16 +1064,36 @@
       "name": "marquee",
       "type": "registry:ui",
       "title": "Marquee",
-      "description": "A continuous scrolling animation component for displaying content in a loop.",
+      "description": "A continuously scrolling row of content, with a pause control and a static fallback.",
       "categories": [
         "ui"
       ],
       "docs": "https://ui.full.dev/components/marquee/",
+      "dependencies": [
+        "embla-carousel@8.6.0",
+        "embla-carousel-auto-scroll@8.6.0",
+        "@lucide/astro"
+      ],
+      "registryDependencies": [
+        "@fulldev/button"
+      ],
       "files": [
         {
           "path": "src/components/ui/marquee/marquee.astro",
           "type": "registry:ui"
         },
+        {
+          "path": "src/components/ui/marquee/marquee-content.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/marquee/marquee-item.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/marquee/marquee-toggle.astro",
+          "type": "registry:ui"
+        },
         {
           "path": "src/components/ui/marquee/index.ts",
           "type": "registry:ui"
@@ -2721,16 +2741,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -2749,16 +2762,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -2777,16 +2783,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -3248,9 +3247,6 @@
         "features"
       ],
       "docs": "https://ui.full.dev/blocks/features/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/icon",
         "@fulldev/section"
@@ -3314,9 +3310,6 @@
         "features"
       ],
       "docs": "https://ui.full.dev/blocks/features/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/icon",
         "@fulldev/section"
diff --git a/public/r/reviews-1.json b/public/r/reviews-1.json
index 1a508f17b..d4fae359c 100644
--- a/public/r/reviews-1.json
+++ b/public/r/reviews-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-1 flex-col\">\n            <figure class=\"flex flex-1 flex-col gap-4\">\n              <div class=\"flex items-center justify-between\">\n                <Rating value={item.rating} aria-label={item.ratingLabel} />\n                <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n              </div>\n              <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n                <p>{item.quote}</p>\n              </blockquote>\n              <figcaption class=\"mt-auto flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\" aria-hidden=\"true\">\n                  <AvatarImage src={item.image} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </figcaption>\n            </figure>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/reviews-2.json b/public/r/reviews-2.json
index d5ae29850..494ef9157 100644
--- a/public/r/reviews-2.json
+++ b/public/r/reviews-2.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <figure class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        <p>{featured.quote}</p>\n      </blockquote>\n      <figcaption class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\" aria-hidden=\"true\">\n          <AvatarImage src={featured.image} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </figcaption>\n    </figure>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <div class=\"flex flex-col\">\n          <Separator />\n          <figure class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n              <p>{item.quote}</p>\n            </blockquote>\n            <figcaption class=\"flex items-center gap-3 pt-1\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={item.image} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </figcaption>\n          </figure>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/reviews-3.json b/public/r/reviews-3.json
index eb084404f..5f405a1b8 100644
--- a/public/r/reviews-3.json
+++ b/public/r/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <figure class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                <p>{item.quote}</p>\n              </blockquote>\n              <figcaption class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\" aria-hidden=\"true\">\n                  <AvatarImage src={item.image} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </figcaption>\n            </figure>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/reviews-4.json b/public/r/reviews-4.json
index 03ac5fc3e..3c962de9f 100644
--- a/public/r/reviews-4.json
+++ b/public/r/reviews-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    play: string\n    pause: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst rows = [reviews.slice(0, half), reviews.slice(half)]\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-6\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    {rows\n      .filter((row) => row.length > 0)\n      .map((row, index) => (\n        <MarqueeContent reverse={index % 2 === 1} class=\"py-1\">\n          {row.map((item) => (\n            <MarqueeItem class=\"flex\">\n              <Card class=\"w-[22rem]\">\n                <CardContent class=\"flex flex-1 flex-col\">\n                  <figure class=\"flex flex-1 flex-col gap-3\">\n                    <Rating value={item.rating} aria-label={item.ratingLabel} />\n                    <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n                      <p>{item.quote}</p>\n                    </blockquote>\n                    <figcaption class=\"mt-auto flex items-center gap-3 pt-1\">\n                      <Avatar aria-hidden=\"true\">\n                        <AvatarImage src={item.image} />\n                        <AvatarFallback>{item.initials}</AvatarFallback>\n                      </Avatar>\n                      <div>\n                        <p class=\"text-foreground text-sm font-medium\">\n                          {item.name}\n                        </p>\n                        <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                      </div>\n                    </figcaption>\n                  </figure>\n                </CardContent>\n              </Card>\n            </MarqueeItem>\n          ))}\n        </MarqueeContent>\n      ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/reviews-5.json b/public/r/reviews-5.json
index 8b3458106..4f438bd1b 100644
--- a/public/r/reviews-5.json
+++ b/public/r/reviews-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    play: string\n    pause: string\n  }\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst rows = [\n  reviews.slice(0, third),\n  reviews.slice(third, third * 2),\n  reviews.slice(third * 2),\n]\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-5\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    {rows\n      .filter((row) => row.length > 0)\n      .map((row, index) => (\n        <MarqueeContent reverse={index % 2 === 1} class=\"py-1\">\n          {row.map((item) => (\n            <MarqueeItem class=\"flex\">\n              <figure class=\"bg-muted/50 flex w-[26rem] flex-col gap-4 rounded-2xl p-6\">\n                <figcaption class=\"flex items-center justify-between gap-3\">\n                  <div class=\"flex items-center gap-3\">\n                    <Avatar size=\"lg\" aria-hidden=\"true\">\n                      <AvatarImage src={item.image} />\n                      <AvatarFallback>{item.initials}</AvatarFallback>\n                    </Avatar>\n                    <div>\n                      <p class=\"text-foreground text-sm font-semibold\">\n                        {item.name}\n                      </p>\n                      <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                    </div>\n                  </div>\n                  <Rating value={item.rating} aria-label={item.ratingLabel} />\n                </figcaption>\n                <div class=\"flex gap-2.5\">\n                  <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n                  <blockquote class=\"text-foreground/80 text-sm leading-relaxed\">\n                    <p>{item.quote}</p>\n                  </blockquote>\n                </div>\n              </figure>\n            </MarqueeItem>\n          ))}\n        </MarqueeContent>\n      ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/section.json b/public/r/section.json
index bfdcd376b..929ff6ee8 100644
--- a/public/r/section.json
+++ b/public/r/section.json
@@ -6,12 +6,12 @@
   "files": [
     {
       "path": "src/components/ui/section/section.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-16 py-[var(--section-padding,--spacing(16))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-16 rounded-xl border bg-background shadow-md mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-16 py-[var(--section-padding,--spacing(16))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-16 rounded-xl border bg-background shadow-md mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  \"data-slot\": dataSlot = \"section\",\n  ...props\n} = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot={dataSlot}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/section/section-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"section-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] flex-col gap-8 px-[var(--gutter,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"section-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"relative mx-auto w-full max-w-[var(--container,var(--container-7xl))] px-[var(--gutter,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/services-1.json b/public/r/services-1.json
index 4d5ac713e..0ad551b55 100644
--- a/public/r/services-1.json
+++ b/public/r/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href != null && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs\",\n              service.href != null && \"transition-shadow hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? \"\"}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 80rem) 294px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/services-2.json b/public/r/services-2.json
index f2b3db6bc..8c24f803c 100644
--- a/public/r/services-2.json
+++ b/public/r/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"grid items-center gap-6 rounded-xl border p-4 shadow-xs md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/services-3.json b/public/r/services-3.json
index f259c104f..53b390522 100644
--- a/public/r/services-3.json
+++ b/public/r/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"absolute inset-0 -z-10 size-full object-cover\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 80rem) 612px, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/services-4.json b/public/r/services-4.json
index d357efabf..a848dbe59 100644
--- a/public/r/services-4.json
+++ b/public/r/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 294px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.link && (\n            <a\n              href={service.link.href}\n              class=\"text-primary inline-flex w-fit items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline\"\n            >\n              {service.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/services-5.json b/public/r/services-5.json
index def369794..2458133c0 100644
--- a/public/r/services-5.json
+++ b/public/r/services-5.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background relative flex flex-col gap-4 p-7\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 ring-inset\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.link && (\n            <a\n              href={service.link.href}\n              class=\"text-primary mt-auto inline-flex w-fit items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline\"\n            >\n              {service.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/services-6.json b/public/r/services-6.json
index 70206a046..82f8c027b 100644
--- a/public/r/services-6.json
+++ b/public/r/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 436px, (min-width: 64rem) 35vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/services-7.json b/public/r/services-7.json
index 623952170..bbc7e0404 100644
--- a/public/r/services-7.json
+++ b/public/r/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 1024px) 66vw, 100vw\"\n                  : \"(min-width: 1024px) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs\",\n              service.href != null && \"transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? \"\"}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 80rem) 824px, (min-width: 64rem) 66vw, 100vw\"\n                  : \"(min-width: 80rem) 400px, (min-width: 64rem) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/sidebar-1.json b/public/r/sidebar-1.json
index 3476f325b..4ec41b325 100644
--- a/public/r/sidebar-1.json
+++ b/public/r/sidebar-1.json
@@ -22,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebar: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar\n    class={cn(\"\", className)}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebar} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={labels.github}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  currentPath: string\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    sidebar: string\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebarToggle: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  currentPath: rawCurrentPath,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n  ...props\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(rawCurrentPath)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider {...props}>\n  <Sidebar\n    aria-label={labels.sidebar}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebarToggle} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            <Icon name=\"github\" />\n            <span class=\"sr-only\">{labels.github}</span>\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/sidebar.json b/public/r/sidebar.json
index 40c1605c9..c2d2a3d09 100644
--- a/public/r/sidebar.json
+++ b/public/r/sidebar.json
@@ -24,7 +24,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <aside\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </aside>\n    </div>\n  </>\n)}\n",
       "type": "registry:ui"
     },
     {
@@ -34,7 +34,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar-rail.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst { class: className, type = \"button\", ...props } = Astro.props\n---\n\n<button\n  data-sidebar=\"rail\"\n  data-slot=\"sidebar-rail\"\n  aria-label=\"Toggle Sidebar\"\n  tabindex={-1}\n  title=\"Toggle Sidebar\"\n  type={type}\n  class={cn(\n    \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n    \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n    \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n    \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n    \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n    \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n    className\n  )}\n  {...props}\n></button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  type = \"button\",\n  \"aria-label\": ariaLabel = \"Toggle Sidebar\",\n  title = ariaLabel,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-sidebar=\"rail\"\n  data-slot=\"sidebar-rail\"\n  aria-label={ariaLabel}\n  tabindex={-1}\n  title={title}\n  type={type}\n  class={cn(\n    \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n    \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n    \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n    \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n    \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n    \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n    className\n  )}\n  {...props}\n></button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/article-1.json b/public/r/styles/base-luma/article-1.json
index c45df6988..a864d2860 100644
--- a/public/r/styles/base-luma/article-1.json
+++ b/public/r/styles/base-luma/article-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/article-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"max-w-2xl\">\n    <article class=\"flex flex-col gap-8\">\n      <header class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n            {title}\n          </h1>\n          <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n            {description}\n          </p>\n        </div>\n        <div class=\"flex items-center gap-3\">\n          <Avatar size=\"lg\" aria-hidden=\"true\">\n            <AvatarImage src={author.image} />\n            <AvatarFallback>{author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n          </div>\n        </div>\n      </header>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 42rem) 42rem, 100vw\"\n        loading=\"eager\"\n        fetchpriority=\"high\"\n      />\n      <div class=\"flex flex-col gap-6 text-base leading-8\">\n        <slot />\n      </div>\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/article-2.json b/public/r/styles/base-luma/article-2.json
index 6511245f3..c0a3f5f9a 100644
--- a/public/r/styles/base-luma/article-2.json
+++ b/public/r/styles/base-luma/article-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/article-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"max-w-2xl\">\n    <article class=\"flex flex-col gap-8\">\n      <header class=\"flex flex-col items-center gap-6 text-center\">\n        <div class=\"flex flex-col gap-4\">\n          <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n            {title}\n          </h1>\n          <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n            {description}\n          </p>\n        </div>\n        <div class=\"flex items-center gap-3\">\n          <Avatar size=\"lg\" aria-hidden=\"true\">\n            <AvatarImage src={author.image} />\n            <AvatarFallback>{author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col text-left\">\n            <p class=\"text-sm font-medium\">\n              {author.name}{\" \"}\n              <span class=\"text-muted-foreground font-normal\">\n                &middot; {author.date}\n              </span>\n            </p>\n            <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n          </div>\n        </div>\n      </header>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 42rem) 42rem, 100vw\"\n        loading=\"eager\"\n        fetchpriority=\"high\"\n      />\n      <div class=\"flex flex-col gap-6 text-base leading-8\">\n        <slot />\n      </div>\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/articles-1.json b/public/r/styles/base-luma/articles-1.json
index 30aa52bd2..2c9f3ed3b 100644
--- a/public/r/styles/base-luma/articles-1.json
+++ b/public/r/styles/base-luma/articles-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/articles-2.json b/public/r/styles/base-luma/articles-2.json
index a9d78a9f5..6e60d3f18 100644
--- a/public/r/styles/base-luma/articles-2.json
+++ b/public/r/styles/base-luma/articles-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class={cn(\n        \"grid gap-6 rounded-xl lg:grid-cols-2 lg:items-center lg:pr-4\",\n        featured.href != null &&\n          \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n      )}\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 80rem) 616px, (min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar aria-hidden=\"true\">\n            <AvatarImage src={featured.author.image} />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/articles-3.json b/public/r/styles/base-luma/articles-3.json
index e4182724a..bd0837d65 100644
--- a/public/r/styles/base-luma/articles-3.json
+++ b/public/r/styles/base-luma/articles-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"bg-muted/50 flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/articles-4.json b/public/r/styles/base-luma/articles-4.json
index b0c908073..ddff63354 100644
--- a/public/r/styles/base-luma/articles-4.json
+++ b/public/r/styles/base-luma/articles-4.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl border p-6\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/blocks-1.json b/public/r/styles/base-luma/blocks-1.json
index a0da615ca..8719d1a46 100644
--- a/public/r/styles/base-luma/blocks-1.json
+++ b/public/r/styles/base-luma/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"flex flex-col gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/carousel.json b/public/r/styles/base-luma/carousel.json
index 9c27dc50e..5584f6f46 100644
--- a/public/r/styles/base-luma/carousel.json
+++ b/public/r/styles/base-luma/carousel.json
@@ -13,27 +13,27 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  \"data-slot\": dataSlot = \"carousel\",\n  // A named section is a region landmark. Without a name it would have no\n  // role, so it becomes a group, the other container role the APG carousel\n  // allows.\n  role = Astro.props[\"aria-label\"] || Astro.props[\"aria-labelledby\"]\n    ? undefined\n    : \"group\",\n  ...props\n} = Astro.props\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot={dataSlot}\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={role}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts. The data-carousel-* markers stay\n  // in place when a caller overrides data-slot.\n  const rootSelector = \"[data-carousel-options]\"\n  const getParts = <T extends Element>(root: CarouselRoot, part: string) =>\n    [...root.querySelectorAll<T>(`[data-carousel-${part}]`)].filter(\n      (element) => element.closest(rootSelector) === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(rootSelector)) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"viewport\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"previous\")\n      const next = getParts<HTMLButtonElement>(root, \"next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest(rootSelector) !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-content.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div class=\"overflow-hidden\" data-slot=\"carousel-content\">\n  <div\n    data-slot=\"carousel-container\"\n    class={cn(\n      \"flex [touch-action:pan-y_pinch-zoom]\",\n      \"group-data-[orientation=vertical]/carousel:-mt-4 group-data-[orientation=vertical]/carousel:[touch-action:pan-x_pinch-zoom] group-data-[orientation=vertical]/carousel:flex-col\",\n      \"group-data-[orientation=horizontal]/carousel:-ml-4\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"carousel-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class=\"overflow-hidden\"\n  data-slot=\"carousel-content\"\n  data-carousel-viewport\n>\n  <div\n    data-slot={dataSlot}\n    class={cn(\n      \"flex [touch-action:pan-y_pinch-zoom]\",\n      \"group-data-[orientation=vertical]/carousel:-mt-4 group-data-[orientation=vertical]/carousel:[touch-action:pan-x_pinch-zoom] group-data-[orientation=vertical]/carousel:flex-col\",\n      \"group-data-[orientation=horizontal]/carousel:-ml-4\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  \"data-slot\": dataSlot = \"carousel-item\",\n  role = \"group\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  role={role}\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-next.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  \"data-slot\": dataSlot = \"carousel-next\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot={dataSlot}\n  data-carousel-next\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-previous.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  \"data-slot\": dataSlot = \"carousel-previous\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot={dataSlot}\n  data-carousel-previous\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/contact-1.json b/public/r/styles/base-luma/contact-1.json
index 9af391672..cb4345f47 100644
--- a/public/r/styles/base-luma/contact-1.json
+++ b/public/r/styles/base-luma/contact-1.json
@@ -3,22 +3,15 @@
   "name": "contact-1",
   "title": "Contact 1",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n                aria-describedby={`${formId}-message-description`}\n              />\n              <FieldDescription id={`${formId}-message-description`}>\n                {form.messageDescription}\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <li class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          <Button\n            as=\"span\"\n            variant=\"secondary\"\n            size=\"icon\"\n            class=\"text-primary\"\n            aria-hidden=\"true\"\n          >\n            <Icon name={item.icon} />\n          </Button>\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          {item.href != null ? (\n            <a\n              href={item.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n            >\n              {item.description}\n            </a>\n          ) : (\n            <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n              {item.description}\n            </p>\n          )}\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n  {Astro.slots.has(\"default\") && (\n    <SectionContainer>\n      <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n        <slot />\n      </div>\n    </SectionContainer>\n  )}\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/contact-2.json b/public/r/styles/base-luma/contact-2.json
index 97172ad7d..ec5bb574f 100644
--- a/public/r/styles/base-luma/contact-2.json
+++ b/public/r/styles/base-luma/contact-2.json
@@ -3,22 +3,15 @@
   "name": "contact-2",
   "title": "Contact 2",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    title: string\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1fr)_22rem] lg:items-start\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <div class=\"mb-6\">\n          <h3 class=\"text-lg font-medium\">{form.title}</h3>\n        </div>\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n\n    <div class=\"flex flex-col gap-3\">\n      {contactItems.map((item) => (\n        <div class=\"flex gap-4 rounded-xl border p-4\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <div class=\"flex flex-col gap-1\">\n            <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1fr)_22rem] lg:items-start\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {Astro.slots.has(\"default\") && (\n        <div class=\"rounded-xl border p-6\">\n          <slot />\n        </div>\n      )}\n    </div>\n\n    <ul class=\"flex flex-col gap-3\">\n      {contactItems.map((item) => (\n        <li class=\"flex gap-4 rounded-xl border p-4\">\n          <Button\n            as=\"span\"\n            variant=\"secondary\"\n            size=\"icon\"\n            class=\"text-primary shrink-0\"\n            aria-hidden=\"true\"\n          >\n            <Icon name={item.icon} />\n          </Button>\n          <div class=\"flex flex-col gap-1\">\n            <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n            {item.href != null ? (\n              <a\n                href={item.href}\n                class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n              >\n                {item.description}\n              </a>\n            ) : (\n              <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n                {item.description}\n              </p>\n            )}\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/contact-3.json b/public/r/styles/base-luma/contact-3.json
index 15a42d48f..b50f57b6e 100644
--- a/public/r/styles/base-luma/contact-3.json
+++ b/public/r/styles/base-luma/contact-3.json
@@ -3,22 +3,15 @@
   "name": "contact-3",
   "title": "Contact 3",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <li class=\"flex gap-4\">\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n            <div class=\"flex min-w-0 flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              {item.href != null ? (\n                <a\n                  href={item.href}\n                  class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n                >\n                  {item.description}\n                </a>\n              ) : (\n                <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n                  {item.description}\n                </p>\n              )}\n            </div>\n          </li>\n        ))}\n      </ul>\n      {Astro.slots.has(\"default\") && (\n        <div class=\"rounded-xl border p-6\">\n          <slot />\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/content-1.json b/public/r/styles/base-luma/content-1.json
index 37cc98379..45ceca637 100644
--- a/public/r/styles/base-luma/content-1.json
+++ b/public/r/styles/base-luma/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-3 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-3 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/content-2.json b/public/r/styles/base-luma/content-2.json
index 693b5d9bb..7675cc352 100644
--- a/public/r/styles/base-luma/content-2.json
+++ b/public/r/styles/base-luma/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/content-3.json b/public/r/styles/base-luma/content-3.json
index fdc0b7afd..cf3b62853 100644
--- a/public/r/styles/base-luma/content-3.json
+++ b/public/r/styles/base-luma/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/content-4.json b/public/r/styles/base-luma/content-4.json
index 4dd1cd6f3..fcce4f136 100644
--- a/public/r/styles/base-luma/content-4.json
+++ b/public/r/styles/base-luma/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 80rem) 800px, (min-width: 64rem) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/cta-1.json b/public/r/styles/base-luma/cta-1.json
index 880fa60eb..10cbc452e 100644
--- a/public/r/styles/base-luma/cta-1.json
+++ b/public/r/styles/base-luma/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/cta-2.json b/public/r/styles/base-luma/cta-2.json
index 05cfb2687..347395042 100644
--- a/public/r/styles/base-luma/cta-2.json
+++ b/public/r/styles/base-luma/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/cta-3.json b/public/r/styles/base-luma/cta-3.json
index caf08c91a..d8a956197 100644
--- a/public/r/styles/base-luma/cta-3.json
+++ b/public/r/styles/base-luma/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/cta-4.json b/public/r/styles/base-luma/cta-4.json
index 2ed196c48..43d7c1bd8 100644
--- a/public/r/styles/base-luma/cta-4.json
+++ b/public/r/styles/base-luma/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/cta-5.json b/public/r/styles/base-luma/cta-5.json
index 39ff0c7bb..7a122cb13 100644
--- a/public/r/styles/base-luma/cta-5.json
+++ b/public/r/styles/base-luma/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/cta-6.json b/public/r/styles/base-luma/cta-6.json
index cbd7368fe..9aa3276fe 100644
--- a/public/r/styles/base-luma/cta-6.json
+++ b/public/r/styles/base-luma/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/cta-7.json b/public/r/styles/base-luma/cta-7.json
index 86813e6c0..b6755b388 100644
--- a/public/r/styles/base-luma/cta-7.json
+++ b/public/r/styles/base-luma/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-muted-foreground text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription class=\"text-foreground/80\">\n        {description}\n      </SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-foreground/80 text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/cta-8.json b/public/r/styles/base-luma/cta-8.json
index eaac34d78..7acaffa25 100644
--- a/public/r/styles/base-luma/cta-8.json
+++ b/public/r/styles/base-luma/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col gap-8 before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/doc-1.json b/public/r/styles/base-luma/doc-1.json
index 9c98b34f9..49048e0e5 100644
--- a/public/r/styles/base-luma/doc-1.json
+++ b/public/r/styles/base-luma/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"flex flex-col gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/faqs-1.json b/public/r/styles/base-luma/faqs-1.json
index 92d59430a..fe0decf6f 100644
--- a/public/r/styles/base-luma/faqs-1.json
+++ b/public/r/styles/base-luma/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/faqs-3.json b/public/r/styles/base-luma/faqs-3.json
index a0d634566..cd5d5197c 100644
--- a/public/r/styles/base-luma/faqs-3.json
+++ b/public/r/styles/base-luma/faqs-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/faqs-4.json b/public/r/styles/base-luma/faqs-4.json
index 4fe0db0bb..19de0d927 100644
--- a/public/r/styles/base-luma/faqs-4.json
+++ b/public/r/styles/base-luma/faqs-4.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst { class: className, title, faqs, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center\">\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <SectionTitle>{title}</SectionTitle>\n      <div class=\"mt-10\">\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst { class: className, title, faqs, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center\">\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <SectionTitle>{title}</SectionTitle>\n      <div class=\"mt-10\">\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/features-1.json b/public/r/styles/base-luma/features-1.json
index 585c6b7f2..61240563f 100644
--- a/public/r/styles/base-luma/features-1.json
+++ b/public/r/styles/base-luma/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <li class=\"flex flex-col gap-4 rounded-xl border p-6\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.link && (\n            <a\n              href={feature.link.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/features-2.json b/public/r/styles/base-luma/features-2.json
index 467338413..a15ebe78c 100644
--- a/public/r/styles/base-luma/features-2.json
+++ b/public/r/styles/base-luma/features-2.json
@@ -3,9 +3,6 @@
   "name": "features-2",
   "title": "Features 2",
   "description": "Feature section layouts for product narratives, launch pages, and capability overviews.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/icon",
     "@fulldev/section"
@@ -13,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li class=\"bg-background relative flex flex-col items-center gap-4 p-7 text-center\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 ring-inset\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/features-3.json b/public/r/styles/base-luma/features-3.json
index 83402f1a0..0f7902b8c 100644
--- a/public/r/styles/base-luma/features-3.json
+++ b/public/r/styles/base-luma/features-3.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex items-center gap-5 rounded-xl border p-4 transition-colors\">\n          <Image\n            src={feature.image.src}\n            alt={feature.image.alt}\n            class=\"size-20 shrink-0 rounded-lg object-cover\"\n            widths={[160, 320]}\n            sizes=\"80px\"\n          />\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-5 rounded-xl border p-4\">\n          <Image\n            src={feature.image.src}\n            alt={feature.image.alt}\n            class=\"size-20 shrink-0 rounded-lg object-cover\"\n            widths={[160, 320]}\n            sizes=\"80px\"\n          />\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/features-4.json b/public/r/styles/base-luma/features-4.json
index 6cadcba43..437798358 100644
--- a/public/r/styles/base-luma/features-4.json
+++ b/public/r/styles/base-luma/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <ul class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <li class=\"flex flex-col gap-4 rounded-xl border p-6\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.link && (\n              <a\n                href={feature.link.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.link.label}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </li>\n        ))}\n      </ul>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/features-5.json b/public/r/styles/base-luma/features-5.json
index 61eba406f..420643adf 100644
--- a/public/r/styles/base-luma/features-5.json
+++ b/public/r/styles/base-luma/features-5.json
@@ -3,9 +3,6 @@
   "name": "features-5",
   "title": "Features 5",
   "description": "Feature section layouts for product narratives, launch pages, and capability overviews.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/icon",
     "@fulldev/section"
@@ -13,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li class=\"flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/features-6.json b/public/r/styles/base-luma/features-6.json
index d21ff5c93..9b01c7537 100644
--- a/public/r/styles/base-luma/features-6.json
+++ b/public/r/styles/base-luma/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/footer-1.json b/public/r/styles/base-luma/footer-1.json
index 7ac3e8331..6e75db4ac 100644
--- a/public/r/styles/base-luma/footer-1.json
+++ b/public/r/styles/base-luma/footer-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer class=\"flex flex-col gap-8\">\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <h2 class=\"text-sm font-medium\">{column.title}</h2>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/footer-2.json b/public/r/styles/base-luma/footer-2.json
index 217f595bb..d5fbcdfec 100644
--- a/public/r/styles/base-luma/footer-2.json
+++ b/public/r/styles/base-luma/footer-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      <div class=\"flex items-center justify-center gap-3\">\n        {socials.map((social) => (\n          <a\n            href={social.href}\n            class=\"text-muted-foreground hover:text-foreground transition-colors\"\n            aria-label={social.label}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n          >\n            <Icon name={social.icon} href={social.href} class=\"size-4\" />\n          </a>\n        ))}\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      {socials.length > 0 && (\n        <div class=\"flex items-center justify-center gap-3\">\n          {socials.map((social) => (\n            <a\n              href={social.href}\n              class=\"text-muted-foreground hover:text-foreground transition-colors\"\n              aria-label={social.label}\n            >\n              <Icon name={social.icon} href={social.href} class=\"size-4\" />\n            </a>\n          ))}\n        </div>\n      )}\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/footer-3.json b/public/r/styles/base-luma/footer-3.json
index b5bc278e9..27d6eb84e 100644
--- a/public/r/styles/base-luma/footer-3.json
+++ b/public/r/styles/base-luma/footer-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer class=\"flex flex-col gap-8\">\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <h2 class=\"text-sm font-medium\">{column.title}</h2>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/header-1.json b/public/r/styles/base-luma/header-1.json
index df82b249a..3519b5b28 100644
--- a/public/r/styles/base-luma/header-1.json
+++ b/public/r/styles/base-luma/header-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/header-2.json b/public/r/styles/base-luma/header-2.json
index 8b36cd0c2..61d105855 100644
--- a/public/r/styles/base-luma/header-2.json
+++ b/public/r/styles/base-luma/header-2.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/header-3.json b/public/r/styles/base-luma/header-3.json
index 45ef24dbf..6840b6313 100644
--- a/public/r/styles/base-luma/header-3.json
+++ b/public/r/styles/base-luma/header-3.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/header-4.json b/public/r/styles/base-luma/header-4.json
index 4e6f46ac7..4048d78d5 100644
--- a/public/r/styles/base-luma/header-4.json
+++ b/public/r/styles/base-luma/header-4.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/header-5.json b/public/r/styles/base-luma/header-5.json
index c6a7b4990..3fe98b775 100644
--- a/public/r/styles/base-luma/header-5.json
+++ b/public/r/styles/base-luma/header-5.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/header.json b/public/r/styles/base-luma/header.json
index 50f670633..b21aca65b 100644
--- a/public/r/styles/base-luma/header.json
+++ b/public/r/styles/base-luma/header.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/header/header.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2.5 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-4xl bg-background shadow-md ring-1 ring-foreground/5 dark:ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2.5 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-4xl bg-background shadow-md ring-1 ring-foreground/5 dark:ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  \"data-slot\": dataSlot = \"header\",\n  ...props\n} = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot={dataSlot}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/hero-1.json b/public/r/styles/base-luma/hero-1.json
index 74dc8b92d..3001b9ff4 100644
--- a/public/r/styles/base-luma/hero-1.json
+++ b/public/r/styles/base-luma/hero-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n      {badge.label}\n    </Badge>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge?: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    {badge && (\n      <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n        {badge.label}\n      </Badge>\n    )}\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/hero-10.json b/public/r/styles/base-luma/hero-10.json
index 96ed3c089..770bb0a86 100644
--- a/public/r/styles/base-luma/hero-10.json
+++ b/public/r/styles/base-luma/hero-10.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-10.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/hero-11.json b/public/r/styles/base-luma/hero-11.json
index 86a7f5e03..09a801205 100644
--- a/public/r/styles/base-luma/hero-11.json
+++ b/public/r/styles/base-luma/hero-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-11.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/hero-12.json b/public/r/styles/base-luma/hero-12.json
index a88805751..77a37b010 100644
--- a/public/r/styles/base-luma/hero-12.json
+++ b/public/r/styles/base-luma/hero-12.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-12.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/hero-13.json b/public/r/styles/base-luma/hero-13.json
index f25d55373..f1f708613 100644
--- a/public/r/styles/base-luma/hero-13.json
+++ b/public/r/styles/base-luma/hero-13.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-13.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 900px, (min-width: 64rem) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/hero-2.json b/public/r/styles/base-luma/hero-2.json
index 672b023de..872bdcf70 100644
--- a/public/r/styles/base-luma/hero-2.json
+++ b/public/r/styles/base-luma/hero-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/hero-3.json b/public/r/styles/base-luma/hero-3.json
index 03cde7001..dcd3d0d23 100644
--- a/public/r/styles/base-luma/hero-3.json
+++ b/public/r/styles/base-luma/hero-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/hero-4.json b/public/r/styles/base-luma/hero-4.json
index ccdf499cf..b0e278928 100644
--- a/public/r/styles/base-luma/hero-4.json
+++ b/public/r/styles/base-luma/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/hero-5.json b/public/r/styles/base-luma/hero-5.json
index a11173eff..1b95a5469 100644
--- a/public/r/styles/base-luma/hero-5.json
+++ b/public/r/styles/base-luma/hero-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/hero-6.json b/public/r/styles/base-luma/hero-6.json
index f458c5879..b60078e9c 100644
--- a/public/r/styles/base-luma/hero-6.json
+++ b/public/r/styles/base-luma/hero-6.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/hero-7.json b/public/r/styles/base-luma/hero-7.json
index e417ccade..75d00053f 100644
--- a/public/r/styles/base-luma/hero-7.json
+++ b/public/r/styles/base-luma/hero-7.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 750px, (min-width: 64rem) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/hero-8.json b/public/r/styles/base-luma/hero-8.json
index a3db6ba64..2ed1b607f 100644
--- a/public/r/styles/base-luma/hero-8.json
+++ b/public/r/styles/base-luma/hero-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-8.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 936px, (min-width: 64rem) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/hero-9.json b/public/r/styles/base-luma/hero-9.json
index 22397aa77..3fc4a2faa 100644
--- a/public/r/styles/base-luma/hero-9.json
+++ b/public/r/styles/base-luma/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/links-2.json b/public/r/styles/base-luma/links-2.json
index 9e1d20ae8..ed6e31559 100644
--- a/public/r/styles/base-luma/links-2.json
+++ b/public/r/styles/base-luma/links-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/links-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/logos-1.json b/public/r/styles/base-luma/logos-1.json
index de017ff6a..de62b4b00 100644
--- a/public/r/styles/base-luma/logos-1.json
+++ b/public/r/styles/base-luma/logos-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <li>\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground transition-colors focus-visible:text-foreground\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/logos-2.json b/public/r/styles/base-luma/logos-2.json
index 3d3960693..48760e394 100644
--- a/public/r/styles/base-luma/logos-2.json
+++ b/public/r/styles/base-luma/logos-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n  labels: {\n    play: string\n    pause: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  brands,\n  labels,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-4 [--marquee-gap:--spacing(12)]\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    <MarqueeContent class=\"text-muted-foreground mask-x-from-90%\">\n      {brands.map((brand) => (\n        <MarqueeItem class=\"flex items-center\">\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground focus-visible:text-foreground transition-colors\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </MarqueeItem>\n      ))}\n    </MarqueeContent>\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/logos-3.json b/public/r/styles/base-luma/logos-3.json
index f0f2762ed..4824f14cc 100644
--- a/public/r/styles/base-luma/logos-3.json
+++ b/public/r/styles/base-luma/logos-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"py-12 lg:py-16\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"text-muted-foreground flex flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"py-12 lg:py-16\", className)} {...props}>\n  <SectionContainer>\n    <ul class=\"text-muted-foreground flex flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <li>\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground transition-colors focus-visible:text-foreground\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/marquee.json b/public/r/styles/base-luma/marquee.json
index c932b246a..c0543ae7f 100644
--- a/public/r/styles/base-luma/marquee.json
+++ b/public/r/styles/base-luma/marquee.json
@@ -2,16 +2,39 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "marquee",
   "title": "Marquee",
-  "description": "A continuous scrolling animation component for displaying content in a loop.",
+  "description": "A continuously scrolling row of content, with a pause control and a static fallback.",
+  "dependencies": [
+    "embla-carousel@8.6.0",
+    "embla-carousel-auto-scroll@8.6.0",
+    "@lucide/astro"
+  ],
+  "registryDependencies": [
+    "@fulldev/button"
+  ],
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  data-slot={dataSlot}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({ viewport }))\n      // Moving content needs a way to pause it, so a marquee without a toggle\n      // stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no focusable content of its own.\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = row.viewport.querySelector(\n          \"a[href], button, input, select, textarea, [tabindex]\"\n        )\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || toggles.length === 0) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-content.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  reverse?: boolean\n}\n\nconst {\n  class: className,\n  reverse = false,\n  \"data-slot\": dataSlot = \"marquee-content\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee-viewport\n  data-reverse={reverse ? \"\" : undefined}\n  class={cn(\n    \"focus-visible:ring-ring/50 overflow-x-auto outline-none contain-inline-size focus-visible:ring-3 data-active:overflow-hidden\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"-ms-[var(--marquee-gap,--spacing(4))] flex justify-center-safe\">\n    <slot />\n  </div>\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-item.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee-item\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 ps-[var(--marquee-gap,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-toggle.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  hidden\n  data-slot={dataSlot}\n  data-marquee-toggle\n  data-state=\"playing\"\n  data-play-label={playLabel}\n  data-pause-label={pauseLabel}\n  data-variant={variant}\n  data-size={size}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"group/marquee-toggle\",\n    className\n  )}\n  {...props}\n>\n  <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n  <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n  <span class=\"sr-only\" data-marquee-label>\n    {pauseLabel}\n  </span>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/marquee/index.ts",
-      "content": "export { default as Marquee } from \"./marquee.astro\"\n",
+      "content": "export { default as Marquee } from \"./marquee.astro\"\nexport { default as MarqueeContent } from \"./marquee-content.astro\"\nexport { default as MarqueeItem } from \"./marquee-item.astro\"\nexport { default as MarqueeToggle } from \"./marquee-toggle.astro\"\n",
       "type": "registry:ui"
     }
   ],
diff --git a/public/r/styles/base-luma/price.json b/public/r/styles/base-luma/price.json
index f96ddbe13..adba4af02 100644
--- a/public/r/styles/base-luma/price.json
+++ b/public/r/styles/base-luma/price.json
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/price/price-value.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-3xl bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  parseSinglePriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n    discountLabel?: string\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  discountLabel = \"Save\",\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst currentValue = parseSinglePriceValue(price)\nconst compareAtValue = parseSinglePriceValue(compareAt)\n// A compare-at price only shows when it is higher than the price.\nconst formattedCompareAt =\n  currentValue !== null &&\n  compareAtValue !== null &&\n  compareAtValue <= currentValue\n    ? null\n    : formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && formattedCompareAt !== null\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\n---\n\n{formattedPrice !== null && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt !== null && (\n      <del class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </del>\n    )}\n    {formattedDiscount !== null && (\n      <span class=\"rounded-3xl bg-muted px-2 py-0.5 text-xs font-medium text-foreground\">\n        {discountLabel} {formattedDiscount}\n      </span>\n    )}\n  </span>\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/pricing-1.json b/public/r/styles/base-luma/pricing-1.json
index 69ddbb891..2649f08fb 100644
--- a/public/r/styles/base-luma/pricing-1.json
+++ b/public/r/styles/base-luma/pricing-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  locale?: string\n  discountLabel?: string\n  plans: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  locale,\n  discountLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle as=\"h3\">{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price.value}\n                compareAt={plan.price.compareAt}\n                currency={plan.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{plan.price.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-start gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/pricing-2.json b/public/r/styles/base-luma/pricing-2.json
index 6f6a446c3..14d7ffde3 100644
--- a/public/r/styles/base-luma/pricing-2.json
+++ b/public/r/styles/base-luma/pricing-2.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={index === 0 ? \"outline\" : \"default\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  locale?: string\n  discountLabel?: string\n  plans: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  locale,\n  discountLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle as=\"h3\">{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price.value}\n                compareAt={plan.price.compareAt}\n                currency={plan.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{plan.price.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-start gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/pricing-3.json b/public/r/styles/base-luma/pricing-3.json
index cf14ce08c..5e767ea90 100644
--- a/public/r/styles/base-luma/pricing-3.json
+++ b/public/r/styles/base-luma/pricing-3.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  locale?: string\n  discountLabel?: string\n  offer: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  locale,\n  discountLabel,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle as=\"h3\">{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue\n            price={offer.price.value}\n            compareAt={offer.price.compareAt}\n            currency={offer.price.currency}\n            locale={locale}\n            discountLabel={discountLabel}\n          />\n          <PriceUnit>{offer.price.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/product-1.json b/public/r/styles/base-luma/product-1.json
index 74777c9da..d09a7114b 100644
--- a/public/r/styles/base-luma/product-1.json
+++ b/public/r/styles/base-luma/product-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/product-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    compareAt?: number\n    currency: string\n    unit: string\n  }\n  locale?: string\n  discountLabel?: string\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  locale,\n  discountLabel,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] w-full rounded-lg object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 608px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue\n          price={price.value}\n          compareAt={price.compareAt}\n          currency={price.currency}\n          locale={locale}\n          discountLabel={discountLabel}\n        />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/products-1.json b/public/r/styles/base-luma/products-1.json
index 551e0e726..2bc2c4508 100644
--- a/public/r/styles/base-luma/products-1.json
+++ b/public/r/styles/base-luma/products-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 302px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/products-2.json b/public/r/styles/base-luma/products-2.json
index 47d395874..34a441afd 100644
--- a/public/r/styles/base-luma/products-2.json
+++ b/public/r/styles/base-luma/products-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"max-w-2xl\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-3\">\n      {products.map((item) => (\n        <div>\n          <Separator />\n          <div class=\"flex flex-col gap-4 py-5 md:flex-row md:items-center md:justify-between\">\n            <div class=\"flex flex-col gap-1 md:max-w-lg\">\n              <h3 class=\"text-base font-medium\">{item.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-6\">\n                {item.description}\n              </p>\n            </div>\n            <Price>\n              <PriceValue\n                price={item.price.value}\n                currency={item.price.currency}\n              />\n              <PriceUnit>{item.price.unit}</PriceUnit>\n            </Price>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"max-w-2xl\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-3\">\n      {products.map((item) => (\n        <div>\n          <Separator />\n          <div class=\"flex flex-col gap-4 py-5 md:flex-row md:items-center md:justify-between\">\n            <div class=\"flex flex-col gap-1 md:max-w-lg\">\n              <h3 class=\"text-base font-medium\">{item.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-6\">\n                {item.description}\n              </p>\n            </div>\n            <Price>\n              <PriceValue\n                price={item.price.value}\n                compareAt={item.price.compareAt}\n                currency={item.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{item.price.unit}</PriceUnit>\n            </Price>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/products-3.json b/public/r/styles/base-luma/products-3.json
index 91921d696..0e6645c63 100644
--- a/public/r/styles/base-luma/products-3.json
+++ b/public/r/styles/base-luma/products-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card class=\"text-center\">\n          <CardHeader>\n            <Price class=\"justify-center\">\n              <PriceValue\n                class=\"text-3xl font-semibold\"\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n            </Price>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-2\">\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card class=\"text-center\">\n          <CardHeader>\n            <Price class=\"justify-center\">\n              <PriceValue\n                class=\"text-3xl font-semibold\"\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n            </Price>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-2\">\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/products-4.json b/public/r/styles/base-luma/products-4.json
index 5c64e3d1f..6885edb3d 100644
--- a/public/r/styles/base-luma/products-4.json
+++ b/public/r/styles/base-luma/products-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 405px, (min-width: 64rem) 33vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/products-5.json b/public/r/styles/base-luma/products-5.json
index c9420d383..9b0a09fb9 100644
--- a/public/r/styles/base-luma/products-5.json
+++ b/public/r/styles/base-luma/products-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"gap-0 overflow-hidden\">\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[3/4] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 302px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/registry.json b/public/r/styles/base-luma/registry.json
index 545d9123b..8ec1ef514 100644
--- a/public/r/styles/base-luma/registry.json
+++ b/public/r/styles/base-luma/registry.json
@@ -1064,16 +1064,36 @@
       "name": "marquee",
       "type": "registry:ui",
       "title": "Marquee",
-      "description": "A continuous scrolling animation component for displaying content in a loop.",
+      "description": "A continuously scrolling row of content, with a pause control and a static fallback.",
       "categories": [
         "ui"
       ],
       "docs": "https://ui.full.dev/components/marquee/",
+      "dependencies": [
+        "embla-carousel@8.6.0",
+        "embla-carousel-auto-scroll@8.6.0",
+        "@lucide/astro"
+      ],
+      "registryDependencies": [
+        "@fulldev/button"
+      ],
       "files": [
         {
           "path": "src/components/ui/marquee/marquee.astro",
           "type": "registry:ui"
         },
+        {
+          "path": "src/components/ui/marquee/marquee-content.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/marquee/marquee-item.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/marquee/marquee-toggle.astro",
+          "type": "registry:ui"
+        },
         {
           "path": "src/components/ui/marquee/index.ts",
           "type": "registry:ui"
@@ -2721,16 +2741,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -2749,16 +2762,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -2777,16 +2783,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -3248,9 +3247,6 @@
         "features"
       ],
       "docs": "https://ui.full.dev/blocks/features/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/icon",
         "@fulldev/section"
@@ -3314,9 +3310,6 @@
         "features"
       ],
       "docs": "https://ui.full.dev/blocks/features/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/icon",
         "@fulldev/section"
diff --git a/public/r/styles/base-luma/reviews-1.json b/public/r/styles/base-luma/reviews-1.json
index 1a508f17b..d4fae359c 100644
--- a/public/r/styles/base-luma/reviews-1.json
+++ b/public/r/styles/base-luma/reviews-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-1 flex-col\">\n            <figure class=\"flex flex-1 flex-col gap-4\">\n              <div class=\"flex items-center justify-between\">\n                <Rating value={item.rating} aria-label={item.ratingLabel} />\n                <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n              </div>\n              <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n                <p>{item.quote}</p>\n              </blockquote>\n              <figcaption class=\"mt-auto flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\" aria-hidden=\"true\">\n                  <AvatarImage src={item.image} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </figcaption>\n            </figure>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/reviews-2.json b/public/r/styles/base-luma/reviews-2.json
index d5ae29850..494ef9157 100644
--- a/public/r/styles/base-luma/reviews-2.json
+++ b/public/r/styles/base-luma/reviews-2.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <figure class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        <p>{featured.quote}</p>\n      </blockquote>\n      <figcaption class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\" aria-hidden=\"true\">\n          <AvatarImage src={featured.image} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </figcaption>\n    </figure>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <div class=\"flex flex-col\">\n          <Separator />\n          <figure class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n              <p>{item.quote}</p>\n            </blockquote>\n            <figcaption class=\"flex items-center gap-3 pt-1\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={item.image} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </figcaption>\n          </figure>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/reviews-3.json b/public/r/styles/base-luma/reviews-3.json
index eb084404f..5f405a1b8 100644
--- a/public/r/styles/base-luma/reviews-3.json
+++ b/public/r/styles/base-luma/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <figure class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                <p>{item.quote}</p>\n              </blockquote>\n              <figcaption class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\" aria-hidden=\"true\">\n                  <AvatarImage src={item.image} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </figcaption>\n            </figure>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/reviews-4.json b/public/r/styles/base-luma/reviews-4.json
index 03ac5fc3e..3c962de9f 100644
--- a/public/r/styles/base-luma/reviews-4.json
+++ b/public/r/styles/base-luma/reviews-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    play: string\n    pause: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst rows = [reviews.slice(0, half), reviews.slice(half)]\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-6\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    {rows\n      .filter((row) => row.length > 0)\n      .map((row, index) => (\n        <MarqueeContent reverse={index % 2 === 1} class=\"py-1\">\n          {row.map((item) => (\n            <MarqueeItem class=\"flex\">\n              <Card class=\"w-[22rem]\">\n                <CardContent class=\"flex flex-1 flex-col\">\n                  <figure class=\"flex flex-1 flex-col gap-3\">\n                    <Rating value={item.rating} aria-label={item.ratingLabel} />\n                    <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n                      <p>{item.quote}</p>\n                    </blockquote>\n                    <figcaption class=\"mt-auto flex items-center gap-3 pt-1\">\n                      <Avatar aria-hidden=\"true\">\n                        <AvatarImage src={item.image} />\n                        <AvatarFallback>{item.initials}</AvatarFallback>\n                      </Avatar>\n                      <div>\n                        <p class=\"text-foreground text-sm font-medium\">\n                          {item.name}\n                        </p>\n                        <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                      </div>\n                    </figcaption>\n                  </figure>\n                </CardContent>\n              </Card>\n            </MarqueeItem>\n          ))}\n        </MarqueeContent>\n      ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/reviews-5.json b/public/r/styles/base-luma/reviews-5.json
index 8b3458106..4f438bd1b 100644
--- a/public/r/styles/base-luma/reviews-5.json
+++ b/public/r/styles/base-luma/reviews-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    play: string\n    pause: string\n  }\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst rows = [\n  reviews.slice(0, third),\n  reviews.slice(third, third * 2),\n  reviews.slice(third * 2),\n]\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-5\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    {rows\n      .filter((row) => row.length > 0)\n      .map((row, index) => (\n        <MarqueeContent reverse={index % 2 === 1} class=\"py-1\">\n          {row.map((item) => (\n            <MarqueeItem class=\"flex\">\n              <figure class=\"bg-muted/50 flex w-[26rem] flex-col gap-4 rounded-2xl p-6\">\n                <figcaption class=\"flex items-center justify-between gap-3\">\n                  <div class=\"flex items-center gap-3\">\n                    <Avatar size=\"lg\" aria-hidden=\"true\">\n                      <AvatarImage src={item.image} />\n                      <AvatarFallback>{item.initials}</AvatarFallback>\n                    </Avatar>\n                    <div>\n                      <p class=\"text-foreground text-sm font-semibold\">\n                        {item.name}\n                      </p>\n                      <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                    </div>\n                  </div>\n                  <Rating value={item.rating} aria-label={item.ratingLabel} />\n                </figcaption>\n                <div class=\"flex gap-2.5\">\n                  <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n                  <blockquote class=\"text-foreground/80 text-sm leading-relaxed\">\n                    <p>{item.quote}</p>\n                  </blockquote>\n                </div>\n              </figure>\n            </MarqueeItem>\n          ))}\n        </MarqueeContent>\n      ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/section.json b/public/r/styles/base-luma/section.json
index b35647284..49ac99f7b 100644
--- a/public/r/styles/base-luma/section.json
+++ b/public/r/styles/base-luma/section.json
@@ -6,12 +6,12 @@
   "files": [
     {
       "path": "src/components/ui/section/section.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-16 py-[var(--section-padding,--spacing(20))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-20 rounded-4xl bg-background shadow-md ring-1 ring-foreground/5 dark:ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-16 py-[var(--section-padding,--spacing(20))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-20 rounded-4xl bg-background shadow-md ring-1 ring-foreground/5 dark:ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  \"data-slot\": dataSlot = \"section\",\n  ...props\n} = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot={dataSlot}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/section/section-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"section-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] flex-col gap-8 px-[var(--gutter,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"section-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"relative mx-auto w-full max-w-[var(--container,var(--container-7xl))] px-[var(--gutter,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/services-1.json b/public/r/styles/base-luma/services-1.json
index 4d5ac713e..0ad551b55 100644
--- a/public/r/styles/base-luma/services-1.json
+++ b/public/r/styles/base-luma/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href != null && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs\",\n              service.href != null && \"transition-shadow hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? \"\"}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 80rem) 294px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/services-2.json b/public/r/styles/base-luma/services-2.json
index f2b3db6bc..8c24f803c 100644
--- a/public/r/styles/base-luma/services-2.json
+++ b/public/r/styles/base-luma/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"grid items-center gap-6 rounded-xl border p-4 shadow-xs md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/services-3.json b/public/r/styles/base-luma/services-3.json
index f259c104f..53b390522 100644
--- a/public/r/styles/base-luma/services-3.json
+++ b/public/r/styles/base-luma/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"absolute inset-0 -z-10 size-full object-cover\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 80rem) 612px, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/services-4.json b/public/r/styles/base-luma/services-4.json
index d357efabf..a848dbe59 100644
--- a/public/r/styles/base-luma/services-4.json
+++ b/public/r/styles/base-luma/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 294px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.link && (\n            <a\n              href={service.link.href}\n              class=\"text-primary inline-flex w-fit items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline\"\n            >\n              {service.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/services-5.json b/public/r/styles/base-luma/services-5.json
index def369794..2458133c0 100644
--- a/public/r/styles/base-luma/services-5.json
+++ b/public/r/styles/base-luma/services-5.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background relative flex flex-col gap-4 p-7\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 ring-inset\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.link && (\n            <a\n              href={service.link.href}\n              class=\"text-primary mt-auto inline-flex w-fit items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline\"\n            >\n              {service.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/services-6.json b/public/r/styles/base-luma/services-6.json
index 70206a046..82f8c027b 100644
--- a/public/r/styles/base-luma/services-6.json
+++ b/public/r/styles/base-luma/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 436px, (min-width: 64rem) 35vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/services-7.json b/public/r/styles/base-luma/services-7.json
index 623952170..bbc7e0404 100644
--- a/public/r/styles/base-luma/services-7.json
+++ b/public/r/styles/base-luma/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 1024px) 66vw, 100vw\"\n                  : \"(min-width: 1024px) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs\",\n              service.href != null && \"transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? \"\"}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 80rem) 824px, (min-width: 64rem) 66vw, 100vw\"\n                  : \"(min-width: 80rem) 400px, (min-width: 64rem) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/sidebar-1.json b/public/r/styles/base-luma/sidebar-1.json
index 3476f325b..4ec41b325 100644
--- a/public/r/styles/base-luma/sidebar-1.json
+++ b/public/r/styles/base-luma/sidebar-1.json
@@ -22,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebar: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar\n    class={cn(\"\", className)}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebar} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={labels.github}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  currentPath: string\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    sidebar: string\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebarToggle: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  currentPath: rawCurrentPath,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n  ...props\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(rawCurrentPath)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider {...props}>\n  <Sidebar\n    aria-label={labels.sidebar}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebarToggle} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            <Icon name=\"github\" />\n            <span class=\"sr-only\">{labels.github}</span>\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/sidebar.json b/public/r/styles/base-luma/sidebar.json
index c5a69d7d5..2a2ea1b41 100644
--- a/public/r/styles/base-luma/sidebar.json
+++ b/public/r/styles/base-luma/sidebar.json
@@ -24,7 +24,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-2xl group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <aside\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-2xl group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </aside>\n    </div>\n  </>\n)}\n",
       "type": "registry:ui"
     },
     {
@@ -34,7 +34,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar-rail.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst { class: className, type = \"button\", ...props } = Astro.props\n---\n\n<button\n  data-sidebar=\"rail\"\n  data-slot=\"sidebar-rail\"\n  aria-label=\"Toggle Sidebar\"\n  tabindex={-1}\n  title=\"Toggle Sidebar\"\n  type={type}\n  class={cn(\n    \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n    \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n    \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n    \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n    \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n    \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n    className\n  )}\n  {...props}\n></button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  type = \"button\",\n  \"aria-label\": ariaLabel = \"Toggle Sidebar\",\n  title = ariaLabel,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-sidebar=\"rail\"\n  data-slot=\"sidebar-rail\"\n  aria-label={ariaLabel}\n  tabindex={-1}\n  title={title}\n  type={type}\n  class={cn(\n    \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n    \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n    \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n    \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n    \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n    \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n    className\n  )}\n  {...props}\n></button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/article-1.json b/public/r/styles/base-lyra/article-1.json
index c45df6988..a864d2860 100644
--- a/public/r/styles/base-lyra/article-1.json
+++ b/public/r/styles/base-lyra/article-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/article-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"max-w-2xl\">\n    <article class=\"flex flex-col gap-8\">\n      <header class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n            {title}\n          </h1>\n          <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n            {description}\n          </p>\n        </div>\n        <div class=\"flex items-center gap-3\">\n          <Avatar size=\"lg\" aria-hidden=\"true\">\n            <AvatarImage src={author.image} />\n            <AvatarFallback>{author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n          </div>\n        </div>\n      </header>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 42rem) 42rem, 100vw\"\n        loading=\"eager\"\n        fetchpriority=\"high\"\n      />\n      <div class=\"flex flex-col gap-6 text-base leading-8\">\n        <slot />\n      </div>\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/article-2.json b/public/r/styles/base-lyra/article-2.json
index 6511245f3..c0a3f5f9a 100644
--- a/public/r/styles/base-lyra/article-2.json
+++ b/public/r/styles/base-lyra/article-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/article-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"max-w-2xl\">\n    <article class=\"flex flex-col gap-8\">\n      <header class=\"flex flex-col items-center gap-6 text-center\">\n        <div class=\"flex flex-col gap-4\">\n          <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n            {title}\n          </h1>\n          <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n            {description}\n          </p>\n        </div>\n        <div class=\"flex items-center gap-3\">\n          <Avatar size=\"lg\" aria-hidden=\"true\">\n            <AvatarImage src={author.image} />\n            <AvatarFallback>{author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col text-left\">\n            <p class=\"text-sm font-medium\">\n              {author.name}{\" \"}\n              <span class=\"text-muted-foreground font-normal\">\n                &middot; {author.date}\n              </span>\n            </p>\n            <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n          </div>\n        </div>\n      </header>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 42rem) 42rem, 100vw\"\n        loading=\"eager\"\n        fetchpriority=\"high\"\n      />\n      <div class=\"flex flex-col gap-6 text-base leading-8\">\n        <slot />\n      </div>\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/articles-1.json b/public/r/styles/base-lyra/articles-1.json
index 30aa52bd2..2c9f3ed3b 100644
--- a/public/r/styles/base-lyra/articles-1.json
+++ b/public/r/styles/base-lyra/articles-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/articles-2.json b/public/r/styles/base-lyra/articles-2.json
index a9d78a9f5..6e60d3f18 100644
--- a/public/r/styles/base-lyra/articles-2.json
+++ b/public/r/styles/base-lyra/articles-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class={cn(\n        \"grid gap-6 rounded-xl lg:grid-cols-2 lg:items-center lg:pr-4\",\n        featured.href != null &&\n          \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n      )}\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 80rem) 616px, (min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar aria-hidden=\"true\">\n            <AvatarImage src={featured.author.image} />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/articles-3.json b/public/r/styles/base-lyra/articles-3.json
index e4182724a..bd0837d65 100644
--- a/public/r/styles/base-lyra/articles-3.json
+++ b/public/r/styles/base-lyra/articles-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"bg-muted/50 flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/articles-4.json b/public/r/styles/base-lyra/articles-4.json
index b0c908073..ddff63354 100644
--- a/public/r/styles/base-lyra/articles-4.json
+++ b/public/r/styles/base-lyra/articles-4.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl border p-6\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/blocks-1.json b/public/r/styles/base-lyra/blocks-1.json
index a0da615ca..8719d1a46 100644
--- a/public/r/styles/base-lyra/blocks-1.json
+++ b/public/r/styles/base-lyra/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"flex flex-col gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/carousel.json b/public/r/styles/base-lyra/carousel.json
index b8fe99821..98dcc9dde 100644
--- a/public/r/styles/base-lyra/carousel.json
+++ b/public/r/styles/base-lyra/carousel.json
@@ -13,27 +13,27 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  \"data-slot\": dataSlot = \"carousel\",\n  // A named section is a region landmark. Without a name it would have no\n  // role, so it becomes a group, the other container role the APG carousel\n  // allows.\n  role = Astro.props[\"aria-label\"] || Astro.props[\"aria-labelledby\"]\n    ? undefined\n    : \"group\",\n  ...props\n} = Astro.props\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot={dataSlot}\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={role}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts. The data-carousel-* markers stay\n  // in place when a caller overrides data-slot.\n  const rootSelector = \"[data-carousel-options]\"\n  const getParts = <T extends Element>(root: CarouselRoot, part: string) =>\n    [...root.querySelectorAll<T>(`[data-carousel-${part}]`)].filter(\n      (element) => element.closest(rootSelector) === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(rootSelector)) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"viewport\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"previous\")\n      const next = getParts<HTMLButtonElement>(root, \"next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest(rootSelector) !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-content.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div class=\"overflow-hidden\" data-slot=\"carousel-content\">\n  <div\n    data-slot=\"carousel-container\"\n    class={cn(\n      \"flex [touch-action:pan-y_pinch-zoom]\",\n      \"group-data-[orientation=vertical]/carousel:-mt-4 group-data-[orientation=vertical]/carousel:[touch-action:pan-x_pinch-zoom] group-data-[orientation=vertical]/carousel:flex-col\",\n      \"group-data-[orientation=horizontal]/carousel:-ml-4\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"carousel-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class=\"overflow-hidden\"\n  data-slot=\"carousel-content\"\n  data-carousel-viewport\n>\n  <div\n    data-slot={dataSlot}\n    class={cn(\n      \"flex [touch-action:pan-y_pinch-zoom]\",\n      \"group-data-[orientation=vertical]/carousel:-mt-4 group-data-[orientation=vertical]/carousel:[touch-action:pan-x_pinch-zoom] group-data-[orientation=vertical]/carousel:flex-col\",\n      \"group-data-[orientation=horizontal]/carousel:-ml-4\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  \"data-slot\": dataSlot = \"carousel-item\",\n  role = \"group\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  role={role}\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-next.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  \"data-slot\": dataSlot = \"carousel-next\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot={dataSlot}\n  data-carousel-next\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-previous.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  \"data-slot\": dataSlot = \"carousel-previous\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot={dataSlot}\n  data-carousel-previous\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/contact-1.json b/public/r/styles/base-lyra/contact-1.json
index 9af391672..cb4345f47 100644
--- a/public/r/styles/base-lyra/contact-1.json
+++ b/public/r/styles/base-lyra/contact-1.json
@@ -3,22 +3,15 @@
   "name": "contact-1",
   "title": "Contact 1",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n                aria-describedby={`${formId}-message-description`}\n              />\n              <FieldDescription id={`${formId}-message-description`}>\n                {form.messageDescription}\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <li class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          <Button\n            as=\"span\"\n            variant=\"secondary\"\n            size=\"icon\"\n            class=\"text-primary\"\n            aria-hidden=\"true\"\n          >\n            <Icon name={item.icon} />\n          </Button>\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          {item.href != null ? (\n            <a\n              href={item.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n            >\n              {item.description}\n            </a>\n          ) : (\n            <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n              {item.description}\n            </p>\n          )}\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n  {Astro.slots.has(\"default\") && (\n    <SectionContainer>\n      <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n        <slot />\n      </div>\n    </SectionContainer>\n  )}\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/contact-2.json b/public/r/styles/base-lyra/contact-2.json
index 97172ad7d..ec5bb574f 100644
--- a/public/r/styles/base-lyra/contact-2.json
+++ b/public/r/styles/base-lyra/contact-2.json
@@ -3,22 +3,15 @@
   "name": "contact-2",
   "title": "Contact 2",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    title: string\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1fr)_22rem] lg:items-start\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <div class=\"mb-6\">\n          <h3 class=\"text-lg font-medium\">{form.title}</h3>\n        </div>\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n\n    <div class=\"flex flex-col gap-3\">\n      {contactItems.map((item) => (\n        <div class=\"flex gap-4 rounded-xl border p-4\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <div class=\"flex flex-col gap-1\">\n            <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1fr)_22rem] lg:items-start\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {Astro.slots.has(\"default\") && (\n        <div class=\"rounded-xl border p-6\">\n          <slot />\n        </div>\n      )}\n    </div>\n\n    <ul class=\"flex flex-col gap-3\">\n      {contactItems.map((item) => (\n        <li class=\"flex gap-4 rounded-xl border p-4\">\n          <Button\n            as=\"span\"\n            variant=\"secondary\"\n            size=\"icon\"\n            class=\"text-primary shrink-0\"\n            aria-hidden=\"true\"\n          >\n            <Icon name={item.icon} />\n          </Button>\n          <div class=\"flex flex-col gap-1\">\n            <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n            {item.href != null ? (\n              <a\n                href={item.href}\n                class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n              >\n                {item.description}\n              </a>\n            ) : (\n              <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n                {item.description}\n              </p>\n            )}\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/contact-3.json b/public/r/styles/base-lyra/contact-3.json
index 15a42d48f..b50f57b6e 100644
--- a/public/r/styles/base-lyra/contact-3.json
+++ b/public/r/styles/base-lyra/contact-3.json
@@ -3,22 +3,15 @@
   "name": "contact-3",
   "title": "Contact 3",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <li class=\"flex gap-4\">\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n            <div class=\"flex min-w-0 flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              {item.href != null ? (\n                <a\n                  href={item.href}\n                  class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n                >\n                  {item.description}\n                </a>\n              ) : (\n                <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n                  {item.description}\n                </p>\n              )}\n            </div>\n          </li>\n        ))}\n      </ul>\n      {Astro.slots.has(\"default\") && (\n        <div class=\"rounded-xl border p-6\">\n          <slot />\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/content-1.json b/public/r/styles/base-lyra/content-1.json
index 37cc98379..45ceca637 100644
--- a/public/r/styles/base-lyra/content-1.json
+++ b/public/r/styles/base-lyra/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-3 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-3 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/content-2.json b/public/r/styles/base-lyra/content-2.json
index 693b5d9bb..7675cc352 100644
--- a/public/r/styles/base-lyra/content-2.json
+++ b/public/r/styles/base-lyra/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/content-3.json b/public/r/styles/base-lyra/content-3.json
index fdc0b7afd..cf3b62853 100644
--- a/public/r/styles/base-lyra/content-3.json
+++ b/public/r/styles/base-lyra/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/content-4.json b/public/r/styles/base-lyra/content-4.json
index 4dd1cd6f3..fcce4f136 100644
--- a/public/r/styles/base-lyra/content-4.json
+++ b/public/r/styles/base-lyra/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 80rem) 800px, (min-width: 64rem) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/cta-1.json b/public/r/styles/base-lyra/cta-1.json
index 880fa60eb..10cbc452e 100644
--- a/public/r/styles/base-lyra/cta-1.json
+++ b/public/r/styles/base-lyra/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/cta-2.json b/public/r/styles/base-lyra/cta-2.json
index 05cfb2687..347395042 100644
--- a/public/r/styles/base-lyra/cta-2.json
+++ b/public/r/styles/base-lyra/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/cta-3.json b/public/r/styles/base-lyra/cta-3.json
index caf08c91a..d8a956197 100644
--- a/public/r/styles/base-lyra/cta-3.json
+++ b/public/r/styles/base-lyra/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/cta-4.json b/public/r/styles/base-lyra/cta-4.json
index 2ed196c48..43d7c1bd8 100644
--- a/public/r/styles/base-lyra/cta-4.json
+++ b/public/r/styles/base-lyra/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/cta-5.json b/public/r/styles/base-lyra/cta-5.json
index 39ff0c7bb..7a122cb13 100644
--- a/public/r/styles/base-lyra/cta-5.json
+++ b/public/r/styles/base-lyra/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/cta-6.json b/public/r/styles/base-lyra/cta-6.json
index cbd7368fe..9aa3276fe 100644
--- a/public/r/styles/base-lyra/cta-6.json
+++ b/public/r/styles/base-lyra/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/cta-7.json b/public/r/styles/base-lyra/cta-7.json
index 86813e6c0..b6755b388 100644
--- a/public/r/styles/base-lyra/cta-7.json
+++ b/public/r/styles/base-lyra/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-muted-foreground text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription class=\"text-foreground/80\">\n        {description}\n      </SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-foreground/80 text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/cta-8.json b/public/r/styles/base-lyra/cta-8.json
index eaac34d78..7acaffa25 100644
--- a/public/r/styles/base-lyra/cta-8.json
+++ b/public/r/styles/base-lyra/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col gap-8 before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/doc-1.json b/public/r/styles/base-lyra/doc-1.json
index 9c98b34f9..49048e0e5 100644
--- a/public/r/styles/base-lyra/doc-1.json
+++ b/public/r/styles/base-lyra/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"flex flex-col gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/faqs-1.json b/public/r/styles/base-lyra/faqs-1.json
index 92d59430a..fe0decf6f 100644
--- a/public/r/styles/base-lyra/faqs-1.json
+++ b/public/r/styles/base-lyra/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/faqs-3.json b/public/r/styles/base-lyra/faqs-3.json
index a0d634566..cd5d5197c 100644
--- a/public/r/styles/base-lyra/faqs-3.json
+++ b/public/r/styles/base-lyra/faqs-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/faqs-4.json b/public/r/styles/base-lyra/faqs-4.json
index 4fe0db0bb..19de0d927 100644
--- a/public/r/styles/base-lyra/faqs-4.json
+++ b/public/r/styles/base-lyra/faqs-4.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst { class: className, title, faqs, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center\">\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <SectionTitle>{title}</SectionTitle>\n      <div class=\"mt-10\">\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst { class: className, title, faqs, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center\">\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <SectionTitle>{title}</SectionTitle>\n      <div class=\"mt-10\">\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/features-1.json b/public/r/styles/base-lyra/features-1.json
index 585c6b7f2..61240563f 100644
--- a/public/r/styles/base-lyra/features-1.json
+++ b/public/r/styles/base-lyra/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <li class=\"flex flex-col gap-4 rounded-xl border p-6\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.link && (\n            <a\n              href={feature.link.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/features-2.json b/public/r/styles/base-lyra/features-2.json
index 467338413..a15ebe78c 100644
--- a/public/r/styles/base-lyra/features-2.json
+++ b/public/r/styles/base-lyra/features-2.json
@@ -3,9 +3,6 @@
   "name": "features-2",
   "title": "Features 2",
   "description": "Feature section layouts for product narratives, launch pages, and capability overviews.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/icon",
     "@fulldev/section"
@@ -13,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li class=\"bg-background relative flex flex-col items-center gap-4 p-7 text-center\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 ring-inset\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/features-3.json b/public/r/styles/base-lyra/features-3.json
index 83402f1a0..0f7902b8c 100644
--- a/public/r/styles/base-lyra/features-3.json
+++ b/public/r/styles/base-lyra/features-3.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex items-center gap-5 rounded-xl border p-4 transition-colors\">\n          <Image\n            src={feature.image.src}\n            alt={feature.image.alt}\n            class=\"size-20 shrink-0 rounded-lg object-cover\"\n            widths={[160, 320]}\n            sizes=\"80px\"\n          />\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-5 rounded-xl border p-4\">\n          <Image\n            src={feature.image.src}\n            alt={feature.image.alt}\n            class=\"size-20 shrink-0 rounded-lg object-cover\"\n            widths={[160, 320]}\n            sizes=\"80px\"\n          />\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/features-4.json b/public/r/styles/base-lyra/features-4.json
index 6cadcba43..437798358 100644
--- a/public/r/styles/base-lyra/features-4.json
+++ b/public/r/styles/base-lyra/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <ul class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <li class=\"flex flex-col gap-4 rounded-xl border p-6\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.link && (\n              <a\n                href={feature.link.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.link.label}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </li>\n        ))}\n      </ul>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/features-5.json b/public/r/styles/base-lyra/features-5.json
index 61eba406f..420643adf 100644
--- a/public/r/styles/base-lyra/features-5.json
+++ b/public/r/styles/base-lyra/features-5.json
@@ -3,9 +3,6 @@
   "name": "features-5",
   "title": "Features 5",
   "description": "Feature section layouts for product narratives, launch pages, and capability overviews.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/icon",
     "@fulldev/section"
@@ -13,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li class=\"flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/features-6.json b/public/r/styles/base-lyra/features-6.json
index d21ff5c93..9b01c7537 100644
--- a/public/r/styles/base-lyra/features-6.json
+++ b/public/r/styles/base-lyra/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/footer-1.json b/public/r/styles/base-lyra/footer-1.json
index 7ac3e8331..6e75db4ac 100644
--- a/public/r/styles/base-lyra/footer-1.json
+++ b/public/r/styles/base-lyra/footer-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer class=\"flex flex-col gap-8\">\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <h2 class=\"text-sm font-medium\">{column.title}</h2>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/footer-2.json b/public/r/styles/base-lyra/footer-2.json
index 217f595bb..d5fbcdfec 100644
--- a/public/r/styles/base-lyra/footer-2.json
+++ b/public/r/styles/base-lyra/footer-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      <div class=\"flex items-center justify-center gap-3\">\n        {socials.map((social) => (\n          <a\n            href={social.href}\n            class=\"text-muted-foreground hover:text-foreground transition-colors\"\n            aria-label={social.label}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n          >\n            <Icon name={social.icon} href={social.href} class=\"size-4\" />\n          </a>\n        ))}\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      {socials.length > 0 && (\n        <div class=\"flex items-center justify-center gap-3\">\n          {socials.map((social) => (\n            <a\n              href={social.href}\n              class=\"text-muted-foreground hover:text-foreground transition-colors\"\n              aria-label={social.label}\n            >\n              <Icon name={social.icon} href={social.href} class=\"size-4\" />\n            </a>\n          ))}\n        </div>\n      )}\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/footer-3.json b/public/r/styles/base-lyra/footer-3.json
index b5bc278e9..27d6eb84e 100644
--- a/public/r/styles/base-lyra/footer-3.json
+++ b/public/r/styles/base-lyra/footer-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer class=\"flex flex-col gap-8\">\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <h2 class=\"text-sm font-medium\">{column.title}</h2>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/header-1.json b/public/r/styles/base-lyra/header-1.json
index 04e97f870..0d30a4b82 100644
--- a/public/r/styles/base-lyra/header-1.json
+++ b/public/r/styles/base-lyra/header-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/header-2.json b/public/r/styles/base-lyra/header-2.json
index bf90c1ae2..de9ea7e7e 100644
--- a/public/r/styles/base-lyra/header-2.json
+++ b/public/r/styles/base-lyra/header-2.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/header-3.json b/public/r/styles/base-lyra/header-3.json
index 47c08e12a..692a5958b 100644
--- a/public/r/styles/base-lyra/header-3.json
+++ b/public/r/styles/base-lyra/header-3.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/header-4.json b/public/r/styles/base-lyra/header-4.json
index ffb2e5781..1350739ab 100644
--- a/public/r/styles/base-lyra/header-4.json
+++ b/public/r/styles/base-lyra/header-4.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/header-5.json b/public/r/styles/base-lyra/header-5.json
index 385f2d55a..be9b68bd9 100644
--- a/public/r/styles/base-lyra/header-5.json
+++ b/public/r/styles/base-lyra/header-5.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/header.json b/public/r/styles/base-lyra/header.json
index 137c1b25f..6bbb98f01 100644
--- a/public/r/styles/base-lyra/header.json
+++ b/public/r/styles/base-lyra/header.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/header/header.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-none border bg-background mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-none border bg-background mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  \"data-slot\": dataSlot = \"header\",\n  ...props\n} = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot={dataSlot}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/hero-1.json b/public/r/styles/base-lyra/hero-1.json
index 74dc8b92d..3001b9ff4 100644
--- a/public/r/styles/base-lyra/hero-1.json
+++ b/public/r/styles/base-lyra/hero-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n      {badge.label}\n    </Badge>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge?: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    {badge && (\n      <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n        {badge.label}\n      </Badge>\n    )}\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/hero-10.json b/public/r/styles/base-lyra/hero-10.json
index 96ed3c089..770bb0a86 100644
--- a/public/r/styles/base-lyra/hero-10.json
+++ b/public/r/styles/base-lyra/hero-10.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-10.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/hero-11.json b/public/r/styles/base-lyra/hero-11.json
index 86a7f5e03..09a801205 100644
--- a/public/r/styles/base-lyra/hero-11.json
+++ b/public/r/styles/base-lyra/hero-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-11.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/hero-12.json b/public/r/styles/base-lyra/hero-12.json
index a88805751..77a37b010 100644
--- a/public/r/styles/base-lyra/hero-12.json
+++ b/public/r/styles/base-lyra/hero-12.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-12.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/hero-13.json b/public/r/styles/base-lyra/hero-13.json
index f25d55373..f1f708613 100644
--- a/public/r/styles/base-lyra/hero-13.json
+++ b/public/r/styles/base-lyra/hero-13.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-13.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 900px, (min-width: 64rem) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/hero-2.json b/public/r/styles/base-lyra/hero-2.json
index 672b023de..872bdcf70 100644
--- a/public/r/styles/base-lyra/hero-2.json
+++ b/public/r/styles/base-lyra/hero-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/hero-3.json b/public/r/styles/base-lyra/hero-3.json
index 03cde7001..dcd3d0d23 100644
--- a/public/r/styles/base-lyra/hero-3.json
+++ b/public/r/styles/base-lyra/hero-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/hero-4.json b/public/r/styles/base-lyra/hero-4.json
index ccdf499cf..b0e278928 100644
--- a/public/r/styles/base-lyra/hero-4.json
+++ b/public/r/styles/base-lyra/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/hero-5.json b/public/r/styles/base-lyra/hero-5.json
index a11173eff..1b95a5469 100644
--- a/public/r/styles/base-lyra/hero-5.json
+++ b/public/r/styles/base-lyra/hero-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/hero-6.json b/public/r/styles/base-lyra/hero-6.json
index f458c5879..b60078e9c 100644
--- a/public/r/styles/base-lyra/hero-6.json
+++ b/public/r/styles/base-lyra/hero-6.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/hero-7.json b/public/r/styles/base-lyra/hero-7.json
index e417ccade..75d00053f 100644
--- a/public/r/styles/base-lyra/hero-7.json
+++ b/public/r/styles/base-lyra/hero-7.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 750px, (min-width: 64rem) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/hero-8.json b/public/r/styles/base-lyra/hero-8.json
index a3db6ba64..2ed1b607f 100644
--- a/public/r/styles/base-lyra/hero-8.json
+++ b/public/r/styles/base-lyra/hero-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-8.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 936px, (min-width: 64rem) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/hero-9.json b/public/r/styles/base-lyra/hero-9.json
index 22397aa77..3fc4a2faa 100644
--- a/public/r/styles/base-lyra/hero-9.json
+++ b/public/r/styles/base-lyra/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/links-2.json b/public/r/styles/base-lyra/links-2.json
index 9e1d20ae8..ed6e31559 100644
--- a/public/r/styles/base-lyra/links-2.json
+++ b/public/r/styles/base-lyra/links-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/links-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/logos-1.json b/public/r/styles/base-lyra/logos-1.json
index de017ff6a..de62b4b00 100644
--- a/public/r/styles/base-lyra/logos-1.json
+++ b/public/r/styles/base-lyra/logos-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <li>\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground transition-colors focus-visible:text-foreground\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/logos-2.json b/public/r/styles/base-lyra/logos-2.json
index 3d3960693..48760e394 100644
--- a/public/r/styles/base-lyra/logos-2.json
+++ b/public/r/styles/base-lyra/logos-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n  labels: {\n    play: string\n    pause: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  brands,\n  labels,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-4 [--marquee-gap:--spacing(12)]\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    <MarqueeContent class=\"text-muted-foreground mask-x-from-90%\">\n      {brands.map((brand) => (\n        <MarqueeItem class=\"flex items-center\">\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground focus-visible:text-foreground transition-colors\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </MarqueeItem>\n      ))}\n    </MarqueeContent>\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/logos-3.json b/public/r/styles/base-lyra/logos-3.json
index f0f2762ed..4824f14cc 100644
--- a/public/r/styles/base-lyra/logos-3.json
+++ b/public/r/styles/base-lyra/logos-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"py-12 lg:py-16\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"text-muted-foreground flex flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"py-12 lg:py-16\", className)} {...props}>\n  <SectionContainer>\n    <ul class=\"text-muted-foreground flex flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <li>\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground transition-colors focus-visible:text-foreground\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/marquee.json b/public/r/styles/base-lyra/marquee.json
index c932b246a..c0543ae7f 100644
--- a/public/r/styles/base-lyra/marquee.json
+++ b/public/r/styles/base-lyra/marquee.json
@@ -2,16 +2,39 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "marquee",
   "title": "Marquee",
-  "description": "A continuous scrolling animation component for displaying content in a loop.",
+  "description": "A continuously scrolling row of content, with a pause control and a static fallback.",
+  "dependencies": [
+    "embla-carousel@8.6.0",
+    "embla-carousel-auto-scroll@8.6.0",
+    "@lucide/astro"
+  ],
+  "registryDependencies": [
+    "@fulldev/button"
+  ],
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  data-slot={dataSlot}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({ viewport }))\n      // Moving content needs a way to pause it, so a marquee without a toggle\n      // stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no focusable content of its own.\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = row.viewport.querySelector(\n          \"a[href], button, input, select, textarea, [tabindex]\"\n        )\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || toggles.length === 0) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-content.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  reverse?: boolean\n}\n\nconst {\n  class: className,\n  reverse = false,\n  \"data-slot\": dataSlot = \"marquee-content\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee-viewport\n  data-reverse={reverse ? \"\" : undefined}\n  class={cn(\n    \"focus-visible:ring-ring/50 overflow-x-auto outline-none contain-inline-size focus-visible:ring-3 data-active:overflow-hidden\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"-ms-[var(--marquee-gap,--spacing(4))] flex justify-center-safe\">\n    <slot />\n  </div>\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-item.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee-item\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 ps-[var(--marquee-gap,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-toggle.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  hidden\n  data-slot={dataSlot}\n  data-marquee-toggle\n  data-state=\"playing\"\n  data-play-label={playLabel}\n  data-pause-label={pauseLabel}\n  data-variant={variant}\n  data-size={size}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"group/marquee-toggle\",\n    className\n  )}\n  {...props}\n>\n  <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n  <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n  <span class=\"sr-only\" data-marquee-label>\n    {pauseLabel}\n  </span>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/marquee/index.ts",
-      "content": "export { default as Marquee } from \"./marquee.astro\"\n",
+      "content": "export { default as Marquee } from \"./marquee.astro\"\nexport { default as MarqueeContent } from \"./marquee-content.astro\"\nexport { default as MarqueeItem } from \"./marquee-item.astro\"\nexport { default as MarqueeToggle } from \"./marquee-toggle.astro\"\n",
       "type": "registry:ui"
     }
   ],
diff --git a/public/r/styles/base-lyra/price.json b/public/r/styles/base-lyra/price.json
index af349ca34..8d06c82ce 100644
--- a/public/r/styles/base-lyra/price.json
+++ b/public/r/styles/base-lyra/price.json
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/price/price-value.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-none bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  parseSinglePriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n    discountLabel?: string\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  discountLabel = \"Save\",\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst currentValue = parseSinglePriceValue(price)\nconst compareAtValue = parseSinglePriceValue(compareAt)\n// A compare-at price only shows when it is higher than the price.\nconst formattedCompareAt =\n  currentValue !== null &&\n  compareAtValue !== null &&\n  compareAtValue <= currentValue\n    ? null\n    : formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && formattedCompareAt !== null\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\n---\n\n{formattedPrice !== null && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt !== null && (\n      <del class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </del>\n    )}\n    {formattedDiscount !== null && (\n      <span class=\"rounded-none bg-muted px-2 py-0.5 text-xs font-medium text-foreground\">\n        {discountLabel} {formattedDiscount}\n      </span>\n    )}\n  </span>\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/pricing-1.json b/public/r/styles/base-lyra/pricing-1.json
index 69ddbb891..2649f08fb 100644
--- a/public/r/styles/base-lyra/pricing-1.json
+++ b/public/r/styles/base-lyra/pricing-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  locale?: string\n  discountLabel?: string\n  plans: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  locale,\n  discountLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle as=\"h3\">{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price.value}\n                compareAt={plan.price.compareAt}\n                currency={plan.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{plan.price.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-start gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/pricing-2.json b/public/r/styles/base-lyra/pricing-2.json
index 6f6a446c3..14d7ffde3 100644
--- a/public/r/styles/base-lyra/pricing-2.json
+++ b/public/r/styles/base-lyra/pricing-2.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={index === 0 ? \"outline\" : \"default\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  locale?: string\n  discountLabel?: string\n  plans: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  locale,\n  discountLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle as=\"h3\">{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price.value}\n                compareAt={plan.price.compareAt}\n                currency={plan.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{plan.price.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-start gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/pricing-3.json b/public/r/styles/base-lyra/pricing-3.json
index cf14ce08c..5e767ea90 100644
--- a/public/r/styles/base-lyra/pricing-3.json
+++ b/public/r/styles/base-lyra/pricing-3.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  locale?: string\n  discountLabel?: string\n  offer: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  locale,\n  discountLabel,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle as=\"h3\">{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue\n            price={offer.price.value}\n            compareAt={offer.price.compareAt}\n            currency={offer.price.currency}\n            locale={locale}\n            discountLabel={discountLabel}\n          />\n          <PriceUnit>{offer.price.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/product-1.json b/public/r/styles/base-lyra/product-1.json
index 74777c9da..d09a7114b 100644
--- a/public/r/styles/base-lyra/product-1.json
+++ b/public/r/styles/base-lyra/product-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/product-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    compareAt?: number\n    currency: string\n    unit: string\n  }\n  locale?: string\n  discountLabel?: string\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  locale,\n  discountLabel,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] w-full rounded-lg object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 608px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue\n          price={price.value}\n          compareAt={price.compareAt}\n          currency={price.currency}\n          locale={locale}\n          discountLabel={discountLabel}\n        />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/products-1.json b/public/r/styles/base-lyra/products-1.json
index 551e0e726..2bc2c4508 100644
--- a/public/r/styles/base-lyra/products-1.json
+++ b/public/r/styles/base-lyra/products-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 302px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/products-2.json b/public/r/styles/base-lyra/products-2.json
index 47d395874..34a441afd 100644
--- a/public/r/styles/base-lyra/products-2.json
+++ b/public/r/styles/base-lyra/products-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"max-w-2xl\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-3\">\n      {products.map((item) => (\n        <div>\n          <Separator />\n          <div class=\"flex flex-col gap-4 py-5 md:flex-row md:items-center md:justify-between\">\n            <div class=\"flex flex-col gap-1 md:max-w-lg\">\n              <h3 class=\"text-base font-medium\">{item.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-6\">\n                {item.description}\n              </p>\n            </div>\n            <Price>\n              <PriceValue\n                price={item.price.value}\n                currency={item.price.currency}\n              />\n              <PriceUnit>{item.price.unit}</PriceUnit>\n            </Price>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"max-w-2xl\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-3\">\n      {products.map((item) => (\n        <div>\n          <Separator />\n          <div class=\"flex flex-col gap-4 py-5 md:flex-row md:items-center md:justify-between\">\n            <div class=\"flex flex-col gap-1 md:max-w-lg\">\n              <h3 class=\"text-base font-medium\">{item.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-6\">\n                {item.description}\n              </p>\n            </div>\n            <Price>\n              <PriceValue\n                price={item.price.value}\n                compareAt={item.price.compareAt}\n                currency={item.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{item.price.unit}</PriceUnit>\n            </Price>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/products-3.json b/public/r/styles/base-lyra/products-3.json
index 91921d696..0e6645c63 100644
--- a/public/r/styles/base-lyra/products-3.json
+++ b/public/r/styles/base-lyra/products-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card class=\"text-center\">\n          <CardHeader>\n            <Price class=\"justify-center\">\n              <PriceValue\n                class=\"text-3xl font-semibold\"\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n            </Price>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-2\">\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card class=\"text-center\">\n          <CardHeader>\n            <Price class=\"justify-center\">\n              <PriceValue\n                class=\"text-3xl font-semibold\"\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n            </Price>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-2\">\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/products-4.json b/public/r/styles/base-lyra/products-4.json
index 5c64e3d1f..6885edb3d 100644
--- a/public/r/styles/base-lyra/products-4.json
+++ b/public/r/styles/base-lyra/products-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 405px, (min-width: 64rem) 33vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/products-5.json b/public/r/styles/base-lyra/products-5.json
index c9420d383..9b0a09fb9 100644
--- a/public/r/styles/base-lyra/products-5.json
+++ b/public/r/styles/base-lyra/products-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"gap-0 overflow-hidden\">\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[3/4] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 302px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/registry.json b/public/r/styles/base-lyra/registry.json
index e2df0ee10..4c483a70b 100644
--- a/public/r/styles/base-lyra/registry.json
+++ b/public/r/styles/base-lyra/registry.json
@@ -1064,16 +1064,36 @@
       "name": "marquee",
       "type": "registry:ui",
       "title": "Marquee",
-      "description": "A continuous scrolling animation component for displaying content in a loop.",
+      "description": "A continuously scrolling row of content, with a pause control and a static fallback.",
       "categories": [
         "ui"
       ],
       "docs": "https://ui.full.dev/components/marquee/",
+      "dependencies": [
+        "embla-carousel@8.6.0",
+        "embla-carousel-auto-scroll@8.6.0",
+        "@lucide/astro"
+      ],
+      "registryDependencies": [
+        "@fulldev/button"
+      ],
       "files": [
         {
           "path": "src/components/ui/marquee/marquee.astro",
           "type": "registry:ui"
         },
+        {
+          "path": "src/components/ui/marquee/marquee-content.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/marquee/marquee-item.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/marquee/marquee-toggle.astro",
+          "type": "registry:ui"
+        },
         {
           "path": "src/components/ui/marquee/index.ts",
           "type": "registry:ui"
@@ -2721,16 +2741,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -2749,16 +2762,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -2777,16 +2783,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -3248,9 +3247,6 @@
         "features"
       ],
       "docs": "https://ui.full.dev/blocks/features/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/icon",
         "@fulldev/section"
@@ -3314,9 +3310,6 @@
         "features"
       ],
       "docs": "https://ui.full.dev/blocks/features/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/icon",
         "@fulldev/section"
diff --git a/public/r/styles/base-lyra/reviews-1.json b/public/r/styles/base-lyra/reviews-1.json
index 1a508f17b..d4fae359c 100644
--- a/public/r/styles/base-lyra/reviews-1.json
+++ b/public/r/styles/base-lyra/reviews-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-1 flex-col\">\n            <figure class=\"flex flex-1 flex-col gap-4\">\n              <div class=\"flex items-center justify-between\">\n                <Rating value={item.rating} aria-label={item.ratingLabel} />\n                <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n              </div>\n              <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n                <p>{item.quote}</p>\n              </blockquote>\n              <figcaption class=\"mt-auto flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\" aria-hidden=\"true\">\n                  <AvatarImage src={item.image} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </figcaption>\n            </figure>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/reviews-2.json b/public/r/styles/base-lyra/reviews-2.json
index d5ae29850..494ef9157 100644
--- a/public/r/styles/base-lyra/reviews-2.json
+++ b/public/r/styles/base-lyra/reviews-2.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <figure class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        <p>{featured.quote}</p>\n      </blockquote>\n      <figcaption class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\" aria-hidden=\"true\">\n          <AvatarImage src={featured.image} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </figcaption>\n    </figure>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <div class=\"flex flex-col\">\n          <Separator />\n          <figure class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n              <p>{item.quote}</p>\n            </blockquote>\n            <figcaption class=\"flex items-center gap-3 pt-1\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={item.image} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </figcaption>\n          </figure>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/reviews-3.json b/public/r/styles/base-lyra/reviews-3.json
index eb084404f..5f405a1b8 100644
--- a/public/r/styles/base-lyra/reviews-3.json
+++ b/public/r/styles/base-lyra/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <figure class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                <p>{item.quote}</p>\n              </blockquote>\n              <figcaption class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\" aria-hidden=\"true\">\n                  <AvatarImage src={item.image} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </figcaption>\n            </figure>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/reviews-4.json b/public/r/styles/base-lyra/reviews-4.json
index 03ac5fc3e..3c962de9f 100644
--- a/public/r/styles/base-lyra/reviews-4.json
+++ b/public/r/styles/base-lyra/reviews-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    play: string\n    pause: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst rows = [reviews.slice(0, half), reviews.slice(half)]\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-6\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    {rows\n      .filter((row) => row.length > 0)\n      .map((row, index) => (\n        <MarqueeContent reverse={index % 2 === 1} class=\"py-1\">\n          {row.map((item) => (\n            <MarqueeItem class=\"flex\">\n              <Card class=\"w-[22rem]\">\n                <CardContent class=\"flex flex-1 flex-col\">\n                  <figure class=\"flex flex-1 flex-col gap-3\">\n                    <Rating value={item.rating} aria-label={item.ratingLabel} />\n                    <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n                      <p>{item.quote}</p>\n                    </blockquote>\n                    <figcaption class=\"mt-auto flex items-center gap-3 pt-1\">\n                      <Avatar aria-hidden=\"true\">\n                        <AvatarImage src={item.image} />\n                        <AvatarFallback>{item.initials}</AvatarFallback>\n                      </Avatar>\n                      <div>\n                        <p class=\"text-foreground text-sm font-medium\">\n                          {item.name}\n                        </p>\n                        <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                      </div>\n                    </figcaption>\n                  </figure>\n                </CardContent>\n              </Card>\n            </MarqueeItem>\n          ))}\n        </MarqueeContent>\n      ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/reviews-5.json b/public/r/styles/base-lyra/reviews-5.json
index 8b3458106..4f438bd1b 100644
--- a/public/r/styles/base-lyra/reviews-5.json
+++ b/public/r/styles/base-lyra/reviews-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    play: string\n    pause: string\n  }\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst rows = [\n  reviews.slice(0, third),\n  reviews.slice(third, third * 2),\n  reviews.slice(third * 2),\n]\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-5\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    {rows\n      .filter((row) => row.length > 0)\n      .map((row, index) => (\n        <MarqueeContent reverse={index % 2 === 1} class=\"py-1\">\n          {row.map((item) => (\n            <MarqueeItem class=\"flex\">\n              <figure class=\"bg-muted/50 flex w-[26rem] flex-col gap-4 rounded-2xl p-6\">\n                <figcaption class=\"flex items-center justify-between gap-3\">\n                  <div class=\"flex items-center gap-3\">\n                    <Avatar size=\"lg\" aria-hidden=\"true\">\n                      <AvatarImage src={item.image} />\n                      <AvatarFallback>{item.initials}</AvatarFallback>\n                    </Avatar>\n                    <div>\n                      <p class=\"text-foreground text-sm font-semibold\">\n                        {item.name}\n                      </p>\n                      <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                    </div>\n                  </div>\n                  <Rating value={item.rating} aria-label={item.ratingLabel} />\n                </figcaption>\n                <div class=\"flex gap-2.5\">\n                  <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n                  <blockquote class=\"text-foreground/80 text-sm leading-relaxed\">\n                    <p>{item.quote}</p>\n                  </blockquote>\n                </div>\n              </figure>\n            </MarqueeItem>\n          ))}\n        </MarqueeContent>\n      ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/section.json b/public/r/styles/base-lyra/section.json
index e977cb338..ca5e1d7e7 100644
--- a/public/r/styles/base-lyra/section.json
+++ b/public/r/styles/base-lyra/section.json
@@ -6,12 +6,12 @@
   "files": [
     {
       "path": "src/components/ui/section/section.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-12 py-[var(--section-padding,--spacing(12))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-12 rounded-none bg-background ring-1 ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-12 py-[var(--section-padding,--spacing(12))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-12 rounded-none bg-background ring-1 ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  \"data-slot\": dataSlot = \"section\",\n  ...props\n} = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot={dataSlot}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/section/section-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"section-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] flex-col gap-8 px-[var(--gutter,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"section-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"relative mx-auto w-full max-w-[var(--container,var(--container-7xl))] px-[var(--gutter,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/services-1.json b/public/r/styles/base-lyra/services-1.json
index 4d5ac713e..0ad551b55 100644
--- a/public/r/styles/base-lyra/services-1.json
+++ b/public/r/styles/base-lyra/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href != null && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs\",\n              service.href != null && \"transition-shadow hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? \"\"}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 80rem) 294px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/services-2.json b/public/r/styles/base-lyra/services-2.json
index f2b3db6bc..8c24f803c 100644
--- a/public/r/styles/base-lyra/services-2.json
+++ b/public/r/styles/base-lyra/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"grid items-center gap-6 rounded-xl border p-4 shadow-xs md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/services-3.json b/public/r/styles/base-lyra/services-3.json
index f259c104f..53b390522 100644
--- a/public/r/styles/base-lyra/services-3.json
+++ b/public/r/styles/base-lyra/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"absolute inset-0 -z-10 size-full object-cover\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 80rem) 612px, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/services-4.json b/public/r/styles/base-lyra/services-4.json
index d357efabf..a848dbe59 100644
--- a/public/r/styles/base-lyra/services-4.json
+++ b/public/r/styles/base-lyra/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 294px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.link && (\n            <a\n              href={service.link.href}\n              class=\"text-primary inline-flex w-fit items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline\"\n            >\n              {service.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/services-5.json b/public/r/styles/base-lyra/services-5.json
index def369794..2458133c0 100644
--- a/public/r/styles/base-lyra/services-5.json
+++ b/public/r/styles/base-lyra/services-5.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background relative flex flex-col gap-4 p-7\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 ring-inset\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.link && (\n            <a\n              href={service.link.href}\n              class=\"text-primary mt-auto inline-flex w-fit items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline\"\n            >\n              {service.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/services-6.json b/public/r/styles/base-lyra/services-6.json
index 70206a046..82f8c027b 100644
--- a/public/r/styles/base-lyra/services-6.json
+++ b/public/r/styles/base-lyra/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 436px, (min-width: 64rem) 35vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/services-7.json b/public/r/styles/base-lyra/services-7.json
index 623952170..bbc7e0404 100644
--- a/public/r/styles/base-lyra/services-7.json
+++ b/public/r/styles/base-lyra/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 1024px) 66vw, 100vw\"\n                  : \"(min-width: 1024px) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs\",\n              service.href != null && \"transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? \"\"}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 80rem) 824px, (min-width: 64rem) 66vw, 100vw\"\n                  : \"(min-width: 80rem) 400px, (min-width: 64rem) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/sidebar-1.json b/public/r/styles/base-lyra/sidebar-1.json
index 3476f325b..4ec41b325 100644
--- a/public/r/styles/base-lyra/sidebar-1.json
+++ b/public/r/styles/base-lyra/sidebar-1.json
@@ -22,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebar: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar\n    class={cn(\"\", className)}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebar} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={labels.github}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  currentPath: string\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    sidebar: string\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebarToggle: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  currentPath: rawCurrentPath,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n  ...props\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(rawCurrentPath)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider {...props}>\n  <Sidebar\n    aria-label={labels.sidebar}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebarToggle} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            <Icon name=\"github\" />\n            <span class=\"sr-only\">{labels.github}</span>\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/sidebar.json b/public/r/styles/base-lyra/sidebar.json
index 20925bd63..c378457d7 100644
--- a/public/r/styles/base-lyra/sidebar.json
+++ b/public/r/styles/base-lyra/sidebar.json
@@ -24,7 +24,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <aside\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </aside>\n    </div>\n  </>\n)}\n",
       "type": "registry:ui"
     },
     {
@@ -34,7 +34,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar-rail.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst { class: className, type = \"button\", ...props } = Astro.props\n---\n\n<button\n  data-sidebar=\"rail\"\n  data-slot=\"sidebar-rail\"\n  aria-label=\"Toggle Sidebar\"\n  tabindex={-1}\n  title=\"Toggle Sidebar\"\n  type={type}\n  class={cn(\n    \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n    \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n    \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n    \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n    \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n    \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n    className\n  )}\n  {...props}\n></button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  type = \"button\",\n  \"aria-label\": ariaLabel = \"Toggle Sidebar\",\n  title = ariaLabel,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-sidebar=\"rail\"\n  data-slot=\"sidebar-rail\"\n  aria-label={ariaLabel}\n  tabindex={-1}\n  title={title}\n  type={type}\n  class={cn(\n    \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n    \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n    \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n    \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n    \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n    \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n    className\n  )}\n  {...props}\n></button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/article-1.json b/public/r/styles/base-maia/article-1.json
index c45df6988..a864d2860 100644
--- a/public/r/styles/base-maia/article-1.json
+++ b/public/r/styles/base-maia/article-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/article-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"max-w-2xl\">\n    <article class=\"flex flex-col gap-8\">\n      <header class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n            {title}\n          </h1>\n          <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n            {description}\n          </p>\n        </div>\n        <div class=\"flex items-center gap-3\">\n          <Avatar size=\"lg\" aria-hidden=\"true\">\n            <AvatarImage src={author.image} />\n            <AvatarFallback>{author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n          </div>\n        </div>\n      </header>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 42rem) 42rem, 100vw\"\n        loading=\"eager\"\n        fetchpriority=\"high\"\n      />\n      <div class=\"flex flex-col gap-6 text-base leading-8\">\n        <slot />\n      </div>\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/article-2.json b/public/r/styles/base-maia/article-2.json
index 6511245f3..c0a3f5f9a 100644
--- a/public/r/styles/base-maia/article-2.json
+++ b/public/r/styles/base-maia/article-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/article-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"max-w-2xl\">\n    <article class=\"flex flex-col gap-8\">\n      <header class=\"flex flex-col items-center gap-6 text-center\">\n        <div class=\"flex flex-col gap-4\">\n          <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n            {title}\n          </h1>\n          <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n            {description}\n          </p>\n        </div>\n        <div class=\"flex items-center gap-3\">\n          <Avatar size=\"lg\" aria-hidden=\"true\">\n            <AvatarImage src={author.image} />\n            <AvatarFallback>{author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col text-left\">\n            <p class=\"text-sm font-medium\">\n              {author.name}{\" \"}\n              <span class=\"text-muted-foreground font-normal\">\n                &middot; {author.date}\n              </span>\n            </p>\n            <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n          </div>\n        </div>\n      </header>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 42rem) 42rem, 100vw\"\n        loading=\"eager\"\n        fetchpriority=\"high\"\n      />\n      <div class=\"flex flex-col gap-6 text-base leading-8\">\n        <slot />\n      </div>\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/articles-1.json b/public/r/styles/base-maia/articles-1.json
index 30aa52bd2..2c9f3ed3b 100644
--- a/public/r/styles/base-maia/articles-1.json
+++ b/public/r/styles/base-maia/articles-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/articles-2.json b/public/r/styles/base-maia/articles-2.json
index a9d78a9f5..6e60d3f18 100644
--- a/public/r/styles/base-maia/articles-2.json
+++ b/public/r/styles/base-maia/articles-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class={cn(\n        \"grid gap-6 rounded-xl lg:grid-cols-2 lg:items-center lg:pr-4\",\n        featured.href != null &&\n          \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n      )}\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 80rem) 616px, (min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar aria-hidden=\"true\">\n            <AvatarImage src={featured.author.image} />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/articles-3.json b/public/r/styles/base-maia/articles-3.json
index e4182724a..bd0837d65 100644
--- a/public/r/styles/base-maia/articles-3.json
+++ b/public/r/styles/base-maia/articles-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"bg-muted/50 flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/articles-4.json b/public/r/styles/base-maia/articles-4.json
index b0c908073..ddff63354 100644
--- a/public/r/styles/base-maia/articles-4.json
+++ b/public/r/styles/base-maia/articles-4.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl border p-6\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/blocks-1.json b/public/r/styles/base-maia/blocks-1.json
index a0da615ca..8719d1a46 100644
--- a/public/r/styles/base-maia/blocks-1.json
+++ b/public/r/styles/base-maia/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"flex flex-col gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/carousel.json b/public/r/styles/base-maia/carousel.json
index 9c27dc50e..5584f6f46 100644
--- a/public/r/styles/base-maia/carousel.json
+++ b/public/r/styles/base-maia/carousel.json
@@ -13,27 +13,27 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  \"data-slot\": dataSlot = \"carousel\",\n  // A named section is a region landmark. Without a name it would have no\n  // role, so it becomes a group, the other container role the APG carousel\n  // allows.\n  role = Astro.props[\"aria-label\"] || Astro.props[\"aria-labelledby\"]\n    ? undefined\n    : \"group\",\n  ...props\n} = Astro.props\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot={dataSlot}\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={role}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts. The data-carousel-* markers stay\n  // in place when a caller overrides data-slot.\n  const rootSelector = \"[data-carousel-options]\"\n  const getParts = <T extends Element>(root: CarouselRoot, part: string) =>\n    [...root.querySelectorAll<T>(`[data-carousel-${part}]`)].filter(\n      (element) => element.closest(rootSelector) === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(rootSelector)) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"viewport\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"previous\")\n      const next = getParts<HTMLButtonElement>(root, \"next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest(rootSelector) !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-content.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div class=\"overflow-hidden\" data-slot=\"carousel-content\">\n  <div\n    data-slot=\"carousel-container\"\n    class={cn(\n      \"flex [touch-action:pan-y_pinch-zoom]\",\n      \"group-data-[orientation=vertical]/carousel:-mt-4 group-data-[orientation=vertical]/carousel:[touch-action:pan-x_pinch-zoom] group-data-[orientation=vertical]/carousel:flex-col\",\n      \"group-data-[orientation=horizontal]/carousel:-ml-4\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"carousel-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class=\"overflow-hidden\"\n  data-slot=\"carousel-content\"\n  data-carousel-viewport\n>\n  <div\n    data-slot={dataSlot}\n    class={cn(\n      \"flex [touch-action:pan-y_pinch-zoom]\",\n      \"group-data-[orientation=vertical]/carousel:-mt-4 group-data-[orientation=vertical]/carousel:[touch-action:pan-x_pinch-zoom] group-data-[orientation=vertical]/carousel:flex-col\",\n      \"group-data-[orientation=horizontal]/carousel:-ml-4\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  \"data-slot\": dataSlot = \"carousel-item\",\n  role = \"group\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  role={role}\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-next.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  \"data-slot\": dataSlot = \"carousel-next\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot={dataSlot}\n  data-carousel-next\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-previous.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  \"data-slot\": dataSlot = \"carousel-previous\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot={dataSlot}\n  data-carousel-previous\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/contact-1.json b/public/r/styles/base-maia/contact-1.json
index 9af391672..cb4345f47 100644
--- a/public/r/styles/base-maia/contact-1.json
+++ b/public/r/styles/base-maia/contact-1.json
@@ -3,22 +3,15 @@
   "name": "contact-1",
   "title": "Contact 1",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n                aria-describedby={`${formId}-message-description`}\n              />\n              <FieldDescription id={`${formId}-message-description`}>\n                {form.messageDescription}\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <li class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          <Button\n            as=\"span\"\n            variant=\"secondary\"\n            size=\"icon\"\n            class=\"text-primary\"\n            aria-hidden=\"true\"\n          >\n            <Icon name={item.icon} />\n          </Button>\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          {item.href != null ? (\n            <a\n              href={item.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n            >\n              {item.description}\n            </a>\n          ) : (\n            <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n              {item.description}\n            </p>\n          )}\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n  {Astro.slots.has(\"default\") && (\n    <SectionContainer>\n      <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n        <slot />\n      </div>\n    </SectionContainer>\n  )}\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/contact-2.json b/public/r/styles/base-maia/contact-2.json
index 97172ad7d..ec5bb574f 100644
--- a/public/r/styles/base-maia/contact-2.json
+++ b/public/r/styles/base-maia/contact-2.json
@@ -3,22 +3,15 @@
   "name": "contact-2",
   "title": "Contact 2",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    title: string\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1fr)_22rem] lg:items-start\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <div class=\"mb-6\">\n          <h3 class=\"text-lg font-medium\">{form.title}</h3>\n        </div>\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n\n    <div class=\"flex flex-col gap-3\">\n      {contactItems.map((item) => (\n        <div class=\"flex gap-4 rounded-xl border p-4\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <div class=\"flex flex-col gap-1\">\n            <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1fr)_22rem] lg:items-start\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {Astro.slots.has(\"default\") && (\n        <div class=\"rounded-xl border p-6\">\n          <slot />\n        </div>\n      )}\n    </div>\n\n    <ul class=\"flex flex-col gap-3\">\n      {contactItems.map((item) => (\n        <li class=\"flex gap-4 rounded-xl border p-4\">\n          <Button\n            as=\"span\"\n            variant=\"secondary\"\n            size=\"icon\"\n            class=\"text-primary shrink-0\"\n            aria-hidden=\"true\"\n          >\n            <Icon name={item.icon} />\n          </Button>\n          <div class=\"flex flex-col gap-1\">\n            <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n            {item.href != null ? (\n              <a\n                href={item.href}\n                class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n              >\n                {item.description}\n              </a>\n            ) : (\n              <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n                {item.description}\n              </p>\n            )}\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/contact-3.json b/public/r/styles/base-maia/contact-3.json
index 15a42d48f..b50f57b6e 100644
--- a/public/r/styles/base-maia/contact-3.json
+++ b/public/r/styles/base-maia/contact-3.json
@@ -3,22 +3,15 @@
   "name": "contact-3",
   "title": "Contact 3",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <li class=\"flex gap-4\">\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n            <div class=\"flex min-w-0 flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              {item.href != null ? (\n                <a\n                  href={item.href}\n                  class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n                >\n                  {item.description}\n                </a>\n              ) : (\n                <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n                  {item.description}\n                </p>\n              )}\n            </div>\n          </li>\n        ))}\n      </ul>\n      {Astro.slots.has(\"default\") && (\n        <div class=\"rounded-xl border p-6\">\n          <slot />\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/content-1.json b/public/r/styles/base-maia/content-1.json
index 37cc98379..45ceca637 100644
--- a/public/r/styles/base-maia/content-1.json
+++ b/public/r/styles/base-maia/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-3 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-3 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/content-2.json b/public/r/styles/base-maia/content-2.json
index 693b5d9bb..7675cc352 100644
--- a/public/r/styles/base-maia/content-2.json
+++ b/public/r/styles/base-maia/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/content-3.json b/public/r/styles/base-maia/content-3.json
index fdc0b7afd..cf3b62853 100644
--- a/public/r/styles/base-maia/content-3.json
+++ b/public/r/styles/base-maia/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/content-4.json b/public/r/styles/base-maia/content-4.json
index 4dd1cd6f3..fcce4f136 100644
--- a/public/r/styles/base-maia/content-4.json
+++ b/public/r/styles/base-maia/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 80rem) 800px, (min-width: 64rem) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/cta-1.json b/public/r/styles/base-maia/cta-1.json
index 880fa60eb..10cbc452e 100644
--- a/public/r/styles/base-maia/cta-1.json
+++ b/public/r/styles/base-maia/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/cta-2.json b/public/r/styles/base-maia/cta-2.json
index 05cfb2687..347395042 100644
--- a/public/r/styles/base-maia/cta-2.json
+++ b/public/r/styles/base-maia/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/cta-3.json b/public/r/styles/base-maia/cta-3.json
index caf08c91a..d8a956197 100644
--- a/public/r/styles/base-maia/cta-3.json
+++ b/public/r/styles/base-maia/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/cta-4.json b/public/r/styles/base-maia/cta-4.json
index 2ed196c48..43d7c1bd8 100644
--- a/public/r/styles/base-maia/cta-4.json
+++ b/public/r/styles/base-maia/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/cta-5.json b/public/r/styles/base-maia/cta-5.json
index 39ff0c7bb..7a122cb13 100644
--- a/public/r/styles/base-maia/cta-5.json
+++ b/public/r/styles/base-maia/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/cta-6.json b/public/r/styles/base-maia/cta-6.json
index cbd7368fe..9aa3276fe 100644
--- a/public/r/styles/base-maia/cta-6.json
+++ b/public/r/styles/base-maia/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/cta-7.json b/public/r/styles/base-maia/cta-7.json
index 86813e6c0..b6755b388 100644
--- a/public/r/styles/base-maia/cta-7.json
+++ b/public/r/styles/base-maia/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-muted-foreground text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription class=\"text-foreground/80\">\n        {description}\n      </SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-foreground/80 text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/cta-8.json b/public/r/styles/base-maia/cta-8.json
index eaac34d78..7acaffa25 100644
--- a/public/r/styles/base-maia/cta-8.json
+++ b/public/r/styles/base-maia/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col gap-8 before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/doc-1.json b/public/r/styles/base-maia/doc-1.json
index 9c98b34f9..49048e0e5 100644
--- a/public/r/styles/base-maia/doc-1.json
+++ b/public/r/styles/base-maia/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"flex flex-col gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/faqs-1.json b/public/r/styles/base-maia/faqs-1.json
index 92d59430a..fe0decf6f 100644
--- a/public/r/styles/base-maia/faqs-1.json
+++ b/public/r/styles/base-maia/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/faqs-3.json b/public/r/styles/base-maia/faqs-3.json
index a0d634566..cd5d5197c 100644
--- a/public/r/styles/base-maia/faqs-3.json
+++ b/public/r/styles/base-maia/faqs-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/faqs-4.json b/public/r/styles/base-maia/faqs-4.json
index 4fe0db0bb..19de0d927 100644
--- a/public/r/styles/base-maia/faqs-4.json
+++ b/public/r/styles/base-maia/faqs-4.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst { class: className, title, faqs, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center\">\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <SectionTitle>{title}</SectionTitle>\n      <div class=\"mt-10\">\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst { class: className, title, faqs, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center\">\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <SectionTitle>{title}</SectionTitle>\n      <div class=\"mt-10\">\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/features-1.json b/public/r/styles/base-maia/features-1.json
index 585c6b7f2..61240563f 100644
--- a/public/r/styles/base-maia/features-1.json
+++ b/public/r/styles/base-maia/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <li class=\"flex flex-col gap-4 rounded-xl border p-6\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.link && (\n            <a\n              href={feature.link.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/features-2.json b/public/r/styles/base-maia/features-2.json
index 467338413..a15ebe78c 100644
--- a/public/r/styles/base-maia/features-2.json
+++ b/public/r/styles/base-maia/features-2.json
@@ -3,9 +3,6 @@
   "name": "features-2",
   "title": "Features 2",
   "description": "Feature section layouts for product narratives, launch pages, and capability overviews.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/icon",
     "@fulldev/section"
@@ -13,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li class=\"bg-background relative flex flex-col items-center gap-4 p-7 text-center\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 ring-inset\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/features-3.json b/public/r/styles/base-maia/features-3.json
index 83402f1a0..0f7902b8c 100644
--- a/public/r/styles/base-maia/features-3.json
+++ b/public/r/styles/base-maia/features-3.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex items-center gap-5 rounded-xl border p-4 transition-colors\">\n          <Image\n            src={feature.image.src}\n            alt={feature.image.alt}\n            class=\"size-20 shrink-0 rounded-lg object-cover\"\n            widths={[160, 320]}\n            sizes=\"80px\"\n          />\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-5 rounded-xl border p-4\">\n          <Image\n            src={feature.image.src}\n            alt={feature.image.alt}\n            class=\"size-20 shrink-0 rounded-lg object-cover\"\n            widths={[160, 320]}\n            sizes=\"80px\"\n          />\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/features-4.json b/public/r/styles/base-maia/features-4.json
index 6cadcba43..437798358 100644
--- a/public/r/styles/base-maia/features-4.json
+++ b/public/r/styles/base-maia/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <ul class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <li class=\"flex flex-col gap-4 rounded-xl border p-6\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.link && (\n              <a\n                href={feature.link.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.link.label}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </li>\n        ))}\n      </ul>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/features-5.json b/public/r/styles/base-maia/features-5.json
index 61eba406f..420643adf 100644
--- a/public/r/styles/base-maia/features-5.json
+++ b/public/r/styles/base-maia/features-5.json
@@ -3,9 +3,6 @@
   "name": "features-5",
   "title": "Features 5",
   "description": "Feature section layouts for product narratives, launch pages, and capability overviews.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/icon",
     "@fulldev/section"
@@ -13,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li class=\"flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/features-6.json b/public/r/styles/base-maia/features-6.json
index d21ff5c93..9b01c7537 100644
--- a/public/r/styles/base-maia/features-6.json
+++ b/public/r/styles/base-maia/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/footer-1.json b/public/r/styles/base-maia/footer-1.json
index 7ac3e8331..6e75db4ac 100644
--- a/public/r/styles/base-maia/footer-1.json
+++ b/public/r/styles/base-maia/footer-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer class=\"flex flex-col gap-8\">\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <h2 class=\"text-sm font-medium\">{column.title}</h2>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/footer-2.json b/public/r/styles/base-maia/footer-2.json
index 217f595bb..d5fbcdfec 100644
--- a/public/r/styles/base-maia/footer-2.json
+++ b/public/r/styles/base-maia/footer-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      <div class=\"flex items-center justify-center gap-3\">\n        {socials.map((social) => (\n          <a\n            href={social.href}\n            class=\"text-muted-foreground hover:text-foreground transition-colors\"\n            aria-label={social.label}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n          >\n            <Icon name={social.icon} href={social.href} class=\"size-4\" />\n          </a>\n        ))}\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      {socials.length > 0 && (\n        <div class=\"flex items-center justify-center gap-3\">\n          {socials.map((social) => (\n            <a\n              href={social.href}\n              class=\"text-muted-foreground hover:text-foreground transition-colors\"\n              aria-label={social.label}\n            >\n              <Icon name={social.icon} href={social.href} class=\"size-4\" />\n            </a>\n          ))}\n        </div>\n      )}\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/footer-3.json b/public/r/styles/base-maia/footer-3.json
index b5bc278e9..27d6eb84e 100644
--- a/public/r/styles/base-maia/footer-3.json
+++ b/public/r/styles/base-maia/footer-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer class=\"flex flex-col gap-8\">\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <h2 class=\"text-sm font-medium\">{column.title}</h2>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/header-1.json b/public/r/styles/base-maia/header-1.json
index 5b7896a87..0bfb9eb6d 100644
--- a/public/r/styles/base-maia/header-1.json
+++ b/public/r/styles/base-maia/header-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/header-2.json b/public/r/styles/base-maia/header-2.json
index 6a35ca3c4..16c30ad25 100644
--- a/public/r/styles/base-maia/header-2.json
+++ b/public/r/styles/base-maia/header-2.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/header-3.json b/public/r/styles/base-maia/header-3.json
index 70418bc87..fd0157b7f 100644
--- a/public/r/styles/base-maia/header-3.json
+++ b/public/r/styles/base-maia/header-3.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/header-4.json b/public/r/styles/base-maia/header-4.json
index 0a7d02adf..60663b63f 100644
--- a/public/r/styles/base-maia/header-4.json
+++ b/public/r/styles/base-maia/header-4.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/header-5.json b/public/r/styles/base-maia/header-5.json
index 97bc283a6..a09f4b53b 100644
--- a/public/r/styles/base-maia/header-5.json
+++ b/public/r/styles/base-maia/header-5.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/header.json b/public/r/styles/base-maia/header.json
index 6a3a399d5..6fc098d38 100644
--- a/public/r/styles/base-maia/header.json
+++ b/public/r/styles/base-maia/header.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/header/header.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2.5 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-4xl border bg-background mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2.5 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-4xl border bg-background mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  \"data-slot\": dataSlot = \"header\",\n  ...props\n} = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot={dataSlot}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/hero-1.json b/public/r/styles/base-maia/hero-1.json
index 74dc8b92d..3001b9ff4 100644
--- a/public/r/styles/base-maia/hero-1.json
+++ b/public/r/styles/base-maia/hero-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n      {badge.label}\n    </Badge>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge?: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    {badge && (\n      <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n        {badge.label}\n      </Badge>\n    )}\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/hero-10.json b/public/r/styles/base-maia/hero-10.json
index 96ed3c089..770bb0a86 100644
--- a/public/r/styles/base-maia/hero-10.json
+++ b/public/r/styles/base-maia/hero-10.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-10.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/hero-11.json b/public/r/styles/base-maia/hero-11.json
index 86a7f5e03..09a801205 100644
--- a/public/r/styles/base-maia/hero-11.json
+++ b/public/r/styles/base-maia/hero-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-11.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/hero-12.json b/public/r/styles/base-maia/hero-12.json
index a88805751..77a37b010 100644
--- a/public/r/styles/base-maia/hero-12.json
+++ b/public/r/styles/base-maia/hero-12.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-12.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/hero-13.json b/public/r/styles/base-maia/hero-13.json
index f25d55373..f1f708613 100644
--- a/public/r/styles/base-maia/hero-13.json
+++ b/public/r/styles/base-maia/hero-13.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-13.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 900px, (min-width: 64rem) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/hero-2.json b/public/r/styles/base-maia/hero-2.json
index 672b023de..872bdcf70 100644
--- a/public/r/styles/base-maia/hero-2.json
+++ b/public/r/styles/base-maia/hero-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/hero-3.json b/public/r/styles/base-maia/hero-3.json
index 03cde7001..dcd3d0d23 100644
--- a/public/r/styles/base-maia/hero-3.json
+++ b/public/r/styles/base-maia/hero-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/hero-4.json b/public/r/styles/base-maia/hero-4.json
index ccdf499cf..b0e278928 100644
--- a/public/r/styles/base-maia/hero-4.json
+++ b/public/r/styles/base-maia/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/hero-5.json b/public/r/styles/base-maia/hero-5.json
index a11173eff..1b95a5469 100644
--- a/public/r/styles/base-maia/hero-5.json
+++ b/public/r/styles/base-maia/hero-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/hero-6.json b/public/r/styles/base-maia/hero-6.json
index f458c5879..b60078e9c 100644
--- a/public/r/styles/base-maia/hero-6.json
+++ b/public/r/styles/base-maia/hero-6.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/hero-7.json b/public/r/styles/base-maia/hero-7.json
index e417ccade..75d00053f 100644
--- a/public/r/styles/base-maia/hero-7.json
+++ b/public/r/styles/base-maia/hero-7.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 750px, (min-width: 64rem) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/hero-8.json b/public/r/styles/base-maia/hero-8.json
index a3db6ba64..2ed1b607f 100644
--- a/public/r/styles/base-maia/hero-8.json
+++ b/public/r/styles/base-maia/hero-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-8.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 936px, (min-width: 64rem) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/hero-9.json b/public/r/styles/base-maia/hero-9.json
index 22397aa77..3fc4a2faa 100644
--- a/public/r/styles/base-maia/hero-9.json
+++ b/public/r/styles/base-maia/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/links-2.json b/public/r/styles/base-maia/links-2.json
index 9e1d20ae8..ed6e31559 100644
--- a/public/r/styles/base-maia/links-2.json
+++ b/public/r/styles/base-maia/links-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/links-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/logos-1.json b/public/r/styles/base-maia/logos-1.json
index de017ff6a..de62b4b00 100644
--- a/public/r/styles/base-maia/logos-1.json
+++ b/public/r/styles/base-maia/logos-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <li>\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground transition-colors focus-visible:text-foreground\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/logos-2.json b/public/r/styles/base-maia/logos-2.json
index 3d3960693..48760e394 100644
--- a/public/r/styles/base-maia/logos-2.json
+++ b/public/r/styles/base-maia/logos-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n  labels: {\n    play: string\n    pause: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  brands,\n  labels,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-4 [--marquee-gap:--spacing(12)]\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    <MarqueeContent class=\"text-muted-foreground mask-x-from-90%\">\n      {brands.map((brand) => (\n        <MarqueeItem class=\"flex items-center\">\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground focus-visible:text-foreground transition-colors\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </MarqueeItem>\n      ))}\n    </MarqueeContent>\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/logos-3.json b/public/r/styles/base-maia/logos-3.json
index f0f2762ed..4824f14cc 100644
--- a/public/r/styles/base-maia/logos-3.json
+++ b/public/r/styles/base-maia/logos-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"py-12 lg:py-16\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"text-muted-foreground flex flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"py-12 lg:py-16\", className)} {...props}>\n  <SectionContainer>\n    <ul class=\"text-muted-foreground flex flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <li>\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground transition-colors focus-visible:text-foreground\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/marquee.json b/public/r/styles/base-maia/marquee.json
index c932b246a..c0543ae7f 100644
--- a/public/r/styles/base-maia/marquee.json
+++ b/public/r/styles/base-maia/marquee.json
@@ -2,16 +2,39 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "marquee",
   "title": "Marquee",
-  "description": "A continuous scrolling animation component for displaying content in a loop.",
+  "description": "A continuously scrolling row of content, with a pause control and a static fallback.",
+  "dependencies": [
+    "embla-carousel@8.6.0",
+    "embla-carousel-auto-scroll@8.6.0",
+    "@lucide/astro"
+  ],
+  "registryDependencies": [
+    "@fulldev/button"
+  ],
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  data-slot={dataSlot}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({ viewport }))\n      // Moving content needs a way to pause it, so a marquee without a toggle\n      // stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no focusable content of its own.\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = row.viewport.querySelector(\n          \"a[href], button, input, select, textarea, [tabindex]\"\n        )\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || toggles.length === 0) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-content.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  reverse?: boolean\n}\n\nconst {\n  class: className,\n  reverse = false,\n  \"data-slot\": dataSlot = \"marquee-content\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee-viewport\n  data-reverse={reverse ? \"\" : undefined}\n  class={cn(\n    \"focus-visible:ring-ring/50 overflow-x-auto outline-none contain-inline-size focus-visible:ring-3 data-active:overflow-hidden\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"-ms-[var(--marquee-gap,--spacing(4))] flex justify-center-safe\">\n    <slot />\n  </div>\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-item.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee-item\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 ps-[var(--marquee-gap,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-toggle.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  hidden\n  data-slot={dataSlot}\n  data-marquee-toggle\n  data-state=\"playing\"\n  data-play-label={playLabel}\n  data-pause-label={pauseLabel}\n  data-variant={variant}\n  data-size={size}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"group/marquee-toggle\",\n    className\n  )}\n  {...props}\n>\n  <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n  <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n  <span class=\"sr-only\" data-marquee-label>\n    {pauseLabel}\n  </span>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/marquee/index.ts",
-      "content": "export { default as Marquee } from \"./marquee.astro\"\n",
+      "content": "export { default as Marquee } from \"./marquee.astro\"\nexport { default as MarqueeContent } from \"./marquee-content.astro\"\nexport { default as MarqueeItem } from \"./marquee-item.astro\"\nexport { default as MarqueeToggle } from \"./marquee-toggle.astro\"\n",
       "type": "registry:ui"
     }
   ],
diff --git a/public/r/styles/base-maia/price.json b/public/r/styles/base-maia/price.json
index d815f6576..e512209cd 100644
--- a/public/r/styles/base-maia/price.json
+++ b/public/r/styles/base-maia/price.json
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/price/price-value.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  parseSinglePriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n    discountLabel?: string\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  discountLabel = \"Save\",\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst currentValue = parseSinglePriceValue(price)\nconst compareAtValue = parseSinglePriceValue(compareAt)\n// A compare-at price only shows when it is higher than the price.\nconst formattedCompareAt =\n  currentValue !== null &&\n  compareAtValue !== null &&\n  compareAtValue <= currentValue\n    ? null\n    : formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && formattedCompareAt !== null\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\n---\n\n{formattedPrice !== null && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt !== null && (\n      <del class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </del>\n    )}\n    {formattedDiscount !== null && (\n      <span class=\"rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-foreground\">\n        {discountLabel} {formattedDiscount}\n      </span>\n    )}\n  </span>\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/pricing-1.json b/public/r/styles/base-maia/pricing-1.json
index 69ddbb891..2649f08fb 100644
--- a/public/r/styles/base-maia/pricing-1.json
+++ b/public/r/styles/base-maia/pricing-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  locale?: string\n  discountLabel?: string\n  plans: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  locale,\n  discountLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle as=\"h3\">{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price.value}\n                compareAt={plan.price.compareAt}\n                currency={plan.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{plan.price.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-start gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/pricing-2.json b/public/r/styles/base-maia/pricing-2.json
index 6f6a446c3..14d7ffde3 100644
--- a/public/r/styles/base-maia/pricing-2.json
+++ b/public/r/styles/base-maia/pricing-2.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={index === 0 ? \"outline\" : \"default\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  locale?: string\n  discountLabel?: string\n  plans: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  locale,\n  discountLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle as=\"h3\">{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price.value}\n                compareAt={plan.price.compareAt}\n                currency={plan.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{plan.price.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-start gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/pricing-3.json b/public/r/styles/base-maia/pricing-3.json
index cf14ce08c..5e767ea90 100644
--- a/public/r/styles/base-maia/pricing-3.json
+++ b/public/r/styles/base-maia/pricing-3.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  locale?: string\n  discountLabel?: string\n  offer: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  locale,\n  discountLabel,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle as=\"h3\">{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue\n            price={offer.price.value}\n            compareAt={offer.price.compareAt}\n            currency={offer.price.currency}\n            locale={locale}\n            discountLabel={discountLabel}\n          />\n          <PriceUnit>{offer.price.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/product-1.json b/public/r/styles/base-maia/product-1.json
index 74777c9da..d09a7114b 100644
--- a/public/r/styles/base-maia/product-1.json
+++ b/public/r/styles/base-maia/product-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/product-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    compareAt?: number\n    currency: string\n    unit: string\n  }\n  locale?: string\n  discountLabel?: string\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  locale,\n  discountLabel,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] w-full rounded-lg object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 608px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue\n          price={price.value}\n          compareAt={price.compareAt}\n          currency={price.currency}\n          locale={locale}\n          discountLabel={discountLabel}\n        />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/products-1.json b/public/r/styles/base-maia/products-1.json
index 551e0e726..2bc2c4508 100644
--- a/public/r/styles/base-maia/products-1.json
+++ b/public/r/styles/base-maia/products-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 302px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/products-2.json b/public/r/styles/base-maia/products-2.json
index 47d395874..34a441afd 100644
--- a/public/r/styles/base-maia/products-2.json
+++ b/public/r/styles/base-maia/products-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"max-w-2xl\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-3\">\n      {products.map((item) => (\n        <div>\n          <Separator />\n          <div class=\"flex flex-col gap-4 py-5 md:flex-row md:items-center md:justify-between\">\n            <div class=\"flex flex-col gap-1 md:max-w-lg\">\n              <h3 class=\"text-base font-medium\">{item.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-6\">\n                {item.description}\n              </p>\n            </div>\n            <Price>\n              <PriceValue\n                price={item.price.value}\n                currency={item.price.currency}\n              />\n              <PriceUnit>{item.price.unit}</PriceUnit>\n            </Price>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"max-w-2xl\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-3\">\n      {products.map((item) => (\n        <div>\n          <Separator />\n          <div class=\"flex flex-col gap-4 py-5 md:flex-row md:items-center md:justify-between\">\n            <div class=\"flex flex-col gap-1 md:max-w-lg\">\n              <h3 class=\"text-base font-medium\">{item.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-6\">\n                {item.description}\n              </p>\n            </div>\n            <Price>\n              <PriceValue\n                price={item.price.value}\n                compareAt={item.price.compareAt}\n                currency={item.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{item.price.unit}</PriceUnit>\n            </Price>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/products-3.json b/public/r/styles/base-maia/products-3.json
index 91921d696..0e6645c63 100644
--- a/public/r/styles/base-maia/products-3.json
+++ b/public/r/styles/base-maia/products-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card class=\"text-center\">\n          <CardHeader>\n            <Price class=\"justify-center\">\n              <PriceValue\n                class=\"text-3xl font-semibold\"\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n            </Price>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-2\">\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card class=\"text-center\">\n          <CardHeader>\n            <Price class=\"justify-center\">\n              <PriceValue\n                class=\"text-3xl font-semibold\"\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n            </Price>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-2\">\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/products-4.json b/public/r/styles/base-maia/products-4.json
index 5c64e3d1f..6885edb3d 100644
--- a/public/r/styles/base-maia/products-4.json
+++ b/public/r/styles/base-maia/products-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 405px, (min-width: 64rem) 33vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/products-5.json b/public/r/styles/base-maia/products-5.json
index c9420d383..9b0a09fb9 100644
--- a/public/r/styles/base-maia/products-5.json
+++ b/public/r/styles/base-maia/products-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"gap-0 overflow-hidden\">\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[3/4] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 302px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/registry.json b/public/r/styles/base-maia/registry.json
index bf209a6ad..10e50c279 100644
--- a/public/r/styles/base-maia/registry.json
+++ b/public/r/styles/base-maia/registry.json
@@ -1064,16 +1064,36 @@
       "name": "marquee",
       "type": "registry:ui",
       "title": "Marquee",
-      "description": "A continuous scrolling animation component for displaying content in a loop.",
+      "description": "A continuously scrolling row of content, with a pause control and a static fallback.",
       "categories": [
         "ui"
       ],
       "docs": "https://ui.full.dev/components/marquee/",
+      "dependencies": [
+        "embla-carousel@8.6.0",
+        "embla-carousel-auto-scroll@8.6.0",
+        "@lucide/astro"
+      ],
+      "registryDependencies": [
+        "@fulldev/button"
+      ],
       "files": [
         {
           "path": "src/components/ui/marquee/marquee.astro",
           "type": "registry:ui"
         },
+        {
+          "path": "src/components/ui/marquee/marquee-content.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/marquee/marquee-item.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/marquee/marquee-toggle.astro",
+          "type": "registry:ui"
+        },
         {
           "path": "src/components/ui/marquee/index.ts",
           "type": "registry:ui"
@@ -2721,16 +2741,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -2749,16 +2762,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -2777,16 +2783,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -3248,9 +3247,6 @@
         "features"
       ],
       "docs": "https://ui.full.dev/blocks/features/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/icon",
         "@fulldev/section"
@@ -3314,9 +3310,6 @@
         "features"
       ],
       "docs": "https://ui.full.dev/blocks/features/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/icon",
         "@fulldev/section"
diff --git a/public/r/styles/base-maia/reviews-1.json b/public/r/styles/base-maia/reviews-1.json
index 1a508f17b..d4fae359c 100644
--- a/public/r/styles/base-maia/reviews-1.json
+++ b/public/r/styles/base-maia/reviews-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-1 flex-col\">\n            <figure class=\"flex flex-1 flex-col gap-4\">\n              <div class=\"flex items-center justify-between\">\n                <Rating value={item.rating} aria-label={item.ratingLabel} />\n                <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n              </div>\n              <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n                <p>{item.quote}</p>\n              </blockquote>\n              <figcaption class=\"mt-auto flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\" aria-hidden=\"true\">\n                  <AvatarImage src={item.image} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </figcaption>\n            </figure>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/reviews-2.json b/public/r/styles/base-maia/reviews-2.json
index d5ae29850..494ef9157 100644
--- a/public/r/styles/base-maia/reviews-2.json
+++ b/public/r/styles/base-maia/reviews-2.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <figure class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        <p>{featured.quote}</p>\n      </blockquote>\n      <figcaption class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\" aria-hidden=\"true\">\n          <AvatarImage src={featured.image} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </figcaption>\n    </figure>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <div class=\"flex flex-col\">\n          <Separator />\n          <figure class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n              <p>{item.quote}</p>\n            </blockquote>\n            <figcaption class=\"flex items-center gap-3 pt-1\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={item.image} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </figcaption>\n          </figure>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/reviews-3.json b/public/r/styles/base-maia/reviews-3.json
index eb084404f..5f405a1b8 100644
--- a/public/r/styles/base-maia/reviews-3.json
+++ b/public/r/styles/base-maia/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <figure class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                <p>{item.quote}</p>\n              </blockquote>\n              <figcaption class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\" aria-hidden=\"true\">\n                  <AvatarImage src={item.image} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </figcaption>\n            </figure>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/reviews-4.json b/public/r/styles/base-maia/reviews-4.json
index 03ac5fc3e..3c962de9f 100644
--- a/public/r/styles/base-maia/reviews-4.json
+++ b/public/r/styles/base-maia/reviews-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    play: string\n    pause: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst rows = [reviews.slice(0, half), reviews.slice(half)]\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-6\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    {rows\n      .filter((row) => row.length > 0)\n      .map((row, index) => (\n        <MarqueeContent reverse={index % 2 === 1} class=\"py-1\">\n          {row.map((item) => (\n            <MarqueeItem class=\"flex\">\n              <Card class=\"w-[22rem]\">\n                <CardContent class=\"flex flex-1 flex-col\">\n                  <figure class=\"flex flex-1 flex-col gap-3\">\n                    <Rating value={item.rating} aria-label={item.ratingLabel} />\n                    <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n                      <p>{item.quote}</p>\n                    </blockquote>\n                    <figcaption class=\"mt-auto flex items-center gap-3 pt-1\">\n                      <Avatar aria-hidden=\"true\">\n                        <AvatarImage src={item.image} />\n                        <AvatarFallback>{item.initials}</AvatarFallback>\n                      </Avatar>\n                      <div>\n                        <p class=\"text-foreground text-sm font-medium\">\n                          {item.name}\n                        </p>\n                        <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                      </div>\n                    </figcaption>\n                  </figure>\n                </CardContent>\n              </Card>\n            </MarqueeItem>\n          ))}\n        </MarqueeContent>\n      ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/reviews-5.json b/public/r/styles/base-maia/reviews-5.json
index 8b3458106..4f438bd1b 100644
--- a/public/r/styles/base-maia/reviews-5.json
+++ b/public/r/styles/base-maia/reviews-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    play: string\n    pause: string\n  }\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst rows = [\n  reviews.slice(0, third),\n  reviews.slice(third, third * 2),\n  reviews.slice(third * 2),\n]\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-5\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    {rows\n      .filter((row) => row.length > 0)\n      .map((row, index) => (\n        <MarqueeContent reverse={index % 2 === 1} class=\"py-1\">\n          {row.map((item) => (\n            <MarqueeItem class=\"flex\">\n              <figure class=\"bg-muted/50 flex w-[26rem] flex-col gap-4 rounded-2xl p-6\">\n                <figcaption class=\"flex items-center justify-between gap-3\">\n                  <div class=\"flex items-center gap-3\">\n                    <Avatar size=\"lg\" aria-hidden=\"true\">\n                      <AvatarImage src={item.image} />\n                      <AvatarFallback>{item.initials}</AvatarFallback>\n                    </Avatar>\n                    <div>\n                      <p class=\"text-foreground text-sm font-semibold\">\n                        {item.name}\n                      </p>\n                      <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                    </div>\n                  </div>\n                  <Rating value={item.rating} aria-label={item.ratingLabel} />\n                </figcaption>\n                <div class=\"flex gap-2.5\">\n                  <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n                  <blockquote class=\"text-foreground/80 text-sm leading-relaxed\">\n                    <p>{item.quote}</p>\n                  </blockquote>\n                </div>\n              </figure>\n            </MarqueeItem>\n          ))}\n        </MarqueeContent>\n      ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/section.json b/public/r/styles/base-maia/section.json
index 8c627dd17..9422c045c 100644
--- a/public/r/styles/base-maia/section.json
+++ b/public/r/styles/base-maia/section.json
@@ -6,12 +6,12 @@
   "files": [
     {
       "path": "src/components/ui/section/section.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-16 py-[var(--section-padding,--spacing(16))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-16 rounded-2xl bg-background ring-1 ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-16 py-[var(--section-padding,--spacing(16))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-16 rounded-2xl bg-background ring-1 ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  \"data-slot\": dataSlot = \"section\",\n  ...props\n} = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot={dataSlot}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/section/section-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"section-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] flex-col gap-8 px-[var(--gutter,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"section-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"relative mx-auto w-full max-w-[var(--container,var(--container-7xl))] px-[var(--gutter,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/services-1.json b/public/r/styles/base-maia/services-1.json
index 4d5ac713e..0ad551b55 100644
--- a/public/r/styles/base-maia/services-1.json
+++ b/public/r/styles/base-maia/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href != null && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs\",\n              service.href != null && \"transition-shadow hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? \"\"}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 80rem) 294px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/services-2.json b/public/r/styles/base-maia/services-2.json
index f2b3db6bc..8c24f803c 100644
--- a/public/r/styles/base-maia/services-2.json
+++ b/public/r/styles/base-maia/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"grid items-center gap-6 rounded-xl border p-4 shadow-xs md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/services-3.json b/public/r/styles/base-maia/services-3.json
index f259c104f..53b390522 100644
--- a/public/r/styles/base-maia/services-3.json
+++ b/public/r/styles/base-maia/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"absolute inset-0 -z-10 size-full object-cover\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 80rem) 612px, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/services-4.json b/public/r/styles/base-maia/services-4.json
index d357efabf..a848dbe59 100644
--- a/public/r/styles/base-maia/services-4.json
+++ b/public/r/styles/base-maia/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 294px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.link && (\n            <a\n              href={service.link.href}\n              class=\"text-primary inline-flex w-fit items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline\"\n            >\n              {service.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/services-5.json b/public/r/styles/base-maia/services-5.json
index def369794..2458133c0 100644
--- a/public/r/styles/base-maia/services-5.json
+++ b/public/r/styles/base-maia/services-5.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background relative flex flex-col gap-4 p-7\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 ring-inset\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.link && (\n            <a\n              href={service.link.href}\n              class=\"text-primary mt-auto inline-flex w-fit items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline\"\n            >\n              {service.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/services-6.json b/public/r/styles/base-maia/services-6.json
index 70206a046..82f8c027b 100644
--- a/public/r/styles/base-maia/services-6.json
+++ b/public/r/styles/base-maia/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 436px, (min-width: 64rem) 35vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/services-7.json b/public/r/styles/base-maia/services-7.json
index 623952170..bbc7e0404 100644
--- a/public/r/styles/base-maia/services-7.json
+++ b/public/r/styles/base-maia/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 1024px) 66vw, 100vw\"\n                  : \"(min-width: 1024px) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs\",\n              service.href != null && \"transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? \"\"}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 80rem) 824px, (min-width: 64rem) 66vw, 100vw\"\n                  : \"(min-width: 80rem) 400px, (min-width: 64rem) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/sidebar-1.json b/public/r/styles/base-maia/sidebar-1.json
index 3476f325b..4ec41b325 100644
--- a/public/r/styles/base-maia/sidebar-1.json
+++ b/public/r/styles/base-maia/sidebar-1.json
@@ -22,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebar: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar\n    class={cn(\"\", className)}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebar} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={labels.github}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  currentPath: string\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    sidebar: string\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebarToggle: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  currentPath: rawCurrentPath,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n  ...props\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(rawCurrentPath)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider {...props}>\n  <Sidebar\n    aria-label={labels.sidebar}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebarToggle} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            <Icon name=\"github\" />\n            <span class=\"sr-only\">{labels.github}</span>\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/sidebar.json b/public/r/styles/base-maia/sidebar.json
index 6e9311e7b..c6a5de7d5 100644
--- a/public/r/styles/base-maia/sidebar.json
+++ b/public/r/styles/base-maia/sidebar.json
@@ -24,7 +24,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <aside\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </aside>\n    </div>\n  </>\n)}\n",
       "type": "registry:ui"
     },
     {
@@ -34,7 +34,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar-rail.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst { class: className, type = \"button\", ...props } = Astro.props\n---\n\n<button\n  data-sidebar=\"rail\"\n  data-slot=\"sidebar-rail\"\n  aria-label=\"Toggle Sidebar\"\n  tabindex={-1}\n  title=\"Toggle Sidebar\"\n  type={type}\n  class={cn(\n    \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n    \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n    \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n    \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n    \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n    \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n    className\n  )}\n  {...props}\n></button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  type = \"button\",\n  \"aria-label\": ariaLabel = \"Toggle Sidebar\",\n  title = ariaLabel,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-sidebar=\"rail\"\n  data-slot=\"sidebar-rail\"\n  aria-label={ariaLabel}\n  tabindex={-1}\n  title={title}\n  type={type}\n  class={cn(\n    \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n    \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n    \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n    \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n    \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n    \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n    className\n  )}\n  {...props}\n></button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/article-1.json b/public/r/styles/base-mira/article-1.json
index c45df6988..a864d2860 100644
--- a/public/r/styles/base-mira/article-1.json
+++ b/public/r/styles/base-mira/article-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/article-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"max-w-2xl\">\n    <article class=\"flex flex-col gap-8\">\n      <header class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n            {title}\n          </h1>\n          <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n            {description}\n          </p>\n        </div>\n        <div class=\"flex items-center gap-3\">\n          <Avatar size=\"lg\" aria-hidden=\"true\">\n            <AvatarImage src={author.image} />\n            <AvatarFallback>{author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n          </div>\n        </div>\n      </header>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 42rem) 42rem, 100vw\"\n        loading=\"eager\"\n        fetchpriority=\"high\"\n      />\n      <div class=\"flex flex-col gap-6 text-base leading-8\">\n        <slot />\n      </div>\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/article-2.json b/public/r/styles/base-mira/article-2.json
index 6511245f3..c0a3f5f9a 100644
--- a/public/r/styles/base-mira/article-2.json
+++ b/public/r/styles/base-mira/article-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/article-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"max-w-2xl\">\n    <article class=\"flex flex-col gap-8\">\n      <header class=\"flex flex-col items-center gap-6 text-center\">\n        <div class=\"flex flex-col gap-4\">\n          <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n            {title}\n          </h1>\n          <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n            {description}\n          </p>\n        </div>\n        <div class=\"flex items-center gap-3\">\n          <Avatar size=\"lg\" aria-hidden=\"true\">\n            <AvatarImage src={author.image} />\n            <AvatarFallback>{author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col text-left\">\n            <p class=\"text-sm font-medium\">\n              {author.name}{\" \"}\n              <span class=\"text-muted-foreground font-normal\">\n                &middot; {author.date}\n              </span>\n            </p>\n            <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n          </div>\n        </div>\n      </header>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 42rem) 42rem, 100vw\"\n        loading=\"eager\"\n        fetchpriority=\"high\"\n      />\n      <div class=\"flex flex-col gap-6 text-base leading-8\">\n        <slot />\n      </div>\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/articles-1.json b/public/r/styles/base-mira/articles-1.json
index 30aa52bd2..2c9f3ed3b 100644
--- a/public/r/styles/base-mira/articles-1.json
+++ b/public/r/styles/base-mira/articles-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/articles-2.json b/public/r/styles/base-mira/articles-2.json
index a9d78a9f5..6e60d3f18 100644
--- a/public/r/styles/base-mira/articles-2.json
+++ b/public/r/styles/base-mira/articles-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class={cn(\n        \"grid gap-6 rounded-xl lg:grid-cols-2 lg:items-center lg:pr-4\",\n        featured.href != null &&\n          \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n      )}\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 80rem) 616px, (min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar aria-hidden=\"true\">\n            <AvatarImage src={featured.author.image} />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/articles-3.json b/public/r/styles/base-mira/articles-3.json
index e4182724a..bd0837d65 100644
--- a/public/r/styles/base-mira/articles-3.json
+++ b/public/r/styles/base-mira/articles-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"bg-muted/50 flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/articles-4.json b/public/r/styles/base-mira/articles-4.json
index b0c908073..ddff63354 100644
--- a/public/r/styles/base-mira/articles-4.json
+++ b/public/r/styles/base-mira/articles-4.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl border p-6\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/blocks-1.json b/public/r/styles/base-mira/blocks-1.json
index a0da615ca..8719d1a46 100644
--- a/public/r/styles/base-mira/blocks-1.json
+++ b/public/r/styles/base-mira/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"flex flex-col gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/carousel.json b/public/r/styles/base-mira/carousel.json
index 9c27dc50e..5584f6f46 100644
--- a/public/r/styles/base-mira/carousel.json
+++ b/public/r/styles/base-mira/carousel.json
@@ -13,27 +13,27 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  \"data-slot\": dataSlot = \"carousel\",\n  // A named section is a region landmark. Without a name it would have no\n  // role, so it becomes a group, the other container role the APG carousel\n  // allows.\n  role = Astro.props[\"aria-label\"] || Astro.props[\"aria-labelledby\"]\n    ? undefined\n    : \"group\",\n  ...props\n} = Astro.props\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot={dataSlot}\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={role}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts. The data-carousel-* markers stay\n  // in place when a caller overrides data-slot.\n  const rootSelector = \"[data-carousel-options]\"\n  const getParts = <T extends Element>(root: CarouselRoot, part: string) =>\n    [...root.querySelectorAll<T>(`[data-carousel-${part}]`)].filter(\n      (element) => element.closest(rootSelector) === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(rootSelector)) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"viewport\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"previous\")\n      const next = getParts<HTMLButtonElement>(root, \"next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest(rootSelector) !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-content.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div class=\"overflow-hidden\" data-slot=\"carousel-content\">\n  <div\n    data-slot=\"carousel-container\"\n    class={cn(\n      \"flex [touch-action:pan-y_pinch-zoom]\",\n      \"group-data-[orientation=vertical]/carousel:-mt-4 group-data-[orientation=vertical]/carousel:[touch-action:pan-x_pinch-zoom] group-data-[orientation=vertical]/carousel:flex-col\",\n      \"group-data-[orientation=horizontal]/carousel:-ml-4\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"carousel-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class=\"overflow-hidden\"\n  data-slot=\"carousel-content\"\n  data-carousel-viewport\n>\n  <div\n    data-slot={dataSlot}\n    class={cn(\n      \"flex [touch-action:pan-y_pinch-zoom]\",\n      \"group-data-[orientation=vertical]/carousel:-mt-4 group-data-[orientation=vertical]/carousel:[touch-action:pan-x_pinch-zoom] group-data-[orientation=vertical]/carousel:flex-col\",\n      \"group-data-[orientation=horizontal]/carousel:-ml-4\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  \"data-slot\": dataSlot = \"carousel-item\",\n  role = \"group\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  role={role}\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-next.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  \"data-slot\": dataSlot = \"carousel-next\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot={dataSlot}\n  data-carousel-next\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-previous.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  \"data-slot\": dataSlot = \"carousel-previous\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot={dataSlot}\n  data-carousel-previous\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/contact-1.json b/public/r/styles/base-mira/contact-1.json
index 9af391672..cb4345f47 100644
--- a/public/r/styles/base-mira/contact-1.json
+++ b/public/r/styles/base-mira/contact-1.json
@@ -3,22 +3,15 @@
   "name": "contact-1",
   "title": "Contact 1",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n                aria-describedby={`${formId}-message-description`}\n              />\n              <FieldDescription id={`${formId}-message-description`}>\n                {form.messageDescription}\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <li class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          <Button\n            as=\"span\"\n            variant=\"secondary\"\n            size=\"icon\"\n            class=\"text-primary\"\n            aria-hidden=\"true\"\n          >\n            <Icon name={item.icon} />\n          </Button>\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          {item.href != null ? (\n            <a\n              href={item.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n            >\n              {item.description}\n            </a>\n          ) : (\n            <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n              {item.description}\n            </p>\n          )}\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n  {Astro.slots.has(\"default\") && (\n    <SectionContainer>\n      <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n        <slot />\n      </div>\n    </SectionContainer>\n  )}\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/contact-2.json b/public/r/styles/base-mira/contact-2.json
index 97172ad7d..ec5bb574f 100644
--- a/public/r/styles/base-mira/contact-2.json
+++ b/public/r/styles/base-mira/contact-2.json
@@ -3,22 +3,15 @@
   "name": "contact-2",
   "title": "Contact 2",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    title: string\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1fr)_22rem] lg:items-start\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <div class=\"mb-6\">\n          <h3 class=\"text-lg font-medium\">{form.title}</h3>\n        </div>\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n\n    <div class=\"flex flex-col gap-3\">\n      {contactItems.map((item) => (\n        <div class=\"flex gap-4 rounded-xl border p-4\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <div class=\"flex flex-col gap-1\">\n            <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1fr)_22rem] lg:items-start\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {Astro.slots.has(\"default\") && (\n        <div class=\"rounded-xl border p-6\">\n          <slot />\n        </div>\n      )}\n    </div>\n\n    <ul class=\"flex flex-col gap-3\">\n      {contactItems.map((item) => (\n        <li class=\"flex gap-4 rounded-xl border p-4\">\n          <Button\n            as=\"span\"\n            variant=\"secondary\"\n            size=\"icon\"\n            class=\"text-primary shrink-0\"\n            aria-hidden=\"true\"\n          >\n            <Icon name={item.icon} />\n          </Button>\n          <div class=\"flex flex-col gap-1\">\n            <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n            {item.href != null ? (\n              <a\n                href={item.href}\n                class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n              >\n                {item.description}\n              </a>\n            ) : (\n              <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n                {item.description}\n              </p>\n            )}\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/contact-3.json b/public/r/styles/base-mira/contact-3.json
index 15a42d48f..b50f57b6e 100644
--- a/public/r/styles/base-mira/contact-3.json
+++ b/public/r/styles/base-mira/contact-3.json
@@ -3,22 +3,15 @@
   "name": "contact-3",
   "title": "Contact 3",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <li class=\"flex gap-4\">\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n            <div class=\"flex min-w-0 flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              {item.href != null ? (\n                <a\n                  href={item.href}\n                  class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n                >\n                  {item.description}\n                </a>\n              ) : (\n                <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n                  {item.description}\n                </p>\n              )}\n            </div>\n          </li>\n        ))}\n      </ul>\n      {Astro.slots.has(\"default\") && (\n        <div class=\"rounded-xl border p-6\">\n          <slot />\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/content-1.json b/public/r/styles/base-mira/content-1.json
index 37cc98379..45ceca637 100644
--- a/public/r/styles/base-mira/content-1.json
+++ b/public/r/styles/base-mira/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-3 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-3 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/content-2.json b/public/r/styles/base-mira/content-2.json
index 693b5d9bb..7675cc352 100644
--- a/public/r/styles/base-mira/content-2.json
+++ b/public/r/styles/base-mira/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/content-3.json b/public/r/styles/base-mira/content-3.json
index fdc0b7afd..cf3b62853 100644
--- a/public/r/styles/base-mira/content-3.json
+++ b/public/r/styles/base-mira/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/content-4.json b/public/r/styles/base-mira/content-4.json
index 4dd1cd6f3..fcce4f136 100644
--- a/public/r/styles/base-mira/content-4.json
+++ b/public/r/styles/base-mira/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 80rem) 800px, (min-width: 64rem) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/cta-1.json b/public/r/styles/base-mira/cta-1.json
index 880fa60eb..10cbc452e 100644
--- a/public/r/styles/base-mira/cta-1.json
+++ b/public/r/styles/base-mira/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/cta-2.json b/public/r/styles/base-mira/cta-2.json
index 05cfb2687..347395042 100644
--- a/public/r/styles/base-mira/cta-2.json
+++ b/public/r/styles/base-mira/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/cta-3.json b/public/r/styles/base-mira/cta-3.json
index caf08c91a..d8a956197 100644
--- a/public/r/styles/base-mira/cta-3.json
+++ b/public/r/styles/base-mira/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/cta-4.json b/public/r/styles/base-mira/cta-4.json
index 2ed196c48..43d7c1bd8 100644
--- a/public/r/styles/base-mira/cta-4.json
+++ b/public/r/styles/base-mira/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/cta-5.json b/public/r/styles/base-mira/cta-5.json
index 39ff0c7bb..7a122cb13 100644
--- a/public/r/styles/base-mira/cta-5.json
+++ b/public/r/styles/base-mira/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/cta-6.json b/public/r/styles/base-mira/cta-6.json
index cbd7368fe..9aa3276fe 100644
--- a/public/r/styles/base-mira/cta-6.json
+++ b/public/r/styles/base-mira/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/cta-7.json b/public/r/styles/base-mira/cta-7.json
index 86813e6c0..b6755b388 100644
--- a/public/r/styles/base-mira/cta-7.json
+++ b/public/r/styles/base-mira/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-muted-foreground text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription class=\"text-foreground/80\">\n        {description}\n      </SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-foreground/80 text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/cta-8.json b/public/r/styles/base-mira/cta-8.json
index eaac34d78..7acaffa25 100644
--- a/public/r/styles/base-mira/cta-8.json
+++ b/public/r/styles/base-mira/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col gap-8 before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/doc-1.json b/public/r/styles/base-mira/doc-1.json
index 9c98b34f9..49048e0e5 100644
--- a/public/r/styles/base-mira/doc-1.json
+++ b/public/r/styles/base-mira/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"flex flex-col gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/faqs-1.json b/public/r/styles/base-mira/faqs-1.json
index 92d59430a..fe0decf6f 100644
--- a/public/r/styles/base-mira/faqs-1.json
+++ b/public/r/styles/base-mira/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/faqs-3.json b/public/r/styles/base-mira/faqs-3.json
index a0d634566..cd5d5197c 100644
--- a/public/r/styles/base-mira/faqs-3.json
+++ b/public/r/styles/base-mira/faqs-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/faqs-4.json b/public/r/styles/base-mira/faqs-4.json
index 4fe0db0bb..19de0d927 100644
--- a/public/r/styles/base-mira/faqs-4.json
+++ b/public/r/styles/base-mira/faqs-4.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst { class: className, title, faqs, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center\">\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <SectionTitle>{title}</SectionTitle>\n      <div class=\"mt-10\">\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst { class: className, title, faqs, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center\">\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <SectionTitle>{title}</SectionTitle>\n      <div class=\"mt-10\">\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/features-1.json b/public/r/styles/base-mira/features-1.json
index 585c6b7f2..61240563f 100644
--- a/public/r/styles/base-mira/features-1.json
+++ b/public/r/styles/base-mira/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <li class=\"flex flex-col gap-4 rounded-xl border p-6\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.link && (\n            <a\n              href={feature.link.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/features-2.json b/public/r/styles/base-mira/features-2.json
index 467338413..a15ebe78c 100644
--- a/public/r/styles/base-mira/features-2.json
+++ b/public/r/styles/base-mira/features-2.json
@@ -3,9 +3,6 @@
   "name": "features-2",
   "title": "Features 2",
   "description": "Feature section layouts for product narratives, launch pages, and capability overviews.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/icon",
     "@fulldev/section"
@@ -13,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li class=\"bg-background relative flex flex-col items-center gap-4 p-7 text-center\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 ring-inset\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/features-3.json b/public/r/styles/base-mira/features-3.json
index 83402f1a0..0f7902b8c 100644
--- a/public/r/styles/base-mira/features-3.json
+++ b/public/r/styles/base-mira/features-3.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex items-center gap-5 rounded-xl border p-4 transition-colors\">\n          <Image\n            src={feature.image.src}\n            alt={feature.image.alt}\n            class=\"size-20 shrink-0 rounded-lg object-cover\"\n            widths={[160, 320]}\n            sizes=\"80px\"\n          />\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-5 rounded-xl border p-4\">\n          <Image\n            src={feature.image.src}\n            alt={feature.image.alt}\n            class=\"size-20 shrink-0 rounded-lg object-cover\"\n            widths={[160, 320]}\n            sizes=\"80px\"\n          />\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/features-4.json b/public/r/styles/base-mira/features-4.json
index 6cadcba43..437798358 100644
--- a/public/r/styles/base-mira/features-4.json
+++ b/public/r/styles/base-mira/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <ul class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <li class=\"flex flex-col gap-4 rounded-xl border p-6\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.link && (\n              <a\n                href={feature.link.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.link.label}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </li>\n        ))}\n      </ul>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/features-5.json b/public/r/styles/base-mira/features-5.json
index 61eba406f..420643adf 100644
--- a/public/r/styles/base-mira/features-5.json
+++ b/public/r/styles/base-mira/features-5.json
@@ -3,9 +3,6 @@
   "name": "features-5",
   "title": "Features 5",
   "description": "Feature section layouts for product narratives, launch pages, and capability overviews.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/icon",
     "@fulldev/section"
@@ -13,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li class=\"flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/features-6.json b/public/r/styles/base-mira/features-6.json
index d21ff5c93..9b01c7537 100644
--- a/public/r/styles/base-mira/features-6.json
+++ b/public/r/styles/base-mira/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/footer-1.json b/public/r/styles/base-mira/footer-1.json
index 7ac3e8331..6e75db4ac 100644
--- a/public/r/styles/base-mira/footer-1.json
+++ b/public/r/styles/base-mira/footer-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer class=\"flex flex-col gap-8\">\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <h2 class=\"text-sm font-medium\">{column.title}</h2>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/footer-2.json b/public/r/styles/base-mira/footer-2.json
index 217f595bb..d5fbcdfec 100644
--- a/public/r/styles/base-mira/footer-2.json
+++ b/public/r/styles/base-mira/footer-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      <div class=\"flex items-center justify-center gap-3\">\n        {socials.map((social) => (\n          <a\n            href={social.href}\n            class=\"text-muted-foreground hover:text-foreground transition-colors\"\n            aria-label={social.label}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n          >\n            <Icon name={social.icon} href={social.href} class=\"size-4\" />\n          </a>\n        ))}\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      {socials.length > 0 && (\n        <div class=\"flex items-center justify-center gap-3\">\n          {socials.map((social) => (\n            <a\n              href={social.href}\n              class=\"text-muted-foreground hover:text-foreground transition-colors\"\n              aria-label={social.label}\n            >\n              <Icon name={social.icon} href={social.href} class=\"size-4\" />\n            </a>\n          ))}\n        </div>\n      )}\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/footer-3.json b/public/r/styles/base-mira/footer-3.json
index b5bc278e9..27d6eb84e 100644
--- a/public/r/styles/base-mira/footer-3.json
+++ b/public/r/styles/base-mira/footer-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer class=\"flex flex-col gap-8\">\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <h2 class=\"text-sm font-medium\">{column.title}</h2>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/header-1.json b/public/r/styles/base-mira/header-1.json
index 5b7896a87..0bfb9eb6d 100644
--- a/public/r/styles/base-mira/header-1.json
+++ b/public/r/styles/base-mira/header-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/header-2.json b/public/r/styles/base-mira/header-2.json
index 6a35ca3c4..16c30ad25 100644
--- a/public/r/styles/base-mira/header-2.json
+++ b/public/r/styles/base-mira/header-2.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/header-3.json b/public/r/styles/base-mira/header-3.json
index 70418bc87..fd0157b7f 100644
--- a/public/r/styles/base-mira/header-3.json
+++ b/public/r/styles/base-mira/header-3.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/header-4.json b/public/r/styles/base-mira/header-4.json
index 0a7d02adf..60663b63f 100644
--- a/public/r/styles/base-mira/header-4.json
+++ b/public/r/styles/base-mira/header-4.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/header-5.json b/public/r/styles/base-mira/header-5.json
index 97bc283a6..a09f4b53b 100644
--- a/public/r/styles/base-mira/header-5.json
+++ b/public/r/styles/base-mira/header-5.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/header.json b/public/r/styles/base-mira/header.json
index d543c8cfb..d34225c86 100644
--- a/public/r/styles/base-mira/header.json
+++ b/public/r/styles/base-mira/header.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/header/header.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-1.5 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-lg border bg-background mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-1.5 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-lg border bg-background mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  \"data-slot\": dataSlot = \"header\",\n  ...props\n} = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot={dataSlot}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/hero-1.json b/public/r/styles/base-mira/hero-1.json
index 74dc8b92d..3001b9ff4 100644
--- a/public/r/styles/base-mira/hero-1.json
+++ b/public/r/styles/base-mira/hero-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n      {badge.label}\n    </Badge>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge?: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    {badge && (\n      <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n        {badge.label}\n      </Badge>\n    )}\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/hero-10.json b/public/r/styles/base-mira/hero-10.json
index 96ed3c089..770bb0a86 100644
--- a/public/r/styles/base-mira/hero-10.json
+++ b/public/r/styles/base-mira/hero-10.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-10.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/hero-11.json b/public/r/styles/base-mira/hero-11.json
index 86a7f5e03..09a801205 100644
--- a/public/r/styles/base-mira/hero-11.json
+++ b/public/r/styles/base-mira/hero-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-11.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/hero-12.json b/public/r/styles/base-mira/hero-12.json
index a88805751..77a37b010 100644
--- a/public/r/styles/base-mira/hero-12.json
+++ b/public/r/styles/base-mira/hero-12.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-12.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/hero-13.json b/public/r/styles/base-mira/hero-13.json
index f25d55373..f1f708613 100644
--- a/public/r/styles/base-mira/hero-13.json
+++ b/public/r/styles/base-mira/hero-13.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-13.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 900px, (min-width: 64rem) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/hero-2.json b/public/r/styles/base-mira/hero-2.json
index 672b023de..872bdcf70 100644
--- a/public/r/styles/base-mira/hero-2.json
+++ b/public/r/styles/base-mira/hero-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/hero-3.json b/public/r/styles/base-mira/hero-3.json
index 03cde7001..dcd3d0d23 100644
--- a/public/r/styles/base-mira/hero-3.json
+++ b/public/r/styles/base-mira/hero-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/hero-4.json b/public/r/styles/base-mira/hero-4.json
index ccdf499cf..b0e278928 100644
--- a/public/r/styles/base-mira/hero-4.json
+++ b/public/r/styles/base-mira/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/hero-5.json b/public/r/styles/base-mira/hero-5.json
index a11173eff..1b95a5469 100644
--- a/public/r/styles/base-mira/hero-5.json
+++ b/public/r/styles/base-mira/hero-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/hero-6.json b/public/r/styles/base-mira/hero-6.json
index f458c5879..b60078e9c 100644
--- a/public/r/styles/base-mira/hero-6.json
+++ b/public/r/styles/base-mira/hero-6.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/hero-7.json b/public/r/styles/base-mira/hero-7.json
index e417ccade..75d00053f 100644
--- a/public/r/styles/base-mira/hero-7.json
+++ b/public/r/styles/base-mira/hero-7.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 750px, (min-width: 64rem) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/hero-8.json b/public/r/styles/base-mira/hero-8.json
index a3db6ba64..2ed1b607f 100644
--- a/public/r/styles/base-mira/hero-8.json
+++ b/public/r/styles/base-mira/hero-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-8.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 936px, (min-width: 64rem) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/hero-9.json b/public/r/styles/base-mira/hero-9.json
index 22397aa77..3fc4a2faa 100644
--- a/public/r/styles/base-mira/hero-9.json
+++ b/public/r/styles/base-mira/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/links-2.json b/public/r/styles/base-mira/links-2.json
index 9e1d20ae8..ed6e31559 100644
--- a/public/r/styles/base-mira/links-2.json
+++ b/public/r/styles/base-mira/links-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/links-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/logos-1.json b/public/r/styles/base-mira/logos-1.json
index de017ff6a..de62b4b00 100644
--- a/public/r/styles/base-mira/logos-1.json
+++ b/public/r/styles/base-mira/logos-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <li>\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground transition-colors focus-visible:text-foreground\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/logos-2.json b/public/r/styles/base-mira/logos-2.json
index 3d3960693..48760e394 100644
--- a/public/r/styles/base-mira/logos-2.json
+++ b/public/r/styles/base-mira/logos-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n  labels: {\n    play: string\n    pause: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  brands,\n  labels,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-4 [--marquee-gap:--spacing(12)]\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    <MarqueeContent class=\"text-muted-foreground mask-x-from-90%\">\n      {brands.map((brand) => (\n        <MarqueeItem class=\"flex items-center\">\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground focus-visible:text-foreground transition-colors\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </MarqueeItem>\n      ))}\n    </MarqueeContent>\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/logos-3.json b/public/r/styles/base-mira/logos-3.json
index f0f2762ed..4824f14cc 100644
--- a/public/r/styles/base-mira/logos-3.json
+++ b/public/r/styles/base-mira/logos-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"py-12 lg:py-16\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"text-muted-foreground flex flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"py-12 lg:py-16\", className)} {...props}>\n  <SectionContainer>\n    <ul class=\"text-muted-foreground flex flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <li>\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground transition-colors focus-visible:text-foreground\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/marquee.json b/public/r/styles/base-mira/marquee.json
index c932b246a..c0543ae7f 100644
--- a/public/r/styles/base-mira/marquee.json
+++ b/public/r/styles/base-mira/marquee.json
@@ -2,16 +2,39 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "marquee",
   "title": "Marquee",
-  "description": "A continuous scrolling animation component for displaying content in a loop.",
+  "description": "A continuously scrolling row of content, with a pause control and a static fallback.",
+  "dependencies": [
+    "embla-carousel@8.6.0",
+    "embla-carousel-auto-scroll@8.6.0",
+    "@lucide/astro"
+  ],
+  "registryDependencies": [
+    "@fulldev/button"
+  ],
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  data-slot={dataSlot}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({ viewport }))\n      // Moving content needs a way to pause it, so a marquee without a toggle\n      // stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no focusable content of its own.\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = row.viewport.querySelector(\n          \"a[href], button, input, select, textarea, [tabindex]\"\n        )\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || toggles.length === 0) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-content.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  reverse?: boolean\n}\n\nconst {\n  class: className,\n  reverse = false,\n  \"data-slot\": dataSlot = \"marquee-content\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee-viewport\n  data-reverse={reverse ? \"\" : undefined}\n  class={cn(\n    \"focus-visible:ring-ring/50 overflow-x-auto outline-none contain-inline-size focus-visible:ring-3 data-active:overflow-hidden\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"-ms-[var(--marquee-gap,--spacing(4))] flex justify-center-safe\">\n    <slot />\n  </div>\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-item.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee-item\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 ps-[var(--marquee-gap,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-toggle.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  hidden\n  data-slot={dataSlot}\n  data-marquee-toggle\n  data-state=\"playing\"\n  data-play-label={playLabel}\n  data-pause-label={pauseLabel}\n  data-variant={variant}\n  data-size={size}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"group/marquee-toggle\",\n    className\n  )}\n  {...props}\n>\n  <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n  <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n  <span class=\"sr-only\" data-marquee-label>\n    {pauseLabel}\n  </span>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/marquee/index.ts",
-      "content": "export { default as Marquee } from \"./marquee.astro\"\n",
+      "content": "export { default as Marquee } from \"./marquee.astro\"\nexport { default as MarqueeContent } from \"./marquee-content.astro\"\nexport { default as MarqueeItem } from \"./marquee-item.astro\"\nexport { default as MarqueeToggle } from \"./marquee-toggle.astro\"\n",
       "type": "registry:ui"
     }
   ],
diff --git a/public/r/styles/base-mira/price.json b/public/r/styles/base-mira/price.json
index b19668ba9..5ba54ca6c 100644
--- a/public/r/styles/base-mira/price.json
+++ b/public/r/styles/base-mira/price.json
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/price/price-value.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-full bg-muted px-2 py-0.5 text-[0.625rem] font-medium text-muted-foreground\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  parseSinglePriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n    discountLabel?: string\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  discountLabel = \"Save\",\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst currentValue = parseSinglePriceValue(price)\nconst compareAtValue = parseSinglePriceValue(compareAt)\n// A compare-at price only shows when it is higher than the price.\nconst formattedCompareAt =\n  currentValue !== null &&\n  compareAtValue !== null &&\n  compareAtValue <= currentValue\n    ? null\n    : formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && formattedCompareAt !== null\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\n---\n\n{formattedPrice !== null && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt !== null && (\n      <del class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </del>\n    )}\n    {formattedDiscount !== null && (\n      <span class=\"rounded-full bg-muted px-2 py-0.5 text-[0.625rem] font-medium text-foreground\">\n        {discountLabel} {formattedDiscount}\n      </span>\n    )}\n  </span>\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/pricing-1.json b/public/r/styles/base-mira/pricing-1.json
index 69ddbb891..2649f08fb 100644
--- a/public/r/styles/base-mira/pricing-1.json
+++ b/public/r/styles/base-mira/pricing-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  locale?: string\n  discountLabel?: string\n  plans: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  locale,\n  discountLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle as=\"h3\">{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price.value}\n                compareAt={plan.price.compareAt}\n                currency={plan.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{plan.price.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-start gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/pricing-2.json b/public/r/styles/base-mira/pricing-2.json
index 6f6a446c3..14d7ffde3 100644
--- a/public/r/styles/base-mira/pricing-2.json
+++ b/public/r/styles/base-mira/pricing-2.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={index === 0 ? \"outline\" : \"default\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  locale?: string\n  discountLabel?: string\n  plans: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  locale,\n  discountLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle as=\"h3\">{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price.value}\n                compareAt={plan.price.compareAt}\n                currency={plan.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{plan.price.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-start gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/pricing-3.json b/public/r/styles/base-mira/pricing-3.json
index cf14ce08c..5e767ea90 100644
--- a/public/r/styles/base-mira/pricing-3.json
+++ b/public/r/styles/base-mira/pricing-3.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  locale?: string\n  discountLabel?: string\n  offer: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  locale,\n  discountLabel,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle as=\"h3\">{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue\n            price={offer.price.value}\n            compareAt={offer.price.compareAt}\n            currency={offer.price.currency}\n            locale={locale}\n            discountLabel={discountLabel}\n          />\n          <PriceUnit>{offer.price.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/product-1.json b/public/r/styles/base-mira/product-1.json
index 74777c9da..d09a7114b 100644
--- a/public/r/styles/base-mira/product-1.json
+++ b/public/r/styles/base-mira/product-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/product-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    compareAt?: number\n    currency: string\n    unit: string\n  }\n  locale?: string\n  discountLabel?: string\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  locale,\n  discountLabel,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] w-full rounded-lg object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 608px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue\n          price={price.value}\n          compareAt={price.compareAt}\n          currency={price.currency}\n          locale={locale}\n          discountLabel={discountLabel}\n        />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/products-1.json b/public/r/styles/base-mira/products-1.json
index 551e0e726..2bc2c4508 100644
--- a/public/r/styles/base-mira/products-1.json
+++ b/public/r/styles/base-mira/products-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 302px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/products-2.json b/public/r/styles/base-mira/products-2.json
index 47d395874..34a441afd 100644
--- a/public/r/styles/base-mira/products-2.json
+++ b/public/r/styles/base-mira/products-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"max-w-2xl\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-3\">\n      {products.map((item) => (\n        <div>\n          <Separator />\n          <div class=\"flex flex-col gap-4 py-5 md:flex-row md:items-center md:justify-between\">\n            <div class=\"flex flex-col gap-1 md:max-w-lg\">\n              <h3 class=\"text-base font-medium\">{item.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-6\">\n                {item.description}\n              </p>\n            </div>\n            <Price>\n              <PriceValue\n                price={item.price.value}\n                currency={item.price.currency}\n              />\n              <PriceUnit>{item.price.unit}</PriceUnit>\n            </Price>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"max-w-2xl\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-3\">\n      {products.map((item) => (\n        <div>\n          <Separator />\n          <div class=\"flex flex-col gap-4 py-5 md:flex-row md:items-center md:justify-between\">\n            <div class=\"flex flex-col gap-1 md:max-w-lg\">\n              <h3 class=\"text-base font-medium\">{item.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-6\">\n                {item.description}\n              </p>\n            </div>\n            <Price>\n              <PriceValue\n                price={item.price.value}\n                compareAt={item.price.compareAt}\n                currency={item.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{item.price.unit}</PriceUnit>\n            </Price>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/products-3.json b/public/r/styles/base-mira/products-3.json
index 91921d696..0e6645c63 100644
--- a/public/r/styles/base-mira/products-3.json
+++ b/public/r/styles/base-mira/products-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card class=\"text-center\">\n          <CardHeader>\n            <Price class=\"justify-center\">\n              <PriceValue\n                class=\"text-3xl font-semibold\"\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n            </Price>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-2\">\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card class=\"text-center\">\n          <CardHeader>\n            <Price class=\"justify-center\">\n              <PriceValue\n                class=\"text-3xl font-semibold\"\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n            </Price>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-2\">\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/products-4.json b/public/r/styles/base-mira/products-4.json
index 5c64e3d1f..6885edb3d 100644
--- a/public/r/styles/base-mira/products-4.json
+++ b/public/r/styles/base-mira/products-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 405px, (min-width: 64rem) 33vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/products-5.json b/public/r/styles/base-mira/products-5.json
index c9420d383..9b0a09fb9 100644
--- a/public/r/styles/base-mira/products-5.json
+++ b/public/r/styles/base-mira/products-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"gap-0 overflow-hidden\">\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[3/4] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 302px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/registry.json b/public/r/styles/base-mira/registry.json
index e6f391646..49cc58b79 100644
--- a/public/r/styles/base-mira/registry.json
+++ b/public/r/styles/base-mira/registry.json
@@ -1064,16 +1064,36 @@
       "name": "marquee",
       "type": "registry:ui",
       "title": "Marquee",
-      "description": "A continuous scrolling animation component for displaying content in a loop.",
+      "description": "A continuously scrolling row of content, with a pause control and a static fallback.",
       "categories": [
         "ui"
       ],
       "docs": "https://ui.full.dev/components/marquee/",
+      "dependencies": [
+        "embla-carousel@8.6.0",
+        "embla-carousel-auto-scroll@8.6.0",
+        "@lucide/astro"
+      ],
+      "registryDependencies": [
+        "@fulldev/button"
+      ],
       "files": [
         {
           "path": "src/components/ui/marquee/marquee.astro",
           "type": "registry:ui"
         },
+        {
+          "path": "src/components/ui/marquee/marquee-content.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/marquee/marquee-item.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/marquee/marquee-toggle.astro",
+          "type": "registry:ui"
+        },
         {
           "path": "src/components/ui/marquee/index.ts",
           "type": "registry:ui"
@@ -2721,16 +2741,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -2749,16 +2762,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -2777,16 +2783,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -3248,9 +3247,6 @@
         "features"
       ],
       "docs": "https://ui.full.dev/blocks/features/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/icon",
         "@fulldev/section"
@@ -3314,9 +3310,6 @@
         "features"
       ],
       "docs": "https://ui.full.dev/blocks/features/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/icon",
         "@fulldev/section"
diff --git a/public/r/styles/base-mira/reviews-1.json b/public/r/styles/base-mira/reviews-1.json
index 1a508f17b..d4fae359c 100644
--- a/public/r/styles/base-mira/reviews-1.json
+++ b/public/r/styles/base-mira/reviews-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-1 flex-col\">\n            <figure class=\"flex flex-1 flex-col gap-4\">\n              <div class=\"flex items-center justify-between\">\n                <Rating value={item.rating} aria-label={item.ratingLabel} />\n                <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n              </div>\n              <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n                <p>{item.quote}</p>\n              </blockquote>\n              <figcaption class=\"mt-auto flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\" aria-hidden=\"true\">\n                  <AvatarImage src={item.image} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </figcaption>\n            </figure>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/reviews-2.json b/public/r/styles/base-mira/reviews-2.json
index d5ae29850..494ef9157 100644
--- a/public/r/styles/base-mira/reviews-2.json
+++ b/public/r/styles/base-mira/reviews-2.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <figure class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        <p>{featured.quote}</p>\n      </blockquote>\n      <figcaption class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\" aria-hidden=\"true\">\n          <AvatarImage src={featured.image} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </figcaption>\n    </figure>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <div class=\"flex flex-col\">\n          <Separator />\n          <figure class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n              <p>{item.quote}</p>\n            </blockquote>\n            <figcaption class=\"flex items-center gap-3 pt-1\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={item.image} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </figcaption>\n          </figure>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/reviews-3.json b/public/r/styles/base-mira/reviews-3.json
index eb084404f..5f405a1b8 100644
--- a/public/r/styles/base-mira/reviews-3.json
+++ b/public/r/styles/base-mira/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <figure class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                <p>{item.quote}</p>\n              </blockquote>\n              <figcaption class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\" aria-hidden=\"true\">\n                  <AvatarImage src={item.image} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </figcaption>\n            </figure>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/reviews-4.json b/public/r/styles/base-mira/reviews-4.json
index 03ac5fc3e..3c962de9f 100644
--- a/public/r/styles/base-mira/reviews-4.json
+++ b/public/r/styles/base-mira/reviews-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    play: string\n    pause: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst rows = [reviews.slice(0, half), reviews.slice(half)]\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-6\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    {rows\n      .filter((row) => row.length > 0)\n      .map((row, index) => (\n        <MarqueeContent reverse={index % 2 === 1} class=\"py-1\">\n          {row.map((item) => (\n            <MarqueeItem class=\"flex\">\n              <Card class=\"w-[22rem]\">\n                <CardContent class=\"flex flex-1 flex-col\">\n                  <figure class=\"flex flex-1 flex-col gap-3\">\n                    <Rating value={item.rating} aria-label={item.ratingLabel} />\n                    <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n                      <p>{item.quote}</p>\n                    </blockquote>\n                    <figcaption class=\"mt-auto flex items-center gap-3 pt-1\">\n                      <Avatar aria-hidden=\"true\">\n                        <AvatarImage src={item.image} />\n                        <AvatarFallback>{item.initials}</AvatarFallback>\n                      </Avatar>\n                      <div>\n                        <p class=\"text-foreground text-sm font-medium\">\n                          {item.name}\n                        </p>\n                        <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                      </div>\n                    </figcaption>\n                  </figure>\n                </CardContent>\n              </Card>\n            </MarqueeItem>\n          ))}\n        </MarqueeContent>\n      ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/reviews-5.json b/public/r/styles/base-mira/reviews-5.json
index 8b3458106..4f438bd1b 100644
--- a/public/r/styles/base-mira/reviews-5.json
+++ b/public/r/styles/base-mira/reviews-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    play: string\n    pause: string\n  }\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst rows = [\n  reviews.slice(0, third),\n  reviews.slice(third, third * 2),\n  reviews.slice(third * 2),\n]\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-5\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    {rows\n      .filter((row) => row.length > 0)\n      .map((row, index) => (\n        <MarqueeContent reverse={index % 2 === 1} class=\"py-1\">\n          {row.map((item) => (\n            <MarqueeItem class=\"flex\">\n              <figure class=\"bg-muted/50 flex w-[26rem] flex-col gap-4 rounded-2xl p-6\">\n                <figcaption class=\"flex items-center justify-between gap-3\">\n                  <div class=\"flex items-center gap-3\">\n                    <Avatar size=\"lg\" aria-hidden=\"true\">\n                      <AvatarImage src={item.image} />\n                      <AvatarFallback>{item.initials}</AvatarFallback>\n                    </Avatar>\n                    <div>\n                      <p class=\"text-foreground text-sm font-semibold\">\n                        {item.name}\n                      </p>\n                      <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                    </div>\n                  </div>\n                  <Rating value={item.rating} aria-label={item.ratingLabel} />\n                </figcaption>\n                <div class=\"flex gap-2.5\">\n                  <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n                  <blockquote class=\"text-foreground/80 text-sm leading-relaxed\">\n                    <p>{item.quote}</p>\n                  </blockquote>\n                </div>\n              </figure>\n            </MarqueeItem>\n          ))}\n        </MarqueeContent>\n      ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/section.json b/public/r/styles/base-mira/section.json
index 2bc879462..8129c4ea0 100644
--- a/public/r/styles/base-mira/section.json
+++ b/public/r/styles/base-mira/section.json
@@ -6,12 +6,12 @@
   "files": [
     {
       "path": "src/components/ui/section/section.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-10 py-[var(--section-padding,--spacing(12))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-12 rounded-lg bg-background ring-1 ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-10 py-[var(--section-padding,--spacing(12))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-12 rounded-lg bg-background ring-1 ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  \"data-slot\": dataSlot = \"section\",\n  ...props\n} = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot={dataSlot}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/section/section-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"section-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] flex-col gap-8 px-[var(--gutter,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"section-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"relative mx-auto w-full max-w-[var(--container,var(--container-7xl))] px-[var(--gutter,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/services-1.json b/public/r/styles/base-mira/services-1.json
index 4d5ac713e..0ad551b55 100644
--- a/public/r/styles/base-mira/services-1.json
+++ b/public/r/styles/base-mira/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href != null && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs\",\n              service.href != null && \"transition-shadow hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? \"\"}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 80rem) 294px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/services-2.json b/public/r/styles/base-mira/services-2.json
index f2b3db6bc..8c24f803c 100644
--- a/public/r/styles/base-mira/services-2.json
+++ b/public/r/styles/base-mira/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"grid items-center gap-6 rounded-xl border p-4 shadow-xs md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/services-3.json b/public/r/styles/base-mira/services-3.json
index f259c104f..53b390522 100644
--- a/public/r/styles/base-mira/services-3.json
+++ b/public/r/styles/base-mira/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"absolute inset-0 -z-10 size-full object-cover\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 80rem) 612px, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/services-4.json b/public/r/styles/base-mira/services-4.json
index d357efabf..a848dbe59 100644
--- a/public/r/styles/base-mira/services-4.json
+++ b/public/r/styles/base-mira/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 294px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.link && (\n            <a\n              href={service.link.href}\n              class=\"text-primary inline-flex w-fit items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline\"\n            >\n              {service.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/services-5.json b/public/r/styles/base-mira/services-5.json
index def369794..2458133c0 100644
--- a/public/r/styles/base-mira/services-5.json
+++ b/public/r/styles/base-mira/services-5.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background relative flex flex-col gap-4 p-7\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 ring-inset\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.link && (\n            <a\n              href={service.link.href}\n              class=\"text-primary mt-auto inline-flex w-fit items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline\"\n            >\n              {service.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/services-6.json b/public/r/styles/base-mira/services-6.json
index 70206a046..82f8c027b 100644
--- a/public/r/styles/base-mira/services-6.json
+++ b/public/r/styles/base-mira/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 436px, (min-width: 64rem) 35vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/services-7.json b/public/r/styles/base-mira/services-7.json
index 623952170..bbc7e0404 100644
--- a/public/r/styles/base-mira/services-7.json
+++ b/public/r/styles/base-mira/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 1024px) 66vw, 100vw\"\n                  : \"(min-width: 1024px) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs\",\n              service.href != null && \"transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? \"\"}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 80rem) 824px, (min-width: 64rem) 66vw, 100vw\"\n                  : \"(min-width: 80rem) 400px, (min-width: 64rem) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/sidebar-1.json b/public/r/styles/base-mira/sidebar-1.json
index 3476f325b..4ec41b325 100644
--- a/public/r/styles/base-mira/sidebar-1.json
+++ b/public/r/styles/base-mira/sidebar-1.json
@@ -22,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebar: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar\n    class={cn(\"\", className)}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebar} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={labels.github}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  currentPath: string\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    sidebar: string\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebarToggle: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  currentPath: rawCurrentPath,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n  ...props\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(rawCurrentPath)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider {...props}>\n  <Sidebar\n    aria-label={labels.sidebar}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebarToggle} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            <Icon name=\"github\" />\n            <span class=\"sr-only\">{labels.github}</span>\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/sidebar.json b/public/r/styles/base-mira/sidebar.json
index 7e0aa5523..9adee0c09 100644
--- a/public/r/styles/base-mira/sidebar.json
+++ b/public/r/styles/base-mira/sidebar.json
@@ -24,7 +24,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"px-2 py-1 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <aside\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"px-2 py-1 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </aside>\n    </div>\n  </>\n)}\n",
       "type": "registry:ui"
     },
     {
@@ -34,7 +34,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar-rail.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst { class: className, type = \"button\", ...props } = Astro.props\n---\n\n<button\n  data-sidebar=\"rail\"\n  data-slot=\"sidebar-rail\"\n  aria-label=\"Toggle Sidebar\"\n  tabindex={-1}\n  title=\"Toggle Sidebar\"\n  type={type}\n  class={cn(\n    \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n    \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n    \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n    \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n    \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n    \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n    className\n  )}\n  {...props}\n></button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  type = \"button\",\n  \"aria-label\": ariaLabel = \"Toggle Sidebar\",\n  title = ariaLabel,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-sidebar=\"rail\"\n  data-slot=\"sidebar-rail\"\n  aria-label={ariaLabel}\n  tabindex={-1}\n  title={title}\n  type={type}\n  class={cn(\n    \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n    \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n    \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n    \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n    \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n    \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n    className\n  )}\n  {...props}\n></button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/article-1.json b/public/r/styles/base-nova/article-1.json
index c45df6988..a864d2860 100644
--- a/public/r/styles/base-nova/article-1.json
+++ b/public/r/styles/base-nova/article-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/article-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"max-w-2xl\">\n    <article class=\"flex flex-col gap-8\">\n      <header class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n            {title}\n          </h1>\n          <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n            {description}\n          </p>\n        </div>\n        <div class=\"flex items-center gap-3\">\n          <Avatar size=\"lg\" aria-hidden=\"true\">\n            <AvatarImage src={author.image} />\n            <AvatarFallback>{author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n          </div>\n        </div>\n      </header>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 42rem) 42rem, 100vw\"\n        loading=\"eager\"\n        fetchpriority=\"high\"\n      />\n      <div class=\"flex flex-col gap-6 text-base leading-8\">\n        <slot />\n      </div>\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/article-2.json b/public/r/styles/base-nova/article-2.json
index 6511245f3..c0a3f5f9a 100644
--- a/public/r/styles/base-nova/article-2.json
+++ b/public/r/styles/base-nova/article-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/article-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"max-w-2xl\">\n    <article class=\"flex flex-col gap-8\">\n      <header class=\"flex flex-col items-center gap-6 text-center\">\n        <div class=\"flex flex-col gap-4\">\n          <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n            {title}\n          </h1>\n          <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n            {description}\n          </p>\n        </div>\n        <div class=\"flex items-center gap-3\">\n          <Avatar size=\"lg\" aria-hidden=\"true\">\n            <AvatarImage src={author.image} />\n            <AvatarFallback>{author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col text-left\">\n            <p class=\"text-sm font-medium\">\n              {author.name}{\" \"}\n              <span class=\"text-muted-foreground font-normal\">\n                &middot; {author.date}\n              </span>\n            </p>\n            <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n          </div>\n        </div>\n      </header>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 42rem) 42rem, 100vw\"\n        loading=\"eager\"\n        fetchpriority=\"high\"\n      />\n      <div class=\"flex flex-col gap-6 text-base leading-8\">\n        <slot />\n      </div>\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/articles-1.json b/public/r/styles/base-nova/articles-1.json
index 30aa52bd2..2c9f3ed3b 100644
--- a/public/r/styles/base-nova/articles-1.json
+++ b/public/r/styles/base-nova/articles-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/articles-2.json b/public/r/styles/base-nova/articles-2.json
index a9d78a9f5..6e60d3f18 100644
--- a/public/r/styles/base-nova/articles-2.json
+++ b/public/r/styles/base-nova/articles-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class={cn(\n        \"grid gap-6 rounded-xl lg:grid-cols-2 lg:items-center lg:pr-4\",\n        featured.href != null &&\n          \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n      )}\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 80rem) 616px, (min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar aria-hidden=\"true\">\n            <AvatarImage src={featured.author.image} />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/articles-3.json b/public/r/styles/base-nova/articles-3.json
index e4182724a..bd0837d65 100644
--- a/public/r/styles/base-nova/articles-3.json
+++ b/public/r/styles/base-nova/articles-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"bg-muted/50 flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/articles-4.json b/public/r/styles/base-nova/articles-4.json
index b0c908073..ddff63354 100644
--- a/public/r/styles/base-nova/articles-4.json
+++ b/public/r/styles/base-nova/articles-4.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl border p-6\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/blocks-1.json b/public/r/styles/base-nova/blocks-1.json
index a0da615ca..8719d1a46 100644
--- a/public/r/styles/base-nova/blocks-1.json
+++ b/public/r/styles/base-nova/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"flex flex-col gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/carousel.json b/public/r/styles/base-nova/carousel.json
index 9c27dc50e..5584f6f46 100644
--- a/public/r/styles/base-nova/carousel.json
+++ b/public/r/styles/base-nova/carousel.json
@@ -13,27 +13,27 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  \"data-slot\": dataSlot = \"carousel\",\n  // A named section is a region landmark. Without a name it would have no\n  // role, so it becomes a group, the other container role the APG carousel\n  // allows.\n  role = Astro.props[\"aria-label\"] || Astro.props[\"aria-labelledby\"]\n    ? undefined\n    : \"group\",\n  ...props\n} = Astro.props\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot={dataSlot}\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={role}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts. The data-carousel-* markers stay\n  // in place when a caller overrides data-slot.\n  const rootSelector = \"[data-carousel-options]\"\n  const getParts = <T extends Element>(root: CarouselRoot, part: string) =>\n    [...root.querySelectorAll<T>(`[data-carousel-${part}]`)].filter(\n      (element) => element.closest(rootSelector) === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(rootSelector)) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"viewport\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"previous\")\n      const next = getParts<HTMLButtonElement>(root, \"next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest(rootSelector) !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-content.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div class=\"overflow-hidden\" data-slot=\"carousel-content\">\n  <div\n    data-slot=\"carousel-container\"\n    class={cn(\n      \"flex [touch-action:pan-y_pinch-zoom]\",\n      \"group-data-[orientation=vertical]/carousel:-mt-4 group-data-[orientation=vertical]/carousel:[touch-action:pan-x_pinch-zoom] group-data-[orientation=vertical]/carousel:flex-col\",\n      \"group-data-[orientation=horizontal]/carousel:-ml-4\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"carousel-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class=\"overflow-hidden\"\n  data-slot=\"carousel-content\"\n  data-carousel-viewport\n>\n  <div\n    data-slot={dataSlot}\n    class={cn(\n      \"flex [touch-action:pan-y_pinch-zoom]\",\n      \"group-data-[orientation=vertical]/carousel:-mt-4 group-data-[orientation=vertical]/carousel:[touch-action:pan-x_pinch-zoom] group-data-[orientation=vertical]/carousel:flex-col\",\n      \"group-data-[orientation=horizontal]/carousel:-ml-4\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  \"data-slot\": dataSlot = \"carousel-item\",\n  role = \"group\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  role={role}\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-next.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  \"data-slot\": dataSlot = \"carousel-next\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot={dataSlot}\n  data-carousel-next\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-previous.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  \"data-slot\": dataSlot = \"carousel-previous\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot={dataSlot}\n  data-carousel-previous\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/contact-1.json b/public/r/styles/base-nova/contact-1.json
index 9af391672..cb4345f47 100644
--- a/public/r/styles/base-nova/contact-1.json
+++ b/public/r/styles/base-nova/contact-1.json
@@ -3,22 +3,15 @@
   "name": "contact-1",
   "title": "Contact 1",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n                aria-describedby={`${formId}-message-description`}\n              />\n              <FieldDescription id={`${formId}-message-description`}>\n                {form.messageDescription}\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <li class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          <Button\n            as=\"span\"\n            variant=\"secondary\"\n            size=\"icon\"\n            class=\"text-primary\"\n            aria-hidden=\"true\"\n          >\n            <Icon name={item.icon} />\n          </Button>\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          {item.href != null ? (\n            <a\n              href={item.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n            >\n              {item.description}\n            </a>\n          ) : (\n            <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n              {item.description}\n            </p>\n          )}\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n  {Astro.slots.has(\"default\") && (\n    <SectionContainer>\n      <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n        <slot />\n      </div>\n    </SectionContainer>\n  )}\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/contact-2.json b/public/r/styles/base-nova/contact-2.json
index 97172ad7d..ec5bb574f 100644
--- a/public/r/styles/base-nova/contact-2.json
+++ b/public/r/styles/base-nova/contact-2.json
@@ -3,22 +3,15 @@
   "name": "contact-2",
   "title": "Contact 2",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    title: string\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1fr)_22rem] lg:items-start\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <div class=\"mb-6\">\n          <h3 class=\"text-lg font-medium\">{form.title}</h3>\n        </div>\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n\n    <div class=\"flex flex-col gap-3\">\n      {contactItems.map((item) => (\n        <div class=\"flex gap-4 rounded-xl border p-4\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <div class=\"flex flex-col gap-1\">\n            <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1fr)_22rem] lg:items-start\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {Astro.slots.has(\"default\") && (\n        <div class=\"rounded-xl border p-6\">\n          <slot />\n        </div>\n      )}\n    </div>\n\n    <ul class=\"flex flex-col gap-3\">\n      {contactItems.map((item) => (\n        <li class=\"flex gap-4 rounded-xl border p-4\">\n          <Button\n            as=\"span\"\n            variant=\"secondary\"\n            size=\"icon\"\n            class=\"text-primary shrink-0\"\n            aria-hidden=\"true\"\n          >\n            <Icon name={item.icon} />\n          </Button>\n          <div class=\"flex flex-col gap-1\">\n            <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n            {item.href != null ? (\n              <a\n                href={item.href}\n                class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n              >\n                {item.description}\n              </a>\n            ) : (\n              <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n                {item.description}\n              </p>\n            )}\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/contact-3.json b/public/r/styles/base-nova/contact-3.json
index 15a42d48f..b50f57b6e 100644
--- a/public/r/styles/base-nova/contact-3.json
+++ b/public/r/styles/base-nova/contact-3.json
@@ -3,22 +3,15 @@
   "name": "contact-3",
   "title": "Contact 3",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <li class=\"flex gap-4\">\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n            <div class=\"flex min-w-0 flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              {item.href != null ? (\n                <a\n                  href={item.href}\n                  class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n                >\n                  {item.description}\n                </a>\n              ) : (\n                <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n                  {item.description}\n                </p>\n              )}\n            </div>\n          </li>\n        ))}\n      </ul>\n      {Astro.slots.has(\"default\") && (\n        <div class=\"rounded-xl border p-6\">\n          <slot />\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/content-1.json b/public/r/styles/base-nova/content-1.json
index 37cc98379..45ceca637 100644
--- a/public/r/styles/base-nova/content-1.json
+++ b/public/r/styles/base-nova/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-3 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-3 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/content-2.json b/public/r/styles/base-nova/content-2.json
index 693b5d9bb..7675cc352 100644
--- a/public/r/styles/base-nova/content-2.json
+++ b/public/r/styles/base-nova/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/content-3.json b/public/r/styles/base-nova/content-3.json
index fdc0b7afd..cf3b62853 100644
--- a/public/r/styles/base-nova/content-3.json
+++ b/public/r/styles/base-nova/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/content-4.json b/public/r/styles/base-nova/content-4.json
index 4dd1cd6f3..fcce4f136 100644
--- a/public/r/styles/base-nova/content-4.json
+++ b/public/r/styles/base-nova/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 80rem) 800px, (min-width: 64rem) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/cta-1.json b/public/r/styles/base-nova/cta-1.json
index 880fa60eb..10cbc452e 100644
--- a/public/r/styles/base-nova/cta-1.json
+++ b/public/r/styles/base-nova/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/cta-2.json b/public/r/styles/base-nova/cta-2.json
index 05cfb2687..347395042 100644
--- a/public/r/styles/base-nova/cta-2.json
+++ b/public/r/styles/base-nova/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/cta-3.json b/public/r/styles/base-nova/cta-3.json
index caf08c91a..d8a956197 100644
--- a/public/r/styles/base-nova/cta-3.json
+++ b/public/r/styles/base-nova/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/cta-4.json b/public/r/styles/base-nova/cta-4.json
index 2ed196c48..43d7c1bd8 100644
--- a/public/r/styles/base-nova/cta-4.json
+++ b/public/r/styles/base-nova/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/cta-5.json b/public/r/styles/base-nova/cta-5.json
index 39ff0c7bb..7a122cb13 100644
--- a/public/r/styles/base-nova/cta-5.json
+++ b/public/r/styles/base-nova/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/cta-6.json b/public/r/styles/base-nova/cta-6.json
index cbd7368fe..9aa3276fe 100644
--- a/public/r/styles/base-nova/cta-6.json
+++ b/public/r/styles/base-nova/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/cta-7.json b/public/r/styles/base-nova/cta-7.json
index 86813e6c0..b6755b388 100644
--- a/public/r/styles/base-nova/cta-7.json
+++ b/public/r/styles/base-nova/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-muted-foreground text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription class=\"text-foreground/80\">\n        {description}\n      </SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-foreground/80 text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/cta-8.json b/public/r/styles/base-nova/cta-8.json
index eaac34d78..7acaffa25 100644
--- a/public/r/styles/base-nova/cta-8.json
+++ b/public/r/styles/base-nova/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col gap-8 before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/doc-1.json b/public/r/styles/base-nova/doc-1.json
index 9c98b34f9..49048e0e5 100644
--- a/public/r/styles/base-nova/doc-1.json
+++ b/public/r/styles/base-nova/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"flex flex-col gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/faqs-1.json b/public/r/styles/base-nova/faqs-1.json
index 92d59430a..fe0decf6f 100644
--- a/public/r/styles/base-nova/faqs-1.json
+++ b/public/r/styles/base-nova/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/faqs-3.json b/public/r/styles/base-nova/faqs-3.json
index a0d634566..cd5d5197c 100644
--- a/public/r/styles/base-nova/faqs-3.json
+++ b/public/r/styles/base-nova/faqs-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/faqs-4.json b/public/r/styles/base-nova/faqs-4.json
index 4fe0db0bb..19de0d927 100644
--- a/public/r/styles/base-nova/faqs-4.json
+++ b/public/r/styles/base-nova/faqs-4.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst { class: className, title, faqs, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center\">\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <SectionTitle>{title}</SectionTitle>\n      <div class=\"mt-10\">\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst { class: className, title, faqs, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center\">\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <SectionTitle>{title}</SectionTitle>\n      <div class=\"mt-10\">\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/features-1.json b/public/r/styles/base-nova/features-1.json
index 585c6b7f2..61240563f 100644
--- a/public/r/styles/base-nova/features-1.json
+++ b/public/r/styles/base-nova/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <li class=\"flex flex-col gap-4 rounded-xl border p-6\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.link && (\n            <a\n              href={feature.link.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/features-2.json b/public/r/styles/base-nova/features-2.json
index 467338413..a15ebe78c 100644
--- a/public/r/styles/base-nova/features-2.json
+++ b/public/r/styles/base-nova/features-2.json
@@ -3,9 +3,6 @@
   "name": "features-2",
   "title": "Features 2",
   "description": "Feature section layouts for product narratives, launch pages, and capability overviews.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/icon",
     "@fulldev/section"
@@ -13,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li class=\"bg-background relative flex flex-col items-center gap-4 p-7 text-center\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 ring-inset\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/features-3.json b/public/r/styles/base-nova/features-3.json
index 83402f1a0..0f7902b8c 100644
--- a/public/r/styles/base-nova/features-3.json
+++ b/public/r/styles/base-nova/features-3.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex items-center gap-5 rounded-xl border p-4 transition-colors\">\n          <Image\n            src={feature.image.src}\n            alt={feature.image.alt}\n            class=\"size-20 shrink-0 rounded-lg object-cover\"\n            widths={[160, 320]}\n            sizes=\"80px\"\n          />\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-5 rounded-xl border p-4\">\n          <Image\n            src={feature.image.src}\n            alt={feature.image.alt}\n            class=\"size-20 shrink-0 rounded-lg object-cover\"\n            widths={[160, 320]}\n            sizes=\"80px\"\n          />\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/features-4.json b/public/r/styles/base-nova/features-4.json
index 6cadcba43..437798358 100644
--- a/public/r/styles/base-nova/features-4.json
+++ b/public/r/styles/base-nova/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <ul class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <li class=\"flex flex-col gap-4 rounded-xl border p-6\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.link && (\n              <a\n                href={feature.link.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.link.label}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </li>\n        ))}\n      </ul>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/features-5.json b/public/r/styles/base-nova/features-5.json
index 61eba406f..420643adf 100644
--- a/public/r/styles/base-nova/features-5.json
+++ b/public/r/styles/base-nova/features-5.json
@@ -3,9 +3,6 @@
   "name": "features-5",
   "title": "Features 5",
   "description": "Feature section layouts for product narratives, launch pages, and capability overviews.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/icon",
     "@fulldev/section"
@@ -13,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li class=\"flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/features-6.json b/public/r/styles/base-nova/features-6.json
index d21ff5c93..9b01c7537 100644
--- a/public/r/styles/base-nova/features-6.json
+++ b/public/r/styles/base-nova/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/footer-1.json b/public/r/styles/base-nova/footer-1.json
index 7ac3e8331..6e75db4ac 100644
--- a/public/r/styles/base-nova/footer-1.json
+++ b/public/r/styles/base-nova/footer-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer class=\"flex flex-col gap-8\">\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <h2 class=\"text-sm font-medium\">{column.title}</h2>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/footer-2.json b/public/r/styles/base-nova/footer-2.json
index 217f595bb..d5fbcdfec 100644
--- a/public/r/styles/base-nova/footer-2.json
+++ b/public/r/styles/base-nova/footer-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      <div class=\"flex items-center justify-center gap-3\">\n        {socials.map((social) => (\n          <a\n            href={social.href}\n            class=\"text-muted-foreground hover:text-foreground transition-colors\"\n            aria-label={social.label}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n          >\n            <Icon name={social.icon} href={social.href} class=\"size-4\" />\n          </a>\n        ))}\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      {socials.length > 0 && (\n        <div class=\"flex items-center justify-center gap-3\">\n          {socials.map((social) => (\n            <a\n              href={social.href}\n              class=\"text-muted-foreground hover:text-foreground transition-colors\"\n              aria-label={social.label}\n            >\n              <Icon name={social.icon} href={social.href} class=\"size-4\" />\n            </a>\n          ))}\n        </div>\n      )}\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/footer-3.json b/public/r/styles/base-nova/footer-3.json
index b5bc278e9..27d6eb84e 100644
--- a/public/r/styles/base-nova/footer-3.json
+++ b/public/r/styles/base-nova/footer-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer class=\"flex flex-col gap-8\">\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <h2 class=\"text-sm font-medium\">{column.title}</h2>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/header-1.json b/public/r/styles/base-nova/header-1.json
index 04e97f870..0d30a4b82 100644
--- a/public/r/styles/base-nova/header-1.json
+++ b/public/r/styles/base-nova/header-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/header-2.json b/public/r/styles/base-nova/header-2.json
index bf90c1ae2..de9ea7e7e 100644
--- a/public/r/styles/base-nova/header-2.json
+++ b/public/r/styles/base-nova/header-2.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/header-3.json b/public/r/styles/base-nova/header-3.json
index 47c08e12a..692a5958b 100644
--- a/public/r/styles/base-nova/header-3.json
+++ b/public/r/styles/base-nova/header-3.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/header-4.json b/public/r/styles/base-nova/header-4.json
index ffb2e5781..1350739ab 100644
--- a/public/r/styles/base-nova/header-4.json
+++ b/public/r/styles/base-nova/header-4.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/header-5.json b/public/r/styles/base-nova/header-5.json
index 385f2d55a..be9b68bd9 100644
--- a/public/r/styles/base-nova/header-5.json
+++ b/public/r/styles/base-nova/header-5.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/header.json b/public/r/styles/base-nova/header.json
index cd55b86d5..b1de8b2cc 100644
--- a/public/r/styles/base-nova/header.json
+++ b/public/r/styles/base-nova/header.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/header/header.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-lg border bg-background mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-lg border bg-background mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  \"data-slot\": dataSlot = \"header\",\n  ...props\n} = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot={dataSlot}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/hero-1.json b/public/r/styles/base-nova/hero-1.json
index 74dc8b92d..3001b9ff4 100644
--- a/public/r/styles/base-nova/hero-1.json
+++ b/public/r/styles/base-nova/hero-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n      {badge.label}\n    </Badge>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge?: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    {badge && (\n      <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n        {badge.label}\n      </Badge>\n    )}\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/hero-10.json b/public/r/styles/base-nova/hero-10.json
index 96ed3c089..770bb0a86 100644
--- a/public/r/styles/base-nova/hero-10.json
+++ b/public/r/styles/base-nova/hero-10.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-10.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/hero-11.json b/public/r/styles/base-nova/hero-11.json
index 86a7f5e03..09a801205 100644
--- a/public/r/styles/base-nova/hero-11.json
+++ b/public/r/styles/base-nova/hero-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-11.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/hero-12.json b/public/r/styles/base-nova/hero-12.json
index a88805751..77a37b010 100644
--- a/public/r/styles/base-nova/hero-12.json
+++ b/public/r/styles/base-nova/hero-12.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-12.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/hero-13.json b/public/r/styles/base-nova/hero-13.json
index f25d55373..f1f708613 100644
--- a/public/r/styles/base-nova/hero-13.json
+++ b/public/r/styles/base-nova/hero-13.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-13.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 900px, (min-width: 64rem) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/hero-2.json b/public/r/styles/base-nova/hero-2.json
index 672b023de..872bdcf70 100644
--- a/public/r/styles/base-nova/hero-2.json
+++ b/public/r/styles/base-nova/hero-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/hero-3.json b/public/r/styles/base-nova/hero-3.json
index 03cde7001..dcd3d0d23 100644
--- a/public/r/styles/base-nova/hero-3.json
+++ b/public/r/styles/base-nova/hero-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/hero-4.json b/public/r/styles/base-nova/hero-4.json
index ccdf499cf..b0e278928 100644
--- a/public/r/styles/base-nova/hero-4.json
+++ b/public/r/styles/base-nova/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/hero-5.json b/public/r/styles/base-nova/hero-5.json
index a11173eff..1b95a5469 100644
--- a/public/r/styles/base-nova/hero-5.json
+++ b/public/r/styles/base-nova/hero-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/hero-6.json b/public/r/styles/base-nova/hero-6.json
index f458c5879..b60078e9c 100644
--- a/public/r/styles/base-nova/hero-6.json
+++ b/public/r/styles/base-nova/hero-6.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/hero-7.json b/public/r/styles/base-nova/hero-7.json
index e417ccade..75d00053f 100644
--- a/public/r/styles/base-nova/hero-7.json
+++ b/public/r/styles/base-nova/hero-7.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 750px, (min-width: 64rem) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/hero-8.json b/public/r/styles/base-nova/hero-8.json
index a3db6ba64..2ed1b607f 100644
--- a/public/r/styles/base-nova/hero-8.json
+++ b/public/r/styles/base-nova/hero-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-8.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 936px, (min-width: 64rem) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/hero-9.json b/public/r/styles/base-nova/hero-9.json
index 22397aa77..3fc4a2faa 100644
--- a/public/r/styles/base-nova/hero-9.json
+++ b/public/r/styles/base-nova/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/links-2.json b/public/r/styles/base-nova/links-2.json
index 9e1d20ae8..ed6e31559 100644
--- a/public/r/styles/base-nova/links-2.json
+++ b/public/r/styles/base-nova/links-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/links-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/logos-1.json b/public/r/styles/base-nova/logos-1.json
index de017ff6a..de62b4b00 100644
--- a/public/r/styles/base-nova/logos-1.json
+++ b/public/r/styles/base-nova/logos-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <li>\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground transition-colors focus-visible:text-foreground\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/logos-2.json b/public/r/styles/base-nova/logos-2.json
index 3d3960693..48760e394 100644
--- a/public/r/styles/base-nova/logos-2.json
+++ b/public/r/styles/base-nova/logos-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n  labels: {\n    play: string\n    pause: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  brands,\n  labels,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-4 [--marquee-gap:--spacing(12)]\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    <MarqueeContent class=\"text-muted-foreground mask-x-from-90%\">\n      {brands.map((brand) => (\n        <MarqueeItem class=\"flex items-center\">\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground focus-visible:text-foreground transition-colors\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </MarqueeItem>\n      ))}\n    </MarqueeContent>\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/logos-3.json b/public/r/styles/base-nova/logos-3.json
index f0f2762ed..4824f14cc 100644
--- a/public/r/styles/base-nova/logos-3.json
+++ b/public/r/styles/base-nova/logos-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"py-12 lg:py-16\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"text-muted-foreground flex flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"py-12 lg:py-16\", className)} {...props}>\n  <SectionContainer>\n    <ul class=\"text-muted-foreground flex flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <li>\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground transition-colors focus-visible:text-foreground\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/marquee.json b/public/r/styles/base-nova/marquee.json
index c932b246a..c0543ae7f 100644
--- a/public/r/styles/base-nova/marquee.json
+++ b/public/r/styles/base-nova/marquee.json
@@ -2,16 +2,39 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "marquee",
   "title": "Marquee",
-  "description": "A continuous scrolling animation component for displaying content in a loop.",
+  "description": "A continuously scrolling row of content, with a pause control and a static fallback.",
+  "dependencies": [
+    "embla-carousel@8.6.0",
+    "embla-carousel-auto-scroll@8.6.0",
+    "@lucide/astro"
+  ],
+  "registryDependencies": [
+    "@fulldev/button"
+  ],
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  data-slot={dataSlot}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({ viewport }))\n      // Moving content needs a way to pause it, so a marquee without a toggle\n      // stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no focusable content of its own.\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = row.viewport.querySelector(\n          \"a[href], button, input, select, textarea, [tabindex]\"\n        )\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || toggles.length === 0) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-content.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  reverse?: boolean\n}\n\nconst {\n  class: className,\n  reverse = false,\n  \"data-slot\": dataSlot = \"marquee-content\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee-viewport\n  data-reverse={reverse ? \"\" : undefined}\n  class={cn(\n    \"focus-visible:ring-ring/50 overflow-x-auto outline-none contain-inline-size focus-visible:ring-3 data-active:overflow-hidden\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"-ms-[var(--marquee-gap,--spacing(4))] flex justify-center-safe\">\n    <slot />\n  </div>\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-item.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee-item\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 ps-[var(--marquee-gap,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-toggle.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  hidden\n  data-slot={dataSlot}\n  data-marquee-toggle\n  data-state=\"playing\"\n  data-play-label={playLabel}\n  data-pause-label={pauseLabel}\n  data-variant={variant}\n  data-size={size}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"group/marquee-toggle\",\n    className\n  )}\n  {...props}\n>\n  <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n  <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n  <span class=\"sr-only\" data-marquee-label>\n    {pauseLabel}\n  </span>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/marquee/index.ts",
-      "content": "export { default as Marquee } from \"./marquee.astro\"\n",
+      "content": "export { default as Marquee } from \"./marquee.astro\"\nexport { default as MarqueeContent } from \"./marquee-content.astro\"\nexport { default as MarqueeItem } from \"./marquee-item.astro\"\nexport { default as MarqueeToggle } from \"./marquee-toggle.astro\"\n",
       "type": "registry:ui"
     }
   ],
diff --git a/public/r/styles/base-nova/price.json b/public/r/styles/base-nova/price.json
index d815f6576..e512209cd 100644
--- a/public/r/styles/base-nova/price.json
+++ b/public/r/styles/base-nova/price.json
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/price/price-value.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  parseSinglePriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n    discountLabel?: string\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  discountLabel = \"Save\",\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst currentValue = parseSinglePriceValue(price)\nconst compareAtValue = parseSinglePriceValue(compareAt)\n// A compare-at price only shows when it is higher than the price.\nconst formattedCompareAt =\n  currentValue !== null &&\n  compareAtValue !== null &&\n  compareAtValue <= currentValue\n    ? null\n    : formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && formattedCompareAt !== null\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\n---\n\n{formattedPrice !== null && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt !== null && (\n      <del class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </del>\n    )}\n    {formattedDiscount !== null && (\n      <span class=\"rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-foreground\">\n        {discountLabel} {formattedDiscount}\n      </span>\n    )}\n  </span>\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/pricing-1.json b/public/r/styles/base-nova/pricing-1.json
index 69ddbb891..2649f08fb 100644
--- a/public/r/styles/base-nova/pricing-1.json
+++ b/public/r/styles/base-nova/pricing-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  locale?: string\n  discountLabel?: string\n  plans: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  locale,\n  discountLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle as=\"h3\">{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price.value}\n                compareAt={plan.price.compareAt}\n                currency={plan.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{plan.price.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-start gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/pricing-2.json b/public/r/styles/base-nova/pricing-2.json
index 6f6a446c3..14d7ffde3 100644
--- a/public/r/styles/base-nova/pricing-2.json
+++ b/public/r/styles/base-nova/pricing-2.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={index === 0 ? \"outline\" : \"default\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  locale?: string\n  discountLabel?: string\n  plans: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  locale,\n  discountLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle as=\"h3\">{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price.value}\n                compareAt={plan.price.compareAt}\n                currency={plan.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{plan.price.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-start gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/pricing-3.json b/public/r/styles/base-nova/pricing-3.json
index cf14ce08c..5e767ea90 100644
--- a/public/r/styles/base-nova/pricing-3.json
+++ b/public/r/styles/base-nova/pricing-3.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  locale?: string\n  discountLabel?: string\n  offer: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  locale,\n  discountLabel,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle as=\"h3\">{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue\n            price={offer.price.value}\n            compareAt={offer.price.compareAt}\n            currency={offer.price.currency}\n            locale={locale}\n            discountLabel={discountLabel}\n          />\n          <PriceUnit>{offer.price.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/product-1.json b/public/r/styles/base-nova/product-1.json
index 74777c9da..d09a7114b 100644
--- a/public/r/styles/base-nova/product-1.json
+++ b/public/r/styles/base-nova/product-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/product-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    compareAt?: number\n    currency: string\n    unit: string\n  }\n  locale?: string\n  discountLabel?: string\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  locale,\n  discountLabel,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] w-full rounded-lg object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 608px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue\n          price={price.value}\n          compareAt={price.compareAt}\n          currency={price.currency}\n          locale={locale}\n          discountLabel={discountLabel}\n        />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/products-1.json b/public/r/styles/base-nova/products-1.json
index 551e0e726..2bc2c4508 100644
--- a/public/r/styles/base-nova/products-1.json
+++ b/public/r/styles/base-nova/products-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 302px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/products-2.json b/public/r/styles/base-nova/products-2.json
index 47d395874..34a441afd 100644
--- a/public/r/styles/base-nova/products-2.json
+++ b/public/r/styles/base-nova/products-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"max-w-2xl\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-3\">\n      {products.map((item) => (\n        <div>\n          <Separator />\n          <div class=\"flex flex-col gap-4 py-5 md:flex-row md:items-center md:justify-between\">\n            <div class=\"flex flex-col gap-1 md:max-w-lg\">\n              <h3 class=\"text-base font-medium\">{item.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-6\">\n                {item.description}\n              </p>\n            </div>\n            <Price>\n              <PriceValue\n                price={item.price.value}\n                currency={item.price.currency}\n              />\n              <PriceUnit>{item.price.unit}</PriceUnit>\n            </Price>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"max-w-2xl\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-3\">\n      {products.map((item) => (\n        <div>\n          <Separator />\n          <div class=\"flex flex-col gap-4 py-5 md:flex-row md:items-center md:justify-between\">\n            <div class=\"flex flex-col gap-1 md:max-w-lg\">\n              <h3 class=\"text-base font-medium\">{item.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-6\">\n                {item.description}\n              </p>\n            </div>\n            <Price>\n              <PriceValue\n                price={item.price.value}\n                compareAt={item.price.compareAt}\n                currency={item.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{item.price.unit}</PriceUnit>\n            </Price>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/products-3.json b/public/r/styles/base-nova/products-3.json
index 91921d696..0e6645c63 100644
--- a/public/r/styles/base-nova/products-3.json
+++ b/public/r/styles/base-nova/products-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card class=\"text-center\">\n          <CardHeader>\n            <Price class=\"justify-center\">\n              <PriceValue\n                class=\"text-3xl font-semibold\"\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n            </Price>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-2\">\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card class=\"text-center\">\n          <CardHeader>\n            <Price class=\"justify-center\">\n              <PriceValue\n                class=\"text-3xl font-semibold\"\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n            </Price>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-2\">\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/products-4.json b/public/r/styles/base-nova/products-4.json
index 5c64e3d1f..6885edb3d 100644
--- a/public/r/styles/base-nova/products-4.json
+++ b/public/r/styles/base-nova/products-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 405px, (min-width: 64rem) 33vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/products-5.json b/public/r/styles/base-nova/products-5.json
index c9420d383..9b0a09fb9 100644
--- a/public/r/styles/base-nova/products-5.json
+++ b/public/r/styles/base-nova/products-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"gap-0 overflow-hidden\">\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[3/4] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 302px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/registry.json b/public/r/styles/base-nova/registry.json
index 96b11bb81..aed2c8d41 100644
--- a/public/r/styles/base-nova/registry.json
+++ b/public/r/styles/base-nova/registry.json
@@ -1064,16 +1064,36 @@
       "name": "marquee",
       "type": "registry:ui",
       "title": "Marquee",
-      "description": "A continuous scrolling animation component for displaying content in a loop.",
+      "description": "A continuously scrolling row of content, with a pause control and a static fallback.",
       "categories": [
         "ui"
       ],
       "docs": "https://ui.full.dev/components/marquee/",
+      "dependencies": [
+        "embla-carousel@8.6.0",
+        "embla-carousel-auto-scroll@8.6.0",
+        "@lucide/astro"
+      ],
+      "registryDependencies": [
+        "@fulldev/button"
+      ],
       "files": [
         {
           "path": "src/components/ui/marquee/marquee.astro",
           "type": "registry:ui"
         },
+        {
+          "path": "src/components/ui/marquee/marquee-content.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/marquee/marquee-item.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/marquee/marquee-toggle.astro",
+          "type": "registry:ui"
+        },
         {
           "path": "src/components/ui/marquee/index.ts",
           "type": "registry:ui"
@@ -2721,16 +2741,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -2749,16 +2762,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -2777,16 +2783,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -3248,9 +3247,6 @@
         "features"
       ],
       "docs": "https://ui.full.dev/blocks/features/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/icon",
         "@fulldev/section"
@@ -3314,9 +3310,6 @@
         "features"
       ],
       "docs": "https://ui.full.dev/blocks/features/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/icon",
         "@fulldev/section"
diff --git a/public/r/styles/base-nova/reviews-1.json b/public/r/styles/base-nova/reviews-1.json
index 1a508f17b..d4fae359c 100644
--- a/public/r/styles/base-nova/reviews-1.json
+++ b/public/r/styles/base-nova/reviews-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-1 flex-col\">\n            <figure class=\"flex flex-1 flex-col gap-4\">\n              <div class=\"flex items-center justify-between\">\n                <Rating value={item.rating} aria-label={item.ratingLabel} />\n                <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n              </div>\n              <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n                <p>{item.quote}</p>\n              </blockquote>\n              <figcaption class=\"mt-auto flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\" aria-hidden=\"true\">\n                  <AvatarImage src={item.image} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </figcaption>\n            </figure>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/reviews-2.json b/public/r/styles/base-nova/reviews-2.json
index d5ae29850..494ef9157 100644
--- a/public/r/styles/base-nova/reviews-2.json
+++ b/public/r/styles/base-nova/reviews-2.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <figure class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        <p>{featured.quote}</p>\n      </blockquote>\n      <figcaption class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\" aria-hidden=\"true\">\n          <AvatarImage src={featured.image} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </figcaption>\n    </figure>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <div class=\"flex flex-col\">\n          <Separator />\n          <figure class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n              <p>{item.quote}</p>\n            </blockquote>\n            <figcaption class=\"flex items-center gap-3 pt-1\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={item.image} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </figcaption>\n          </figure>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/reviews-3.json b/public/r/styles/base-nova/reviews-3.json
index eb084404f..5f405a1b8 100644
--- a/public/r/styles/base-nova/reviews-3.json
+++ b/public/r/styles/base-nova/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <figure class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                <p>{item.quote}</p>\n              </blockquote>\n              <figcaption class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\" aria-hidden=\"true\">\n                  <AvatarImage src={item.image} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </figcaption>\n            </figure>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/reviews-4.json b/public/r/styles/base-nova/reviews-4.json
index 03ac5fc3e..3c962de9f 100644
--- a/public/r/styles/base-nova/reviews-4.json
+++ b/public/r/styles/base-nova/reviews-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    play: string\n    pause: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst rows = [reviews.slice(0, half), reviews.slice(half)]\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-6\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    {rows\n      .filter((row) => row.length > 0)\n      .map((row, index) => (\n        <MarqueeContent reverse={index % 2 === 1} class=\"py-1\">\n          {row.map((item) => (\n            <MarqueeItem class=\"flex\">\n              <Card class=\"w-[22rem]\">\n                <CardContent class=\"flex flex-1 flex-col\">\n                  <figure class=\"flex flex-1 flex-col gap-3\">\n                    <Rating value={item.rating} aria-label={item.ratingLabel} />\n                    <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n                      <p>{item.quote}</p>\n                    </blockquote>\n                    <figcaption class=\"mt-auto flex items-center gap-3 pt-1\">\n                      <Avatar aria-hidden=\"true\">\n                        <AvatarImage src={item.image} />\n                        <AvatarFallback>{item.initials}</AvatarFallback>\n                      </Avatar>\n                      <div>\n                        <p class=\"text-foreground text-sm font-medium\">\n                          {item.name}\n                        </p>\n                        <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                      </div>\n                    </figcaption>\n                  </figure>\n                </CardContent>\n              </Card>\n            </MarqueeItem>\n          ))}\n        </MarqueeContent>\n      ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/reviews-5.json b/public/r/styles/base-nova/reviews-5.json
index 8b3458106..4f438bd1b 100644
--- a/public/r/styles/base-nova/reviews-5.json
+++ b/public/r/styles/base-nova/reviews-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    play: string\n    pause: string\n  }\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst rows = [\n  reviews.slice(0, third),\n  reviews.slice(third, third * 2),\n  reviews.slice(third * 2),\n]\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-5\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    {rows\n      .filter((row) => row.length > 0)\n      .map((row, index) => (\n        <MarqueeContent reverse={index % 2 === 1} class=\"py-1\">\n          {row.map((item) => (\n            <MarqueeItem class=\"flex\">\n              <figure class=\"bg-muted/50 flex w-[26rem] flex-col gap-4 rounded-2xl p-6\">\n                <figcaption class=\"flex items-center justify-between gap-3\">\n                  <div class=\"flex items-center gap-3\">\n                    <Avatar size=\"lg\" aria-hidden=\"true\">\n                      <AvatarImage src={item.image} />\n                      <AvatarFallback>{item.initials}</AvatarFallback>\n                    </Avatar>\n                    <div>\n                      <p class=\"text-foreground text-sm font-semibold\">\n                        {item.name}\n                      </p>\n                      <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                    </div>\n                  </div>\n                  <Rating value={item.rating} aria-label={item.ratingLabel} />\n                </figcaption>\n                <div class=\"flex gap-2.5\">\n                  <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n                  <blockquote class=\"text-foreground/80 text-sm leading-relaxed\">\n                    <p>{item.quote}</p>\n                  </blockquote>\n                </div>\n              </figure>\n            </MarqueeItem>\n          ))}\n        </MarqueeContent>\n      ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/section.json b/public/r/styles/base-nova/section.json
index 5ae24bfbb..552edaf38 100644
--- a/public/r/styles/base-nova/section.json
+++ b/public/r/styles/base-nova/section.json
@@ -6,12 +6,12 @@
   "files": [
     {
       "path": "src/components/ui/section/section.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-12 py-[var(--section-padding,--spacing(14))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-14 rounded-xl bg-background ring-1 ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-12 py-[var(--section-padding,--spacing(14))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-14 rounded-xl bg-background ring-1 ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  \"data-slot\": dataSlot = \"section\",\n  ...props\n} = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot={dataSlot}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/section/section-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"section-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] flex-col gap-8 px-[var(--gutter,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"section-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"relative mx-auto w-full max-w-[var(--container,var(--container-7xl))] px-[var(--gutter,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/services-1.json b/public/r/styles/base-nova/services-1.json
index 4d5ac713e..0ad551b55 100644
--- a/public/r/styles/base-nova/services-1.json
+++ b/public/r/styles/base-nova/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href != null && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs\",\n              service.href != null && \"transition-shadow hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? \"\"}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 80rem) 294px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/services-2.json b/public/r/styles/base-nova/services-2.json
index f2b3db6bc..8c24f803c 100644
--- a/public/r/styles/base-nova/services-2.json
+++ b/public/r/styles/base-nova/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"grid items-center gap-6 rounded-xl border p-4 shadow-xs md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/services-3.json b/public/r/styles/base-nova/services-3.json
index f259c104f..53b390522 100644
--- a/public/r/styles/base-nova/services-3.json
+++ b/public/r/styles/base-nova/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"absolute inset-0 -z-10 size-full object-cover\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 80rem) 612px, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/services-4.json b/public/r/styles/base-nova/services-4.json
index d357efabf..a848dbe59 100644
--- a/public/r/styles/base-nova/services-4.json
+++ b/public/r/styles/base-nova/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 294px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.link && (\n            <a\n              href={service.link.href}\n              class=\"text-primary inline-flex w-fit items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline\"\n            >\n              {service.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/services-5.json b/public/r/styles/base-nova/services-5.json
index def369794..2458133c0 100644
--- a/public/r/styles/base-nova/services-5.json
+++ b/public/r/styles/base-nova/services-5.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background relative flex flex-col gap-4 p-7\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 ring-inset\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.link && (\n            <a\n              href={service.link.href}\n              class=\"text-primary mt-auto inline-flex w-fit items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline\"\n            >\n              {service.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/services-6.json b/public/r/styles/base-nova/services-6.json
index 70206a046..82f8c027b 100644
--- a/public/r/styles/base-nova/services-6.json
+++ b/public/r/styles/base-nova/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 436px, (min-width: 64rem) 35vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/services-7.json b/public/r/styles/base-nova/services-7.json
index 623952170..bbc7e0404 100644
--- a/public/r/styles/base-nova/services-7.json
+++ b/public/r/styles/base-nova/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 1024px) 66vw, 100vw\"\n                  : \"(min-width: 1024px) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs\",\n              service.href != null && \"transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? \"\"}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 80rem) 824px, (min-width: 64rem) 66vw, 100vw\"\n                  : \"(min-width: 80rem) 400px, (min-width: 64rem) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/sidebar-1.json b/public/r/styles/base-nova/sidebar-1.json
index 3476f325b..4ec41b325 100644
--- a/public/r/styles/base-nova/sidebar-1.json
+++ b/public/r/styles/base-nova/sidebar-1.json
@@ -22,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebar: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar\n    class={cn(\"\", className)}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebar} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={labels.github}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  currentPath: string\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    sidebar: string\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebarToggle: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  currentPath: rawCurrentPath,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n  ...props\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(rawCurrentPath)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider {...props}>\n  <Sidebar\n    aria-label={labels.sidebar}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebarToggle} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            <Icon name=\"github\" />\n            <span class=\"sr-only\">{labels.github}</span>\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/sidebar.json b/public/r/styles/base-nova/sidebar.json
index 8f37a1469..167efc82a 100644
--- a/public/r/styles/base-nova/sidebar.json
+++ b/public/r/styles/base-nova/sidebar.json
@@ -24,7 +24,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <aside\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </aside>\n    </div>\n  </>\n)}\n",
       "type": "registry:ui"
     },
     {
@@ -34,7 +34,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar-rail.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst { class: className, type = \"button\", ...props } = Astro.props\n---\n\n<button\n  data-sidebar=\"rail\"\n  data-slot=\"sidebar-rail\"\n  aria-label=\"Toggle Sidebar\"\n  tabindex={-1}\n  title=\"Toggle Sidebar\"\n  type={type}\n  class={cn(\n    \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n    \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n    \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n    \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n    \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n    \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n    className\n  )}\n  {...props}\n></button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  type = \"button\",\n  \"aria-label\": ariaLabel = \"Toggle Sidebar\",\n  title = ariaLabel,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-sidebar=\"rail\"\n  data-slot=\"sidebar-rail\"\n  aria-label={ariaLabel}\n  tabindex={-1}\n  title={title}\n  type={type}\n  class={cn(\n    \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n    \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n    \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n    \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n    \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n    \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n    className\n  )}\n  {...props}\n></button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/article-1.json b/public/r/styles/base-rhea/article-1.json
index c45df6988..a864d2860 100644
--- a/public/r/styles/base-rhea/article-1.json
+++ b/public/r/styles/base-rhea/article-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/article-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"max-w-2xl\">\n    <article class=\"flex flex-col gap-8\">\n      <header class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n            {title}\n          </h1>\n          <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n            {description}\n          </p>\n        </div>\n        <div class=\"flex items-center gap-3\">\n          <Avatar size=\"lg\" aria-hidden=\"true\">\n            <AvatarImage src={author.image} />\n            <AvatarFallback>{author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n          </div>\n        </div>\n      </header>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 42rem) 42rem, 100vw\"\n        loading=\"eager\"\n        fetchpriority=\"high\"\n      />\n      <div class=\"flex flex-col gap-6 text-base leading-8\">\n        <slot />\n      </div>\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/article-2.json b/public/r/styles/base-rhea/article-2.json
index 6511245f3..c0a3f5f9a 100644
--- a/public/r/styles/base-rhea/article-2.json
+++ b/public/r/styles/base-rhea/article-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/article-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"max-w-2xl\">\n    <article class=\"flex flex-col gap-8\">\n      <header class=\"flex flex-col items-center gap-6 text-center\">\n        <div class=\"flex flex-col gap-4\">\n          <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n            {title}\n          </h1>\n          <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n            {description}\n          </p>\n        </div>\n        <div class=\"flex items-center gap-3\">\n          <Avatar size=\"lg\" aria-hidden=\"true\">\n            <AvatarImage src={author.image} />\n            <AvatarFallback>{author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col text-left\">\n            <p class=\"text-sm font-medium\">\n              {author.name}{\" \"}\n              <span class=\"text-muted-foreground font-normal\">\n                &middot; {author.date}\n              </span>\n            </p>\n            <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n          </div>\n        </div>\n      </header>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 42rem) 42rem, 100vw\"\n        loading=\"eager\"\n        fetchpriority=\"high\"\n      />\n      <div class=\"flex flex-col gap-6 text-base leading-8\">\n        <slot />\n      </div>\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/articles-1.json b/public/r/styles/base-rhea/articles-1.json
index 30aa52bd2..2c9f3ed3b 100644
--- a/public/r/styles/base-rhea/articles-1.json
+++ b/public/r/styles/base-rhea/articles-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/articles-2.json b/public/r/styles/base-rhea/articles-2.json
index a9d78a9f5..6e60d3f18 100644
--- a/public/r/styles/base-rhea/articles-2.json
+++ b/public/r/styles/base-rhea/articles-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class={cn(\n        \"grid gap-6 rounded-xl lg:grid-cols-2 lg:items-center lg:pr-4\",\n        featured.href != null &&\n          \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n      )}\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 80rem) 616px, (min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar aria-hidden=\"true\">\n            <AvatarImage src={featured.author.image} />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/articles-3.json b/public/r/styles/base-rhea/articles-3.json
index e4182724a..bd0837d65 100644
--- a/public/r/styles/base-rhea/articles-3.json
+++ b/public/r/styles/base-rhea/articles-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"bg-muted/50 flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/articles-4.json b/public/r/styles/base-rhea/articles-4.json
index b0c908073..ddff63354 100644
--- a/public/r/styles/base-rhea/articles-4.json
+++ b/public/r/styles/base-rhea/articles-4.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl border p-6\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/blocks-1.json b/public/r/styles/base-rhea/blocks-1.json
index a0da615ca..8719d1a46 100644
--- a/public/r/styles/base-rhea/blocks-1.json
+++ b/public/r/styles/base-rhea/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"flex flex-col gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/carousel.json b/public/r/styles/base-rhea/carousel.json
index 9021030e8..7ffbdcdf5 100644
--- a/public/r/styles/base-rhea/carousel.json
+++ b/public/r/styles/base-rhea/carousel.json
@@ -13,27 +13,27 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  \"data-slot\": dataSlot = \"carousel\",\n  // A named section is a region landmark. Without a name it would have no\n  // role, so it becomes a group, the other container role the APG carousel\n  // allows.\n  role = Astro.props[\"aria-label\"] || Astro.props[\"aria-labelledby\"]\n    ? undefined\n    : \"group\",\n  ...props\n} = Astro.props\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot={dataSlot}\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={role}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts. The data-carousel-* markers stay\n  // in place when a caller overrides data-slot.\n  const rootSelector = \"[data-carousel-options]\"\n  const getParts = <T extends Element>(root: CarouselRoot, part: string) =>\n    [...root.querySelectorAll<T>(`[data-carousel-${part}]`)].filter(\n      (element) => element.closest(rootSelector) === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(rootSelector)) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"viewport\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"previous\")\n      const next = getParts<HTMLButtonElement>(root, \"next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest(rootSelector) !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-content.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div class=\"overflow-hidden\" data-slot=\"carousel-content\">\n  <div\n    data-slot=\"carousel-container\"\n    class={cn(\n      \"flex [touch-action:pan-y_pinch-zoom]\",\n      \"group-data-[orientation=vertical]/carousel:-mt-4 group-data-[orientation=vertical]/carousel:[touch-action:pan-x_pinch-zoom] group-data-[orientation=vertical]/carousel:flex-col\",\n      \"group-data-[orientation=horizontal]/carousel:-ml-4\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"carousel-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class=\"overflow-hidden\"\n  data-slot=\"carousel-content\"\n  data-carousel-viewport\n>\n  <div\n    data-slot={dataSlot}\n    class={cn(\n      \"flex [touch-action:pan-y_pinch-zoom]\",\n      \"group-data-[orientation=vertical]/carousel:-mt-4 group-data-[orientation=vertical]/carousel:[touch-action:pan-x_pinch-zoom] group-data-[orientation=vertical]/carousel:flex-col\",\n      \"group-data-[orientation=horizontal]/carousel:-ml-4\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  \"data-slot\": dataSlot = \"carousel-item\",\n  role = \"group\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  role={role}\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-next.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-2xl absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  \"data-slot\": dataSlot = \"carousel-next\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot={dataSlot}\n  data-carousel-next\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-2xl absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-previous.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-2xl absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  \"data-slot\": dataSlot = \"carousel-previous\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot={dataSlot}\n  data-carousel-previous\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-2xl absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/contact-1.json b/public/r/styles/base-rhea/contact-1.json
index 9af391672..cb4345f47 100644
--- a/public/r/styles/base-rhea/contact-1.json
+++ b/public/r/styles/base-rhea/contact-1.json
@@ -3,22 +3,15 @@
   "name": "contact-1",
   "title": "Contact 1",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n                aria-describedby={`${formId}-message-description`}\n              />\n              <FieldDescription id={`${formId}-message-description`}>\n                {form.messageDescription}\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <li class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          <Button\n            as=\"span\"\n            variant=\"secondary\"\n            size=\"icon\"\n            class=\"text-primary\"\n            aria-hidden=\"true\"\n          >\n            <Icon name={item.icon} />\n          </Button>\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          {item.href != null ? (\n            <a\n              href={item.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n            >\n              {item.description}\n            </a>\n          ) : (\n            <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n              {item.description}\n            </p>\n          )}\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n  {Astro.slots.has(\"default\") && (\n    <SectionContainer>\n      <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n        <slot />\n      </div>\n    </SectionContainer>\n  )}\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/contact-2.json b/public/r/styles/base-rhea/contact-2.json
index 97172ad7d..ec5bb574f 100644
--- a/public/r/styles/base-rhea/contact-2.json
+++ b/public/r/styles/base-rhea/contact-2.json
@@ -3,22 +3,15 @@
   "name": "contact-2",
   "title": "Contact 2",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    title: string\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1fr)_22rem] lg:items-start\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <div class=\"mb-6\">\n          <h3 class=\"text-lg font-medium\">{form.title}</h3>\n        </div>\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n\n    <div class=\"flex flex-col gap-3\">\n      {contactItems.map((item) => (\n        <div class=\"flex gap-4 rounded-xl border p-4\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <div class=\"flex flex-col gap-1\">\n            <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1fr)_22rem] lg:items-start\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {Astro.slots.has(\"default\") && (\n        <div class=\"rounded-xl border p-6\">\n          <slot />\n        </div>\n      )}\n    </div>\n\n    <ul class=\"flex flex-col gap-3\">\n      {contactItems.map((item) => (\n        <li class=\"flex gap-4 rounded-xl border p-4\">\n          <Button\n            as=\"span\"\n            variant=\"secondary\"\n            size=\"icon\"\n            class=\"text-primary shrink-0\"\n            aria-hidden=\"true\"\n          >\n            <Icon name={item.icon} />\n          </Button>\n          <div class=\"flex flex-col gap-1\">\n            <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n            {item.href != null ? (\n              <a\n                href={item.href}\n                class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n              >\n                {item.description}\n              </a>\n            ) : (\n              <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n                {item.description}\n              </p>\n            )}\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/contact-3.json b/public/r/styles/base-rhea/contact-3.json
index 15a42d48f..b50f57b6e 100644
--- a/public/r/styles/base-rhea/contact-3.json
+++ b/public/r/styles/base-rhea/contact-3.json
@@ -3,22 +3,15 @@
   "name": "contact-3",
   "title": "Contact 3",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <li class=\"flex gap-4\">\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n            <div class=\"flex min-w-0 flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              {item.href != null ? (\n                <a\n                  href={item.href}\n                  class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n                >\n                  {item.description}\n                </a>\n              ) : (\n                <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n                  {item.description}\n                </p>\n              )}\n            </div>\n          </li>\n        ))}\n      </ul>\n      {Astro.slots.has(\"default\") && (\n        <div class=\"rounded-xl border p-6\">\n          <slot />\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/content-1.json b/public/r/styles/base-rhea/content-1.json
index 37cc98379..45ceca637 100644
--- a/public/r/styles/base-rhea/content-1.json
+++ b/public/r/styles/base-rhea/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-3 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-3 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/content-2.json b/public/r/styles/base-rhea/content-2.json
index 693b5d9bb..7675cc352 100644
--- a/public/r/styles/base-rhea/content-2.json
+++ b/public/r/styles/base-rhea/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/content-3.json b/public/r/styles/base-rhea/content-3.json
index fdc0b7afd..cf3b62853 100644
--- a/public/r/styles/base-rhea/content-3.json
+++ b/public/r/styles/base-rhea/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/content-4.json b/public/r/styles/base-rhea/content-4.json
index 4dd1cd6f3..fcce4f136 100644
--- a/public/r/styles/base-rhea/content-4.json
+++ b/public/r/styles/base-rhea/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 80rem) 800px, (min-width: 64rem) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/cta-1.json b/public/r/styles/base-rhea/cta-1.json
index 880fa60eb..10cbc452e 100644
--- a/public/r/styles/base-rhea/cta-1.json
+++ b/public/r/styles/base-rhea/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/cta-2.json b/public/r/styles/base-rhea/cta-2.json
index 05cfb2687..347395042 100644
--- a/public/r/styles/base-rhea/cta-2.json
+++ b/public/r/styles/base-rhea/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/cta-3.json b/public/r/styles/base-rhea/cta-3.json
index caf08c91a..d8a956197 100644
--- a/public/r/styles/base-rhea/cta-3.json
+++ b/public/r/styles/base-rhea/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/cta-4.json b/public/r/styles/base-rhea/cta-4.json
index 2ed196c48..43d7c1bd8 100644
--- a/public/r/styles/base-rhea/cta-4.json
+++ b/public/r/styles/base-rhea/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/cta-5.json b/public/r/styles/base-rhea/cta-5.json
index 39ff0c7bb..7a122cb13 100644
--- a/public/r/styles/base-rhea/cta-5.json
+++ b/public/r/styles/base-rhea/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/cta-6.json b/public/r/styles/base-rhea/cta-6.json
index cbd7368fe..9aa3276fe 100644
--- a/public/r/styles/base-rhea/cta-6.json
+++ b/public/r/styles/base-rhea/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/cta-7.json b/public/r/styles/base-rhea/cta-7.json
index 86813e6c0..b6755b388 100644
--- a/public/r/styles/base-rhea/cta-7.json
+++ b/public/r/styles/base-rhea/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-muted-foreground text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription class=\"text-foreground/80\">\n        {description}\n      </SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-foreground/80 text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/cta-8.json b/public/r/styles/base-rhea/cta-8.json
index eaac34d78..7acaffa25 100644
--- a/public/r/styles/base-rhea/cta-8.json
+++ b/public/r/styles/base-rhea/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col gap-8 before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/doc-1.json b/public/r/styles/base-rhea/doc-1.json
index 9c98b34f9..49048e0e5 100644
--- a/public/r/styles/base-rhea/doc-1.json
+++ b/public/r/styles/base-rhea/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"flex flex-col gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/faqs-1.json b/public/r/styles/base-rhea/faqs-1.json
index 92d59430a..fe0decf6f 100644
--- a/public/r/styles/base-rhea/faqs-1.json
+++ b/public/r/styles/base-rhea/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/faqs-3.json b/public/r/styles/base-rhea/faqs-3.json
index a0d634566..cd5d5197c 100644
--- a/public/r/styles/base-rhea/faqs-3.json
+++ b/public/r/styles/base-rhea/faqs-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/faqs-4.json b/public/r/styles/base-rhea/faqs-4.json
index 4fe0db0bb..19de0d927 100644
--- a/public/r/styles/base-rhea/faqs-4.json
+++ b/public/r/styles/base-rhea/faqs-4.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst { class: className, title, faqs, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center\">\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <SectionTitle>{title}</SectionTitle>\n      <div class=\"mt-10\">\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst { class: className, title, faqs, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center\">\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <SectionTitle>{title}</SectionTitle>\n      <div class=\"mt-10\">\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/features-1.json b/public/r/styles/base-rhea/features-1.json
index 585c6b7f2..61240563f 100644
--- a/public/r/styles/base-rhea/features-1.json
+++ b/public/r/styles/base-rhea/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <li class=\"flex flex-col gap-4 rounded-xl border p-6\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.link && (\n            <a\n              href={feature.link.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/features-2.json b/public/r/styles/base-rhea/features-2.json
index 467338413..a15ebe78c 100644
--- a/public/r/styles/base-rhea/features-2.json
+++ b/public/r/styles/base-rhea/features-2.json
@@ -3,9 +3,6 @@
   "name": "features-2",
   "title": "Features 2",
   "description": "Feature section layouts for product narratives, launch pages, and capability overviews.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/icon",
     "@fulldev/section"
@@ -13,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li class=\"bg-background relative flex flex-col items-center gap-4 p-7 text-center\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 ring-inset\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/features-3.json b/public/r/styles/base-rhea/features-3.json
index 83402f1a0..0f7902b8c 100644
--- a/public/r/styles/base-rhea/features-3.json
+++ b/public/r/styles/base-rhea/features-3.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex items-center gap-5 rounded-xl border p-4 transition-colors\">\n          <Image\n            src={feature.image.src}\n            alt={feature.image.alt}\n            class=\"size-20 shrink-0 rounded-lg object-cover\"\n            widths={[160, 320]}\n            sizes=\"80px\"\n          />\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-5 rounded-xl border p-4\">\n          <Image\n            src={feature.image.src}\n            alt={feature.image.alt}\n            class=\"size-20 shrink-0 rounded-lg object-cover\"\n            widths={[160, 320]}\n            sizes=\"80px\"\n          />\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/features-4.json b/public/r/styles/base-rhea/features-4.json
index 6cadcba43..437798358 100644
--- a/public/r/styles/base-rhea/features-4.json
+++ b/public/r/styles/base-rhea/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <ul class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <li class=\"flex flex-col gap-4 rounded-xl border p-6\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.link && (\n              <a\n                href={feature.link.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.link.label}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </li>\n        ))}\n      </ul>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/features-5.json b/public/r/styles/base-rhea/features-5.json
index 61eba406f..420643adf 100644
--- a/public/r/styles/base-rhea/features-5.json
+++ b/public/r/styles/base-rhea/features-5.json
@@ -3,9 +3,6 @@
   "name": "features-5",
   "title": "Features 5",
   "description": "Feature section layouts for product narratives, launch pages, and capability overviews.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/icon",
     "@fulldev/section"
@@ -13,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li class=\"flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/features-6.json b/public/r/styles/base-rhea/features-6.json
index d21ff5c93..9b01c7537 100644
--- a/public/r/styles/base-rhea/features-6.json
+++ b/public/r/styles/base-rhea/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/footer-1.json b/public/r/styles/base-rhea/footer-1.json
index 7ac3e8331..6e75db4ac 100644
--- a/public/r/styles/base-rhea/footer-1.json
+++ b/public/r/styles/base-rhea/footer-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer class=\"flex flex-col gap-8\">\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <h2 class=\"text-sm font-medium\">{column.title}</h2>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/footer-2.json b/public/r/styles/base-rhea/footer-2.json
index 217f595bb..d5fbcdfec 100644
--- a/public/r/styles/base-rhea/footer-2.json
+++ b/public/r/styles/base-rhea/footer-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      <div class=\"flex items-center justify-center gap-3\">\n        {socials.map((social) => (\n          <a\n            href={social.href}\n            class=\"text-muted-foreground hover:text-foreground transition-colors\"\n            aria-label={social.label}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n          >\n            <Icon name={social.icon} href={social.href} class=\"size-4\" />\n          </a>\n        ))}\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      {socials.length > 0 && (\n        <div class=\"flex items-center justify-center gap-3\">\n          {socials.map((social) => (\n            <a\n              href={social.href}\n              class=\"text-muted-foreground hover:text-foreground transition-colors\"\n              aria-label={social.label}\n            >\n              <Icon name={social.icon} href={social.href} class=\"size-4\" />\n            </a>\n          ))}\n        </div>\n      )}\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/footer-3.json b/public/r/styles/base-rhea/footer-3.json
index b5bc278e9..27d6eb84e 100644
--- a/public/r/styles/base-rhea/footer-3.json
+++ b/public/r/styles/base-rhea/footer-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer class=\"flex flex-col gap-8\">\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <h2 class=\"text-sm font-medium\">{column.title}</h2>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/header-1.json b/public/r/styles/base-rhea/header-1.json
index df82b249a..3519b5b28 100644
--- a/public/r/styles/base-rhea/header-1.json
+++ b/public/r/styles/base-rhea/header-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/header-2.json b/public/r/styles/base-rhea/header-2.json
index 8b36cd0c2..61d105855 100644
--- a/public/r/styles/base-rhea/header-2.json
+++ b/public/r/styles/base-rhea/header-2.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/header-3.json b/public/r/styles/base-rhea/header-3.json
index 45ef24dbf..6840b6313 100644
--- a/public/r/styles/base-rhea/header-3.json
+++ b/public/r/styles/base-rhea/header-3.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/header-4.json b/public/r/styles/base-rhea/header-4.json
index 4e6f46ac7..4048d78d5 100644
--- a/public/r/styles/base-rhea/header-4.json
+++ b/public/r/styles/base-rhea/header-4.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/header-5.json b/public/r/styles/base-rhea/header-5.json
index c6a7b4990..3fe98b775 100644
--- a/public/r/styles/base-rhea/header-5.json
+++ b/public/r/styles/base-rhea/header-5.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/header.json b/public/r/styles/base-rhea/header.json
index f4be45d5d..3baa224bf 100644
--- a/public/r/styles/base-rhea/header.json
+++ b/public/r/styles/base-rhea/header.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/header/header.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-2xl bg-background shadow-sm ring-1 ring-foreground/5 dark:ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-2xl bg-background shadow-sm ring-1 ring-foreground/5 dark:ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  \"data-slot\": dataSlot = \"header\",\n  ...props\n} = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot={dataSlot}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/hero-1.json b/public/r/styles/base-rhea/hero-1.json
index 74dc8b92d..3001b9ff4 100644
--- a/public/r/styles/base-rhea/hero-1.json
+++ b/public/r/styles/base-rhea/hero-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n      {badge.label}\n    </Badge>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge?: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    {badge && (\n      <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n        {badge.label}\n      </Badge>\n    )}\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/hero-10.json b/public/r/styles/base-rhea/hero-10.json
index 96ed3c089..770bb0a86 100644
--- a/public/r/styles/base-rhea/hero-10.json
+++ b/public/r/styles/base-rhea/hero-10.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-10.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/hero-11.json b/public/r/styles/base-rhea/hero-11.json
index 86a7f5e03..09a801205 100644
--- a/public/r/styles/base-rhea/hero-11.json
+++ b/public/r/styles/base-rhea/hero-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-11.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/hero-12.json b/public/r/styles/base-rhea/hero-12.json
index a88805751..77a37b010 100644
--- a/public/r/styles/base-rhea/hero-12.json
+++ b/public/r/styles/base-rhea/hero-12.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-12.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/hero-13.json b/public/r/styles/base-rhea/hero-13.json
index f25d55373..f1f708613 100644
--- a/public/r/styles/base-rhea/hero-13.json
+++ b/public/r/styles/base-rhea/hero-13.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-13.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 900px, (min-width: 64rem) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/hero-2.json b/public/r/styles/base-rhea/hero-2.json
index 672b023de..872bdcf70 100644
--- a/public/r/styles/base-rhea/hero-2.json
+++ b/public/r/styles/base-rhea/hero-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/hero-3.json b/public/r/styles/base-rhea/hero-3.json
index 03cde7001..dcd3d0d23 100644
--- a/public/r/styles/base-rhea/hero-3.json
+++ b/public/r/styles/base-rhea/hero-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/hero-4.json b/public/r/styles/base-rhea/hero-4.json
index ccdf499cf..b0e278928 100644
--- a/public/r/styles/base-rhea/hero-4.json
+++ b/public/r/styles/base-rhea/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/hero-5.json b/public/r/styles/base-rhea/hero-5.json
index a11173eff..1b95a5469 100644
--- a/public/r/styles/base-rhea/hero-5.json
+++ b/public/r/styles/base-rhea/hero-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/hero-6.json b/public/r/styles/base-rhea/hero-6.json
index f458c5879..b60078e9c 100644
--- a/public/r/styles/base-rhea/hero-6.json
+++ b/public/r/styles/base-rhea/hero-6.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/hero-7.json b/public/r/styles/base-rhea/hero-7.json
index e417ccade..75d00053f 100644
--- a/public/r/styles/base-rhea/hero-7.json
+++ b/public/r/styles/base-rhea/hero-7.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 750px, (min-width: 64rem) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/hero-8.json b/public/r/styles/base-rhea/hero-8.json
index a3db6ba64..2ed1b607f 100644
--- a/public/r/styles/base-rhea/hero-8.json
+++ b/public/r/styles/base-rhea/hero-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-8.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 936px, (min-width: 64rem) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/hero-9.json b/public/r/styles/base-rhea/hero-9.json
index 22397aa77..3fc4a2faa 100644
--- a/public/r/styles/base-rhea/hero-9.json
+++ b/public/r/styles/base-rhea/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/links-2.json b/public/r/styles/base-rhea/links-2.json
index 9e1d20ae8..ed6e31559 100644
--- a/public/r/styles/base-rhea/links-2.json
+++ b/public/r/styles/base-rhea/links-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/links-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/logos-1.json b/public/r/styles/base-rhea/logos-1.json
index de017ff6a..de62b4b00 100644
--- a/public/r/styles/base-rhea/logos-1.json
+++ b/public/r/styles/base-rhea/logos-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <li>\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground transition-colors focus-visible:text-foreground\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/logos-2.json b/public/r/styles/base-rhea/logos-2.json
index 3d3960693..48760e394 100644
--- a/public/r/styles/base-rhea/logos-2.json
+++ b/public/r/styles/base-rhea/logos-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n  labels: {\n    play: string\n    pause: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  brands,\n  labels,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-4 [--marquee-gap:--spacing(12)]\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    <MarqueeContent class=\"text-muted-foreground mask-x-from-90%\">\n      {brands.map((brand) => (\n        <MarqueeItem class=\"flex items-center\">\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground focus-visible:text-foreground transition-colors\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </MarqueeItem>\n      ))}\n    </MarqueeContent>\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/logos-3.json b/public/r/styles/base-rhea/logos-3.json
index f0f2762ed..4824f14cc 100644
--- a/public/r/styles/base-rhea/logos-3.json
+++ b/public/r/styles/base-rhea/logos-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"py-12 lg:py-16\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"text-muted-foreground flex flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"py-12 lg:py-16\", className)} {...props}>\n  <SectionContainer>\n    <ul class=\"text-muted-foreground flex flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <li>\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground transition-colors focus-visible:text-foreground\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/marquee.json b/public/r/styles/base-rhea/marquee.json
index c932b246a..c0543ae7f 100644
--- a/public/r/styles/base-rhea/marquee.json
+++ b/public/r/styles/base-rhea/marquee.json
@@ -2,16 +2,39 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "marquee",
   "title": "Marquee",
-  "description": "A continuous scrolling animation component for displaying content in a loop.",
+  "description": "A continuously scrolling row of content, with a pause control and a static fallback.",
+  "dependencies": [
+    "embla-carousel@8.6.0",
+    "embla-carousel-auto-scroll@8.6.0",
+    "@lucide/astro"
+  ],
+  "registryDependencies": [
+    "@fulldev/button"
+  ],
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  data-slot={dataSlot}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({ viewport }))\n      // Moving content needs a way to pause it, so a marquee without a toggle\n      // stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no focusable content of its own.\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = row.viewport.querySelector(\n          \"a[href], button, input, select, textarea, [tabindex]\"\n        )\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || toggles.length === 0) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-content.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  reverse?: boolean\n}\n\nconst {\n  class: className,\n  reverse = false,\n  \"data-slot\": dataSlot = \"marquee-content\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee-viewport\n  data-reverse={reverse ? \"\" : undefined}\n  class={cn(\n    \"focus-visible:ring-ring/50 overflow-x-auto outline-none contain-inline-size focus-visible:ring-3 data-active:overflow-hidden\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"-ms-[var(--marquee-gap,--spacing(4))] flex justify-center-safe\">\n    <slot />\n  </div>\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-item.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee-item\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 ps-[var(--marquee-gap,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-toggle.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  hidden\n  data-slot={dataSlot}\n  data-marquee-toggle\n  data-state=\"playing\"\n  data-play-label={playLabel}\n  data-pause-label={pauseLabel}\n  data-variant={variant}\n  data-size={size}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"group/marquee-toggle\",\n    className\n  )}\n  {...props}\n>\n  <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n  <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n  <span class=\"sr-only\" data-marquee-label>\n    {pauseLabel}\n  </span>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/marquee/index.ts",
-      "content": "export { default as Marquee } from \"./marquee.astro\"\n",
+      "content": "export { default as Marquee } from \"./marquee.astro\"\nexport { default as MarqueeContent } from \"./marquee-content.astro\"\nexport { default as MarqueeItem } from \"./marquee-item.astro\"\nexport { default as MarqueeToggle } from \"./marquee-toggle.astro\"\n",
       "type": "registry:ui"
     }
   ],
diff --git a/public/r/styles/base-rhea/price.json b/public/r/styles/base-rhea/price.json
index be82659d2..743dcfa96 100644
--- a/public/r/styles/base-rhea/price.json
+++ b/public/r/styles/base-rhea/price.json
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/price/price-value.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-2xl bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  parseSinglePriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n    discountLabel?: string\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  discountLabel = \"Save\",\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst currentValue = parseSinglePriceValue(price)\nconst compareAtValue = parseSinglePriceValue(compareAt)\n// A compare-at price only shows when it is higher than the price.\nconst formattedCompareAt =\n  currentValue !== null &&\n  compareAtValue !== null &&\n  compareAtValue <= currentValue\n    ? null\n    : formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && formattedCompareAt !== null\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\n---\n\n{formattedPrice !== null && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt !== null && (\n      <del class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </del>\n    )}\n    {formattedDiscount !== null && (\n      <span class=\"rounded-2xl bg-muted px-2 py-0.5 text-xs font-medium text-foreground\">\n        {discountLabel} {formattedDiscount}\n      </span>\n    )}\n  </span>\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/pricing-1.json b/public/r/styles/base-rhea/pricing-1.json
index 69ddbb891..2649f08fb 100644
--- a/public/r/styles/base-rhea/pricing-1.json
+++ b/public/r/styles/base-rhea/pricing-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  locale?: string\n  discountLabel?: string\n  plans: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  locale,\n  discountLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle as=\"h3\">{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price.value}\n                compareAt={plan.price.compareAt}\n                currency={plan.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{plan.price.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-start gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/pricing-2.json b/public/r/styles/base-rhea/pricing-2.json
index 6f6a446c3..14d7ffde3 100644
--- a/public/r/styles/base-rhea/pricing-2.json
+++ b/public/r/styles/base-rhea/pricing-2.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={index === 0 ? \"outline\" : \"default\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  locale?: string\n  discountLabel?: string\n  plans: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  locale,\n  discountLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle as=\"h3\">{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price.value}\n                compareAt={plan.price.compareAt}\n                currency={plan.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{plan.price.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-start gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/pricing-3.json b/public/r/styles/base-rhea/pricing-3.json
index cf14ce08c..5e767ea90 100644
--- a/public/r/styles/base-rhea/pricing-3.json
+++ b/public/r/styles/base-rhea/pricing-3.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  locale?: string\n  discountLabel?: string\n  offer: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  locale,\n  discountLabel,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle as=\"h3\">{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue\n            price={offer.price.value}\n            compareAt={offer.price.compareAt}\n            currency={offer.price.currency}\n            locale={locale}\n            discountLabel={discountLabel}\n          />\n          <PriceUnit>{offer.price.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/product-1.json b/public/r/styles/base-rhea/product-1.json
index 74777c9da..d09a7114b 100644
--- a/public/r/styles/base-rhea/product-1.json
+++ b/public/r/styles/base-rhea/product-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/product-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    compareAt?: number\n    currency: string\n    unit: string\n  }\n  locale?: string\n  discountLabel?: string\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  locale,\n  discountLabel,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] w-full rounded-lg object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 608px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue\n          price={price.value}\n          compareAt={price.compareAt}\n          currency={price.currency}\n          locale={locale}\n          discountLabel={discountLabel}\n        />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/products-1.json b/public/r/styles/base-rhea/products-1.json
index 551e0e726..2bc2c4508 100644
--- a/public/r/styles/base-rhea/products-1.json
+++ b/public/r/styles/base-rhea/products-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 302px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/products-2.json b/public/r/styles/base-rhea/products-2.json
index 47d395874..34a441afd 100644
--- a/public/r/styles/base-rhea/products-2.json
+++ b/public/r/styles/base-rhea/products-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"max-w-2xl\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-3\">\n      {products.map((item) => (\n        <div>\n          <Separator />\n          <div class=\"flex flex-col gap-4 py-5 md:flex-row md:items-center md:justify-between\">\n            <div class=\"flex flex-col gap-1 md:max-w-lg\">\n              <h3 class=\"text-base font-medium\">{item.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-6\">\n                {item.description}\n              </p>\n            </div>\n            <Price>\n              <PriceValue\n                price={item.price.value}\n                currency={item.price.currency}\n              />\n              <PriceUnit>{item.price.unit}</PriceUnit>\n            </Price>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"max-w-2xl\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-3\">\n      {products.map((item) => (\n        <div>\n          <Separator />\n          <div class=\"flex flex-col gap-4 py-5 md:flex-row md:items-center md:justify-between\">\n            <div class=\"flex flex-col gap-1 md:max-w-lg\">\n              <h3 class=\"text-base font-medium\">{item.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-6\">\n                {item.description}\n              </p>\n            </div>\n            <Price>\n              <PriceValue\n                price={item.price.value}\n                compareAt={item.price.compareAt}\n                currency={item.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{item.price.unit}</PriceUnit>\n            </Price>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/products-3.json b/public/r/styles/base-rhea/products-3.json
index 91921d696..0e6645c63 100644
--- a/public/r/styles/base-rhea/products-3.json
+++ b/public/r/styles/base-rhea/products-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card class=\"text-center\">\n          <CardHeader>\n            <Price class=\"justify-center\">\n              <PriceValue\n                class=\"text-3xl font-semibold\"\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n            </Price>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-2\">\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card class=\"text-center\">\n          <CardHeader>\n            <Price class=\"justify-center\">\n              <PriceValue\n                class=\"text-3xl font-semibold\"\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n            </Price>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-2\">\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/products-4.json b/public/r/styles/base-rhea/products-4.json
index 5c64e3d1f..6885edb3d 100644
--- a/public/r/styles/base-rhea/products-4.json
+++ b/public/r/styles/base-rhea/products-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 405px, (min-width: 64rem) 33vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/products-5.json b/public/r/styles/base-rhea/products-5.json
index c9420d383..9b0a09fb9 100644
--- a/public/r/styles/base-rhea/products-5.json
+++ b/public/r/styles/base-rhea/products-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"gap-0 overflow-hidden\">\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[3/4] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 302px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/registry.json b/public/r/styles/base-rhea/registry.json
index 3dadeb939..1fc90780c 100644
--- a/public/r/styles/base-rhea/registry.json
+++ b/public/r/styles/base-rhea/registry.json
@@ -1064,16 +1064,36 @@
       "name": "marquee",
       "type": "registry:ui",
       "title": "Marquee",
-      "description": "A continuous scrolling animation component for displaying content in a loop.",
+      "description": "A continuously scrolling row of content, with a pause control and a static fallback.",
       "categories": [
         "ui"
       ],
       "docs": "https://ui.full.dev/components/marquee/",
+      "dependencies": [
+        "embla-carousel@8.6.0",
+        "embla-carousel-auto-scroll@8.6.0",
+        "@lucide/astro"
+      ],
+      "registryDependencies": [
+        "@fulldev/button"
+      ],
       "files": [
         {
           "path": "src/components/ui/marquee/marquee.astro",
           "type": "registry:ui"
         },
+        {
+          "path": "src/components/ui/marquee/marquee-content.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/marquee/marquee-item.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/marquee/marquee-toggle.astro",
+          "type": "registry:ui"
+        },
         {
           "path": "src/components/ui/marquee/index.ts",
           "type": "registry:ui"
@@ -2721,16 +2741,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -2749,16 +2762,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -2777,16 +2783,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -3248,9 +3247,6 @@
         "features"
       ],
       "docs": "https://ui.full.dev/blocks/features/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/icon",
         "@fulldev/section"
@@ -3314,9 +3310,6 @@
         "features"
       ],
       "docs": "https://ui.full.dev/blocks/features/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/icon",
         "@fulldev/section"
diff --git a/public/r/styles/base-rhea/reviews-1.json b/public/r/styles/base-rhea/reviews-1.json
index 1a508f17b..d4fae359c 100644
--- a/public/r/styles/base-rhea/reviews-1.json
+++ b/public/r/styles/base-rhea/reviews-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-1 flex-col\">\n            <figure class=\"flex flex-1 flex-col gap-4\">\n              <div class=\"flex items-center justify-between\">\n                <Rating value={item.rating} aria-label={item.ratingLabel} />\n                <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n              </div>\n              <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n                <p>{item.quote}</p>\n              </blockquote>\n              <figcaption class=\"mt-auto flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\" aria-hidden=\"true\">\n                  <AvatarImage src={item.image} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </figcaption>\n            </figure>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/reviews-2.json b/public/r/styles/base-rhea/reviews-2.json
index d5ae29850..494ef9157 100644
--- a/public/r/styles/base-rhea/reviews-2.json
+++ b/public/r/styles/base-rhea/reviews-2.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <figure class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        <p>{featured.quote}</p>\n      </blockquote>\n      <figcaption class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\" aria-hidden=\"true\">\n          <AvatarImage src={featured.image} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </figcaption>\n    </figure>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <div class=\"flex flex-col\">\n          <Separator />\n          <figure class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n              <p>{item.quote}</p>\n            </blockquote>\n            <figcaption class=\"flex items-center gap-3 pt-1\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={item.image} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </figcaption>\n          </figure>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/reviews-3.json b/public/r/styles/base-rhea/reviews-3.json
index eb084404f..5f405a1b8 100644
--- a/public/r/styles/base-rhea/reviews-3.json
+++ b/public/r/styles/base-rhea/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <figure class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                <p>{item.quote}</p>\n              </blockquote>\n              <figcaption class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\" aria-hidden=\"true\">\n                  <AvatarImage src={item.image} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </figcaption>\n            </figure>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/reviews-4.json b/public/r/styles/base-rhea/reviews-4.json
index 03ac5fc3e..3c962de9f 100644
--- a/public/r/styles/base-rhea/reviews-4.json
+++ b/public/r/styles/base-rhea/reviews-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    play: string\n    pause: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst rows = [reviews.slice(0, half), reviews.slice(half)]\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-6\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    {rows\n      .filter((row) => row.length > 0)\n      .map((row, index) => (\n        <MarqueeContent reverse={index % 2 === 1} class=\"py-1\">\n          {row.map((item) => (\n            <MarqueeItem class=\"flex\">\n              <Card class=\"w-[22rem]\">\n                <CardContent class=\"flex flex-1 flex-col\">\n                  <figure class=\"flex flex-1 flex-col gap-3\">\n                    <Rating value={item.rating} aria-label={item.ratingLabel} />\n                    <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n                      <p>{item.quote}</p>\n                    </blockquote>\n                    <figcaption class=\"mt-auto flex items-center gap-3 pt-1\">\n                      <Avatar aria-hidden=\"true\">\n                        <AvatarImage src={item.image} />\n                        <AvatarFallback>{item.initials}</AvatarFallback>\n                      </Avatar>\n                      <div>\n                        <p class=\"text-foreground text-sm font-medium\">\n                          {item.name}\n                        </p>\n                        <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                      </div>\n                    </figcaption>\n                  </figure>\n                </CardContent>\n              </Card>\n            </MarqueeItem>\n          ))}\n        </MarqueeContent>\n      ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/reviews-5.json b/public/r/styles/base-rhea/reviews-5.json
index 8b3458106..4f438bd1b 100644
--- a/public/r/styles/base-rhea/reviews-5.json
+++ b/public/r/styles/base-rhea/reviews-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    play: string\n    pause: string\n  }\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst rows = [\n  reviews.slice(0, third),\n  reviews.slice(third, third * 2),\n  reviews.slice(third * 2),\n]\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-5\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    {rows\n      .filter((row) => row.length > 0)\n      .map((row, index) => (\n        <MarqueeContent reverse={index % 2 === 1} class=\"py-1\">\n          {row.map((item) => (\n            <MarqueeItem class=\"flex\">\n              <figure class=\"bg-muted/50 flex w-[26rem] flex-col gap-4 rounded-2xl p-6\">\n                <figcaption class=\"flex items-center justify-between gap-3\">\n                  <div class=\"flex items-center gap-3\">\n                    <Avatar size=\"lg\" aria-hidden=\"true\">\n                      <AvatarImage src={item.image} />\n                      <AvatarFallback>{item.initials}</AvatarFallback>\n                    </Avatar>\n                    <div>\n                      <p class=\"text-foreground text-sm font-semibold\">\n                        {item.name}\n                      </p>\n                      <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                    </div>\n                  </div>\n                  <Rating value={item.rating} aria-label={item.ratingLabel} />\n                </figcaption>\n                <div class=\"flex gap-2.5\">\n                  <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n                  <blockquote class=\"text-foreground/80 text-sm leading-relaxed\">\n                    <p>{item.quote}</p>\n                  </blockquote>\n                </div>\n              </figure>\n            </MarqueeItem>\n          ))}\n        </MarqueeContent>\n      ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/section.json b/public/r/styles/base-rhea/section.json
index d9c157958..f3418242f 100644
--- a/public/r/styles/base-rhea/section.json
+++ b/public/r/styles/base-rhea/section.json
@@ -6,12 +6,12 @@
   "files": [
     {
       "path": "src/components/ui/section/section.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-14 py-[var(--section-padding,--spacing(16))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-16 rounded-[min(var(--radius-4xl),24px)] bg-background shadow-sm ring-1 ring-foreground/5 dark:ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-14 py-[var(--section-padding,--spacing(16))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-16 rounded-[min(var(--radius-4xl),24px)] bg-background shadow-sm ring-1 ring-foreground/5 dark:ring-foreground/10 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  \"data-slot\": dataSlot = \"section\",\n  ...props\n} = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot={dataSlot}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/section/section-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"section-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] flex-col gap-8 px-[var(--gutter,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"section-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"relative mx-auto w-full max-w-[var(--container,var(--container-7xl))] px-[var(--gutter,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/services-1.json b/public/r/styles/base-rhea/services-1.json
index 4d5ac713e..0ad551b55 100644
--- a/public/r/styles/base-rhea/services-1.json
+++ b/public/r/styles/base-rhea/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href != null && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs\",\n              service.href != null && \"transition-shadow hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? \"\"}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 80rem) 294px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/services-2.json b/public/r/styles/base-rhea/services-2.json
index f2b3db6bc..8c24f803c 100644
--- a/public/r/styles/base-rhea/services-2.json
+++ b/public/r/styles/base-rhea/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"grid items-center gap-6 rounded-xl border p-4 shadow-xs md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/services-3.json b/public/r/styles/base-rhea/services-3.json
index f259c104f..53b390522 100644
--- a/public/r/styles/base-rhea/services-3.json
+++ b/public/r/styles/base-rhea/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"absolute inset-0 -z-10 size-full object-cover\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 80rem) 612px, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/services-4.json b/public/r/styles/base-rhea/services-4.json
index d357efabf..a848dbe59 100644
--- a/public/r/styles/base-rhea/services-4.json
+++ b/public/r/styles/base-rhea/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 294px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.link && (\n            <a\n              href={service.link.href}\n              class=\"text-primary inline-flex w-fit items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline\"\n            >\n              {service.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/services-5.json b/public/r/styles/base-rhea/services-5.json
index def369794..2458133c0 100644
--- a/public/r/styles/base-rhea/services-5.json
+++ b/public/r/styles/base-rhea/services-5.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background relative flex flex-col gap-4 p-7\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 ring-inset\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.link && (\n            <a\n              href={service.link.href}\n              class=\"text-primary mt-auto inline-flex w-fit items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline\"\n            >\n              {service.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/services-6.json b/public/r/styles/base-rhea/services-6.json
index 70206a046..82f8c027b 100644
--- a/public/r/styles/base-rhea/services-6.json
+++ b/public/r/styles/base-rhea/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 436px, (min-width: 64rem) 35vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/services-7.json b/public/r/styles/base-rhea/services-7.json
index 623952170..bbc7e0404 100644
--- a/public/r/styles/base-rhea/services-7.json
+++ b/public/r/styles/base-rhea/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 1024px) 66vw, 100vw\"\n                  : \"(min-width: 1024px) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs\",\n              service.href != null && \"transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? \"\"}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 80rem) 824px, (min-width: 64rem) 66vw, 100vw\"\n                  : \"(min-width: 80rem) 400px, (min-width: 64rem) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/sidebar-1.json b/public/r/styles/base-rhea/sidebar-1.json
index 3476f325b..4ec41b325 100644
--- a/public/r/styles/base-rhea/sidebar-1.json
+++ b/public/r/styles/base-rhea/sidebar-1.json
@@ -22,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebar: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar\n    class={cn(\"\", className)}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebar} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={labels.github}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  currentPath: string\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    sidebar: string\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebarToggle: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  currentPath: rawCurrentPath,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n  ...props\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(rawCurrentPath)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider {...props}>\n  <Sidebar\n    aria-label={labels.sidebar}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebarToggle} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            <Icon name=\"github\" />\n            <span class=\"sr-only\">{labels.github}</span>\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/sidebar.json b/public/r/styles/base-rhea/sidebar.json
index 4ec3f1f0d..9c973f84b 100644
--- a/public/r/styles/base-rhea/sidebar.json
+++ b/public/r/styles/base-rhea/sidebar.json
@@ -24,7 +24,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-2xl group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <aside\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-2xl group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </aside>\n    </div>\n  </>\n)}\n",
       "type": "registry:ui"
     },
     {
@@ -34,7 +34,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar-rail.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst { class: className, type = \"button\", ...props } = Astro.props\n---\n\n<button\n  data-sidebar=\"rail\"\n  data-slot=\"sidebar-rail\"\n  aria-label=\"Toggle Sidebar\"\n  tabindex={-1}\n  title=\"Toggle Sidebar\"\n  type={type}\n  class={cn(\n    \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n    \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n    \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n    \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n    \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n    \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n    className\n  )}\n  {...props}\n></button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  type = \"button\",\n  \"aria-label\": ariaLabel = \"Toggle Sidebar\",\n  title = ariaLabel,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-sidebar=\"rail\"\n  data-slot=\"sidebar-rail\"\n  aria-label={ariaLabel}\n  tabindex={-1}\n  title={title}\n  type={type}\n  class={cn(\n    \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n    \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n    \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n    \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n    \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n    \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n    className\n  )}\n  {...props}\n></button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/article-1.json b/public/r/styles/base-sera/article-1.json
index c45df6988..a864d2860 100644
--- a/public/r/styles/base-sera/article-1.json
+++ b/public/r/styles/base-sera/article-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/article-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"max-w-2xl\">\n    <article class=\"flex flex-col gap-8\">\n      <header class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n            {title}\n          </h1>\n          <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n            {description}\n          </p>\n        </div>\n        <div class=\"flex items-center gap-3\">\n          <Avatar size=\"lg\" aria-hidden=\"true\">\n            <AvatarImage src={author.image} />\n            <AvatarFallback>{author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n          </div>\n        </div>\n      </header>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 42rem) 42rem, 100vw\"\n        loading=\"eager\"\n        fetchpriority=\"high\"\n      />\n      <div class=\"flex flex-col gap-6 text-base leading-8\">\n        <slot />\n      </div>\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/article-2.json b/public/r/styles/base-sera/article-2.json
index 6511245f3..c0a3f5f9a 100644
--- a/public/r/styles/base-sera/article-2.json
+++ b/public/r/styles/base-sera/article-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/article-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"max-w-2xl\">\n    <article class=\"flex flex-col gap-8\">\n      <header class=\"flex flex-col items-center gap-6 text-center\">\n        <div class=\"flex flex-col gap-4\">\n          <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n            {title}\n          </h1>\n          <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n            {description}\n          </p>\n        </div>\n        <div class=\"flex items-center gap-3\">\n          <Avatar size=\"lg\" aria-hidden=\"true\">\n            <AvatarImage src={author.image} />\n            <AvatarFallback>{author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col text-left\">\n            <p class=\"text-sm font-medium\">\n              {author.name}{\" \"}\n              <span class=\"text-muted-foreground font-normal\">\n                &middot; {author.date}\n              </span>\n            </p>\n            <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n          </div>\n        </div>\n      </header>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 42rem) 42rem, 100vw\"\n        loading=\"eager\"\n        fetchpriority=\"high\"\n      />\n      <div class=\"flex flex-col gap-6 text-base leading-8\">\n        <slot />\n      </div>\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/articles-1.json b/public/r/styles/base-sera/articles-1.json
index 30aa52bd2..2c9f3ed3b 100644
--- a/public/r/styles/base-sera/articles-1.json
+++ b/public/r/styles/base-sera/articles-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/articles-2.json b/public/r/styles/base-sera/articles-2.json
index a9d78a9f5..6e60d3f18 100644
--- a/public/r/styles/base-sera/articles-2.json
+++ b/public/r/styles/base-sera/articles-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class={cn(\n        \"grid gap-6 rounded-xl lg:grid-cols-2 lg:items-center lg:pr-4\",\n        featured.href != null &&\n          \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n      )}\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 80rem) 616px, (min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar aria-hidden=\"true\">\n            <AvatarImage src={featured.author.image} />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/articles-3.json b/public/r/styles/base-sera/articles-3.json
index e4182724a..bd0837d65 100644
--- a/public/r/styles/base-sera/articles-3.json
+++ b/public/r/styles/base-sera/articles-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"bg-muted/50 flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/articles-4.json b/public/r/styles/base-sera/articles-4.json
index b0c908073..ddff63354 100644
--- a/public/r/styles/base-sera/articles-4.json
+++ b/public/r/styles/base-sera/articles-4.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl border p-6\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/blocks-1.json b/public/r/styles/base-sera/blocks-1.json
index a0da615ca..8719d1a46 100644
--- a/public/r/styles/base-sera/blocks-1.json
+++ b/public/r/styles/base-sera/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"flex flex-col gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/carousel.json b/public/r/styles/base-sera/carousel.json
index b8fe99821..98dcc9dde 100644
--- a/public/r/styles/base-sera/carousel.json
+++ b/public/r/styles/base-sera/carousel.json
@@ -13,27 +13,27 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  \"data-slot\": dataSlot = \"carousel\",\n  // A named section is a region landmark. Without a name it would have no\n  // role, so it becomes a group, the other container role the APG carousel\n  // allows.\n  role = Astro.props[\"aria-label\"] || Astro.props[\"aria-labelledby\"]\n    ? undefined\n    : \"group\",\n  ...props\n} = Astro.props\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot={dataSlot}\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={role}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts. The data-carousel-* markers stay\n  // in place when a caller overrides data-slot.\n  const rootSelector = \"[data-carousel-options]\"\n  const getParts = <T extends Element>(root: CarouselRoot, part: string) =>\n    [...root.querySelectorAll<T>(`[data-carousel-${part}]`)].filter(\n      (element) => element.closest(rootSelector) === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(rootSelector)) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"viewport\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"previous\")\n      const next = getParts<HTMLButtonElement>(root, \"next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest(rootSelector) !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-content.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div class=\"overflow-hidden\" data-slot=\"carousel-content\">\n  <div\n    data-slot=\"carousel-container\"\n    class={cn(\n      \"flex [touch-action:pan-y_pinch-zoom]\",\n      \"group-data-[orientation=vertical]/carousel:-mt-4 group-data-[orientation=vertical]/carousel:[touch-action:pan-x_pinch-zoom] group-data-[orientation=vertical]/carousel:flex-col\",\n      \"group-data-[orientation=horizontal]/carousel:-ml-4\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"carousel-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class=\"overflow-hidden\"\n  data-slot=\"carousel-content\"\n  data-carousel-viewport\n>\n  <div\n    data-slot={dataSlot}\n    class={cn(\n      \"flex [touch-action:pan-y_pinch-zoom]\",\n      \"group-data-[orientation=vertical]/carousel:-mt-4 group-data-[orientation=vertical]/carousel:[touch-action:pan-x_pinch-zoom] group-data-[orientation=vertical]/carousel:flex-col\",\n      \"group-data-[orientation=horizontal]/carousel:-ml-4\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  \"data-slot\": dataSlot = \"carousel-item\",\n  role = \"group\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  role={role}\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-next.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  \"data-slot\": dataSlot = \"carousel-next\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot={dataSlot}\n  data-carousel-next\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-previous.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  \"data-slot\": dataSlot = \"carousel-previous\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot={dataSlot}\n  data-carousel-previous\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/contact-1.json b/public/r/styles/base-sera/contact-1.json
index 9af391672..cb4345f47 100644
--- a/public/r/styles/base-sera/contact-1.json
+++ b/public/r/styles/base-sera/contact-1.json
@@ -3,22 +3,15 @@
   "name": "contact-1",
   "title": "Contact 1",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n                aria-describedby={`${formId}-message-description`}\n              />\n              <FieldDescription id={`${formId}-message-description`}>\n                {form.messageDescription}\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <li class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          <Button\n            as=\"span\"\n            variant=\"secondary\"\n            size=\"icon\"\n            class=\"text-primary\"\n            aria-hidden=\"true\"\n          >\n            <Icon name={item.icon} />\n          </Button>\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          {item.href != null ? (\n            <a\n              href={item.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n            >\n              {item.description}\n            </a>\n          ) : (\n            <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n              {item.description}\n            </p>\n          )}\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n  {Astro.slots.has(\"default\") && (\n    <SectionContainer>\n      <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n        <slot />\n      </div>\n    </SectionContainer>\n  )}\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/contact-2.json b/public/r/styles/base-sera/contact-2.json
index 97172ad7d..ec5bb574f 100644
--- a/public/r/styles/base-sera/contact-2.json
+++ b/public/r/styles/base-sera/contact-2.json
@@ -3,22 +3,15 @@
   "name": "contact-2",
   "title": "Contact 2",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    title: string\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1fr)_22rem] lg:items-start\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <div class=\"mb-6\">\n          <h3 class=\"text-lg font-medium\">{form.title}</h3>\n        </div>\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n\n    <div class=\"flex flex-col gap-3\">\n      {contactItems.map((item) => (\n        <div class=\"flex gap-4 rounded-xl border p-4\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <div class=\"flex flex-col gap-1\">\n            <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1fr)_22rem] lg:items-start\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {Astro.slots.has(\"default\") && (\n        <div class=\"rounded-xl border p-6\">\n          <slot />\n        </div>\n      )}\n    </div>\n\n    <ul class=\"flex flex-col gap-3\">\n      {contactItems.map((item) => (\n        <li class=\"flex gap-4 rounded-xl border p-4\">\n          <Button\n            as=\"span\"\n            variant=\"secondary\"\n            size=\"icon\"\n            class=\"text-primary shrink-0\"\n            aria-hidden=\"true\"\n          >\n            <Icon name={item.icon} />\n          </Button>\n          <div class=\"flex flex-col gap-1\">\n            <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n            {item.href != null ? (\n              <a\n                href={item.href}\n                class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n              >\n                {item.description}\n              </a>\n            ) : (\n              <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n                {item.description}\n              </p>\n            )}\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/contact-3.json b/public/r/styles/base-sera/contact-3.json
index 15a42d48f..b50f57b6e 100644
--- a/public/r/styles/base-sera/contact-3.json
+++ b/public/r/styles/base-sera/contact-3.json
@@ -3,22 +3,15 @@
   "name": "contact-3",
   "title": "Contact 3",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <li class=\"flex gap-4\">\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n            <div class=\"flex min-w-0 flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              {item.href != null ? (\n                <a\n                  href={item.href}\n                  class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n                >\n                  {item.description}\n                </a>\n              ) : (\n                <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n                  {item.description}\n                </p>\n              )}\n            </div>\n          </li>\n        ))}\n      </ul>\n      {Astro.slots.has(\"default\") && (\n        <div class=\"rounded-xl border p-6\">\n          <slot />\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/content-1.json b/public/r/styles/base-sera/content-1.json
index 37cc98379..45ceca637 100644
--- a/public/r/styles/base-sera/content-1.json
+++ b/public/r/styles/base-sera/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-3 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-3 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/content-2.json b/public/r/styles/base-sera/content-2.json
index 693b5d9bb..7675cc352 100644
--- a/public/r/styles/base-sera/content-2.json
+++ b/public/r/styles/base-sera/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/content-3.json b/public/r/styles/base-sera/content-3.json
index fdc0b7afd..cf3b62853 100644
--- a/public/r/styles/base-sera/content-3.json
+++ b/public/r/styles/base-sera/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/content-4.json b/public/r/styles/base-sera/content-4.json
index 4dd1cd6f3..fcce4f136 100644
--- a/public/r/styles/base-sera/content-4.json
+++ b/public/r/styles/base-sera/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 80rem) 800px, (min-width: 64rem) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/cta-1.json b/public/r/styles/base-sera/cta-1.json
index 880fa60eb..10cbc452e 100644
--- a/public/r/styles/base-sera/cta-1.json
+++ b/public/r/styles/base-sera/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/cta-2.json b/public/r/styles/base-sera/cta-2.json
index 05cfb2687..347395042 100644
--- a/public/r/styles/base-sera/cta-2.json
+++ b/public/r/styles/base-sera/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/cta-3.json b/public/r/styles/base-sera/cta-3.json
index caf08c91a..d8a956197 100644
--- a/public/r/styles/base-sera/cta-3.json
+++ b/public/r/styles/base-sera/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/cta-4.json b/public/r/styles/base-sera/cta-4.json
index 2ed196c48..43d7c1bd8 100644
--- a/public/r/styles/base-sera/cta-4.json
+++ b/public/r/styles/base-sera/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/cta-5.json b/public/r/styles/base-sera/cta-5.json
index 39ff0c7bb..7a122cb13 100644
--- a/public/r/styles/base-sera/cta-5.json
+++ b/public/r/styles/base-sera/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/cta-6.json b/public/r/styles/base-sera/cta-6.json
index cbd7368fe..9aa3276fe 100644
--- a/public/r/styles/base-sera/cta-6.json
+++ b/public/r/styles/base-sera/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/cta-7.json b/public/r/styles/base-sera/cta-7.json
index 86813e6c0..b6755b388 100644
--- a/public/r/styles/base-sera/cta-7.json
+++ b/public/r/styles/base-sera/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-muted-foreground text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription class=\"text-foreground/80\">\n        {description}\n      </SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-foreground/80 text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/cta-8.json b/public/r/styles/base-sera/cta-8.json
index eaac34d78..7acaffa25 100644
--- a/public/r/styles/base-sera/cta-8.json
+++ b/public/r/styles/base-sera/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col gap-8 before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/doc-1.json b/public/r/styles/base-sera/doc-1.json
index 9c98b34f9..49048e0e5 100644
--- a/public/r/styles/base-sera/doc-1.json
+++ b/public/r/styles/base-sera/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"flex flex-col gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/faqs-1.json b/public/r/styles/base-sera/faqs-1.json
index 92d59430a..fe0decf6f 100644
--- a/public/r/styles/base-sera/faqs-1.json
+++ b/public/r/styles/base-sera/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/faqs-3.json b/public/r/styles/base-sera/faqs-3.json
index a0d634566..cd5d5197c 100644
--- a/public/r/styles/base-sera/faqs-3.json
+++ b/public/r/styles/base-sera/faqs-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/faqs-4.json b/public/r/styles/base-sera/faqs-4.json
index 4fe0db0bb..19de0d927 100644
--- a/public/r/styles/base-sera/faqs-4.json
+++ b/public/r/styles/base-sera/faqs-4.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst { class: className, title, faqs, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center\">\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <SectionTitle>{title}</SectionTitle>\n      <div class=\"mt-10\">\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst { class: className, title, faqs, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center\">\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <SectionTitle>{title}</SectionTitle>\n      <div class=\"mt-10\">\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/features-1.json b/public/r/styles/base-sera/features-1.json
index 585c6b7f2..61240563f 100644
--- a/public/r/styles/base-sera/features-1.json
+++ b/public/r/styles/base-sera/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <li class=\"flex flex-col gap-4 rounded-xl border p-6\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.link && (\n            <a\n              href={feature.link.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/features-2.json b/public/r/styles/base-sera/features-2.json
index 467338413..a15ebe78c 100644
--- a/public/r/styles/base-sera/features-2.json
+++ b/public/r/styles/base-sera/features-2.json
@@ -3,9 +3,6 @@
   "name": "features-2",
   "title": "Features 2",
   "description": "Feature section layouts for product narratives, launch pages, and capability overviews.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/icon",
     "@fulldev/section"
@@ -13,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li class=\"bg-background relative flex flex-col items-center gap-4 p-7 text-center\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 ring-inset\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/features-3.json b/public/r/styles/base-sera/features-3.json
index 83402f1a0..0f7902b8c 100644
--- a/public/r/styles/base-sera/features-3.json
+++ b/public/r/styles/base-sera/features-3.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex items-center gap-5 rounded-xl border p-4 transition-colors\">\n          <Image\n            src={feature.image.src}\n            alt={feature.image.alt}\n            class=\"size-20 shrink-0 rounded-lg object-cover\"\n            widths={[160, 320]}\n            sizes=\"80px\"\n          />\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-5 rounded-xl border p-4\">\n          <Image\n            src={feature.image.src}\n            alt={feature.image.alt}\n            class=\"size-20 shrink-0 rounded-lg object-cover\"\n            widths={[160, 320]}\n            sizes=\"80px\"\n          />\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/features-4.json b/public/r/styles/base-sera/features-4.json
index 6cadcba43..437798358 100644
--- a/public/r/styles/base-sera/features-4.json
+++ b/public/r/styles/base-sera/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <ul class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <li class=\"flex flex-col gap-4 rounded-xl border p-6\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.link && (\n              <a\n                href={feature.link.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.link.label}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </li>\n        ))}\n      </ul>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/features-5.json b/public/r/styles/base-sera/features-5.json
index 61eba406f..420643adf 100644
--- a/public/r/styles/base-sera/features-5.json
+++ b/public/r/styles/base-sera/features-5.json
@@ -3,9 +3,6 @@
   "name": "features-5",
   "title": "Features 5",
   "description": "Feature section layouts for product narratives, launch pages, and capability overviews.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/icon",
     "@fulldev/section"
@@ -13,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li class=\"flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/features-6.json b/public/r/styles/base-sera/features-6.json
index d21ff5c93..9b01c7537 100644
--- a/public/r/styles/base-sera/features-6.json
+++ b/public/r/styles/base-sera/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/footer-1.json b/public/r/styles/base-sera/footer-1.json
index 7ac3e8331..6e75db4ac 100644
--- a/public/r/styles/base-sera/footer-1.json
+++ b/public/r/styles/base-sera/footer-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer class=\"flex flex-col gap-8\">\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <h2 class=\"text-sm font-medium\">{column.title}</h2>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/footer-2.json b/public/r/styles/base-sera/footer-2.json
index 217f595bb..d5fbcdfec 100644
--- a/public/r/styles/base-sera/footer-2.json
+++ b/public/r/styles/base-sera/footer-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      <div class=\"flex items-center justify-center gap-3\">\n        {socials.map((social) => (\n          <a\n            href={social.href}\n            class=\"text-muted-foreground hover:text-foreground transition-colors\"\n            aria-label={social.label}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n          >\n            <Icon name={social.icon} href={social.href} class=\"size-4\" />\n          </a>\n        ))}\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      {socials.length > 0 && (\n        <div class=\"flex items-center justify-center gap-3\">\n          {socials.map((social) => (\n            <a\n              href={social.href}\n              class=\"text-muted-foreground hover:text-foreground transition-colors\"\n              aria-label={social.label}\n            >\n              <Icon name={social.icon} href={social.href} class=\"size-4\" />\n            </a>\n          ))}\n        </div>\n      )}\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/footer-3.json b/public/r/styles/base-sera/footer-3.json
index b5bc278e9..27d6eb84e 100644
--- a/public/r/styles/base-sera/footer-3.json
+++ b/public/r/styles/base-sera/footer-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer class=\"flex flex-col gap-8\">\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <h2 class=\"text-sm font-medium\">{column.title}</h2>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/header-1.json b/public/r/styles/base-sera/header-1.json
index df82b249a..3519b5b28 100644
--- a/public/r/styles/base-sera/header-1.json
+++ b/public/r/styles/base-sera/header-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/header-2.json b/public/r/styles/base-sera/header-2.json
index 8b36cd0c2..61d105855 100644
--- a/public/r/styles/base-sera/header-2.json
+++ b/public/r/styles/base-sera/header-2.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/header-3.json b/public/r/styles/base-sera/header-3.json
index 45ef24dbf..6840b6313 100644
--- a/public/r/styles/base-sera/header-3.json
+++ b/public/r/styles/base-sera/header-3.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/header-4.json b/public/r/styles/base-sera/header-4.json
index 4e6f46ac7..4048d78d5 100644
--- a/public/r/styles/base-sera/header-4.json
+++ b/public/r/styles/base-sera/header-4.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/header-5.json b/public/r/styles/base-sera/header-5.json
index c6a7b4990..3fe98b775 100644
--- a/public/r/styles/base-sera/header-5.json
+++ b/public/r/styles/base-sera/header-5.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/header.json b/public/r/styles/base-sera/header.json
index 0e967ba8a..c22e648ff 100644
--- a/public/r/styles/base-sera/header.json
+++ b/public/r/styles/base-sera/header.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/header/header.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-3 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-none border bg-background shadow-sm mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-3 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-none border bg-background shadow-sm mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  \"data-slot\": dataSlot = \"header\",\n  ...props\n} = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot={dataSlot}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/hero-1.json b/public/r/styles/base-sera/hero-1.json
index 74dc8b92d..3001b9ff4 100644
--- a/public/r/styles/base-sera/hero-1.json
+++ b/public/r/styles/base-sera/hero-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n      {badge.label}\n    </Badge>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge?: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    {badge && (\n      <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n        {badge.label}\n      </Badge>\n    )}\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/hero-10.json b/public/r/styles/base-sera/hero-10.json
index 96ed3c089..770bb0a86 100644
--- a/public/r/styles/base-sera/hero-10.json
+++ b/public/r/styles/base-sera/hero-10.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-10.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/hero-11.json b/public/r/styles/base-sera/hero-11.json
index 86a7f5e03..09a801205 100644
--- a/public/r/styles/base-sera/hero-11.json
+++ b/public/r/styles/base-sera/hero-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-11.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/hero-12.json b/public/r/styles/base-sera/hero-12.json
index a88805751..77a37b010 100644
--- a/public/r/styles/base-sera/hero-12.json
+++ b/public/r/styles/base-sera/hero-12.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-12.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/hero-13.json b/public/r/styles/base-sera/hero-13.json
index f25d55373..f1f708613 100644
--- a/public/r/styles/base-sera/hero-13.json
+++ b/public/r/styles/base-sera/hero-13.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-13.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 900px, (min-width: 64rem) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/hero-2.json b/public/r/styles/base-sera/hero-2.json
index 672b023de..872bdcf70 100644
--- a/public/r/styles/base-sera/hero-2.json
+++ b/public/r/styles/base-sera/hero-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/hero-3.json b/public/r/styles/base-sera/hero-3.json
index 03cde7001..dcd3d0d23 100644
--- a/public/r/styles/base-sera/hero-3.json
+++ b/public/r/styles/base-sera/hero-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/hero-4.json b/public/r/styles/base-sera/hero-4.json
index ccdf499cf..b0e278928 100644
--- a/public/r/styles/base-sera/hero-4.json
+++ b/public/r/styles/base-sera/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/hero-5.json b/public/r/styles/base-sera/hero-5.json
index a11173eff..1b95a5469 100644
--- a/public/r/styles/base-sera/hero-5.json
+++ b/public/r/styles/base-sera/hero-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/hero-6.json b/public/r/styles/base-sera/hero-6.json
index f458c5879..b60078e9c 100644
--- a/public/r/styles/base-sera/hero-6.json
+++ b/public/r/styles/base-sera/hero-6.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/hero-7.json b/public/r/styles/base-sera/hero-7.json
index e417ccade..75d00053f 100644
--- a/public/r/styles/base-sera/hero-7.json
+++ b/public/r/styles/base-sera/hero-7.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 750px, (min-width: 64rem) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/hero-8.json b/public/r/styles/base-sera/hero-8.json
index a3db6ba64..2ed1b607f 100644
--- a/public/r/styles/base-sera/hero-8.json
+++ b/public/r/styles/base-sera/hero-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-8.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 936px, (min-width: 64rem) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/hero-9.json b/public/r/styles/base-sera/hero-9.json
index 22397aa77..3fc4a2faa 100644
--- a/public/r/styles/base-sera/hero-9.json
+++ b/public/r/styles/base-sera/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/links-2.json b/public/r/styles/base-sera/links-2.json
index 9e1d20ae8..ed6e31559 100644
--- a/public/r/styles/base-sera/links-2.json
+++ b/public/r/styles/base-sera/links-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/links-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/logos-1.json b/public/r/styles/base-sera/logos-1.json
index de017ff6a..de62b4b00 100644
--- a/public/r/styles/base-sera/logos-1.json
+++ b/public/r/styles/base-sera/logos-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <li>\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground transition-colors focus-visible:text-foreground\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/logos-2.json b/public/r/styles/base-sera/logos-2.json
index 3d3960693..48760e394 100644
--- a/public/r/styles/base-sera/logos-2.json
+++ b/public/r/styles/base-sera/logos-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n  labels: {\n    play: string\n    pause: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  brands,\n  labels,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-4 [--marquee-gap:--spacing(12)]\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    <MarqueeContent class=\"text-muted-foreground mask-x-from-90%\">\n      {brands.map((brand) => (\n        <MarqueeItem class=\"flex items-center\">\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground focus-visible:text-foreground transition-colors\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </MarqueeItem>\n      ))}\n    </MarqueeContent>\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/logos-3.json b/public/r/styles/base-sera/logos-3.json
index f0f2762ed..4824f14cc 100644
--- a/public/r/styles/base-sera/logos-3.json
+++ b/public/r/styles/base-sera/logos-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"py-12 lg:py-16\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"text-muted-foreground flex flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"py-12 lg:py-16\", className)} {...props}>\n  <SectionContainer>\n    <ul class=\"text-muted-foreground flex flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <li>\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground transition-colors focus-visible:text-foreground\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/marquee.json b/public/r/styles/base-sera/marquee.json
index c932b246a..c0543ae7f 100644
--- a/public/r/styles/base-sera/marquee.json
+++ b/public/r/styles/base-sera/marquee.json
@@ -2,16 +2,39 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "marquee",
   "title": "Marquee",
-  "description": "A continuous scrolling animation component for displaying content in a loop.",
+  "description": "A continuously scrolling row of content, with a pause control and a static fallback.",
+  "dependencies": [
+    "embla-carousel@8.6.0",
+    "embla-carousel-auto-scroll@8.6.0",
+    "@lucide/astro"
+  ],
+  "registryDependencies": [
+    "@fulldev/button"
+  ],
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  data-slot={dataSlot}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({ viewport }))\n      // Moving content needs a way to pause it, so a marquee without a toggle\n      // stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no focusable content of its own.\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = row.viewport.querySelector(\n          \"a[href], button, input, select, textarea, [tabindex]\"\n        )\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || toggles.length === 0) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-content.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  reverse?: boolean\n}\n\nconst {\n  class: className,\n  reverse = false,\n  \"data-slot\": dataSlot = \"marquee-content\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee-viewport\n  data-reverse={reverse ? \"\" : undefined}\n  class={cn(\n    \"focus-visible:ring-ring/50 overflow-x-auto outline-none contain-inline-size focus-visible:ring-3 data-active:overflow-hidden\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"-ms-[var(--marquee-gap,--spacing(4))] flex justify-center-safe\">\n    <slot />\n  </div>\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-item.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee-item\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 ps-[var(--marquee-gap,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-toggle.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  hidden\n  data-slot={dataSlot}\n  data-marquee-toggle\n  data-state=\"playing\"\n  data-play-label={playLabel}\n  data-pause-label={pauseLabel}\n  data-variant={variant}\n  data-size={size}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"group/marquee-toggle\",\n    className\n  )}\n  {...props}\n>\n  <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n  <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n  <span class=\"sr-only\" data-marquee-label>\n    {pauseLabel}\n  </span>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/marquee/index.ts",
-      "content": "export { default as Marquee } from \"./marquee.astro\"\n",
+      "content": "export { default as Marquee } from \"./marquee.astro\"\nexport { default as MarqueeContent } from \"./marquee-content.astro\"\nexport { default as MarqueeItem } from \"./marquee-item.astro\"\nexport { default as MarqueeToggle } from \"./marquee-toggle.astro\"\n",
       "type": "registry:ui"
     }
   ],
diff --git a/public/r/styles/base-sera/price.json b/public/r/styles/base-sera/price.json
index 4dc2ce0ee..84af86367 100644
--- a/public/r/styles/base-sera/price.json
+++ b/public/r/styles/base-sera/price.json
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/price/price-value.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-none px-0 py-0.5 text-[0.625rem] font-semibold tracking-widest text-muted-foreground uppercase\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  parseSinglePriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n    discountLabel?: string\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  discountLabel = \"Save\",\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst currentValue = parseSinglePriceValue(price)\nconst compareAtValue = parseSinglePriceValue(compareAt)\n// A compare-at price only shows when it is higher than the price.\nconst formattedCompareAt =\n  currentValue !== null &&\n  compareAtValue !== null &&\n  compareAtValue <= currentValue\n    ? null\n    : formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && formattedCompareAt !== null\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\n---\n\n{formattedPrice !== null && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt !== null && (\n      <del class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </del>\n    )}\n    {formattedDiscount !== null && (\n      <span class=\"rounded-none px-0 py-0.5 text-[0.625rem] font-semibold tracking-widest text-muted-foreground uppercase\">\n        {discountLabel} {formattedDiscount}\n      </span>\n    )}\n  </span>\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/pricing-1.json b/public/r/styles/base-sera/pricing-1.json
index 69ddbb891..2649f08fb 100644
--- a/public/r/styles/base-sera/pricing-1.json
+++ b/public/r/styles/base-sera/pricing-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  locale?: string\n  discountLabel?: string\n  plans: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  locale,\n  discountLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle as=\"h3\">{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price.value}\n                compareAt={plan.price.compareAt}\n                currency={plan.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{plan.price.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-start gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/pricing-2.json b/public/r/styles/base-sera/pricing-2.json
index 6f6a446c3..14d7ffde3 100644
--- a/public/r/styles/base-sera/pricing-2.json
+++ b/public/r/styles/base-sera/pricing-2.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={index === 0 ? \"outline\" : \"default\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  locale?: string\n  discountLabel?: string\n  plans: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  locale,\n  discountLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle as=\"h3\">{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price.value}\n                compareAt={plan.price.compareAt}\n                currency={plan.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{plan.price.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-start gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/pricing-3.json b/public/r/styles/base-sera/pricing-3.json
index cf14ce08c..5e767ea90 100644
--- a/public/r/styles/base-sera/pricing-3.json
+++ b/public/r/styles/base-sera/pricing-3.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  locale?: string\n  discountLabel?: string\n  offer: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  locale,\n  discountLabel,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle as=\"h3\">{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue\n            price={offer.price.value}\n            compareAt={offer.price.compareAt}\n            currency={offer.price.currency}\n            locale={locale}\n            discountLabel={discountLabel}\n          />\n          <PriceUnit>{offer.price.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/product-1.json b/public/r/styles/base-sera/product-1.json
index 74777c9da..d09a7114b 100644
--- a/public/r/styles/base-sera/product-1.json
+++ b/public/r/styles/base-sera/product-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/product-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    compareAt?: number\n    currency: string\n    unit: string\n  }\n  locale?: string\n  discountLabel?: string\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  locale,\n  discountLabel,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] w-full rounded-lg object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 608px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue\n          price={price.value}\n          compareAt={price.compareAt}\n          currency={price.currency}\n          locale={locale}\n          discountLabel={discountLabel}\n        />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/products-1.json b/public/r/styles/base-sera/products-1.json
index 551e0e726..2bc2c4508 100644
--- a/public/r/styles/base-sera/products-1.json
+++ b/public/r/styles/base-sera/products-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 302px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/products-2.json b/public/r/styles/base-sera/products-2.json
index 47d395874..34a441afd 100644
--- a/public/r/styles/base-sera/products-2.json
+++ b/public/r/styles/base-sera/products-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"max-w-2xl\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-3\">\n      {products.map((item) => (\n        <div>\n          <Separator />\n          <div class=\"flex flex-col gap-4 py-5 md:flex-row md:items-center md:justify-between\">\n            <div class=\"flex flex-col gap-1 md:max-w-lg\">\n              <h3 class=\"text-base font-medium\">{item.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-6\">\n                {item.description}\n              </p>\n            </div>\n            <Price>\n              <PriceValue\n                price={item.price.value}\n                currency={item.price.currency}\n              />\n              <PriceUnit>{item.price.unit}</PriceUnit>\n            </Price>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"max-w-2xl\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-3\">\n      {products.map((item) => (\n        <div>\n          <Separator />\n          <div class=\"flex flex-col gap-4 py-5 md:flex-row md:items-center md:justify-between\">\n            <div class=\"flex flex-col gap-1 md:max-w-lg\">\n              <h3 class=\"text-base font-medium\">{item.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-6\">\n                {item.description}\n              </p>\n            </div>\n            <Price>\n              <PriceValue\n                price={item.price.value}\n                compareAt={item.price.compareAt}\n                currency={item.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{item.price.unit}</PriceUnit>\n            </Price>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/products-3.json b/public/r/styles/base-sera/products-3.json
index 91921d696..0e6645c63 100644
--- a/public/r/styles/base-sera/products-3.json
+++ b/public/r/styles/base-sera/products-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card class=\"text-center\">\n          <CardHeader>\n            <Price class=\"justify-center\">\n              <PriceValue\n                class=\"text-3xl font-semibold\"\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n            </Price>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-2\">\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card class=\"text-center\">\n          <CardHeader>\n            <Price class=\"justify-center\">\n              <PriceValue\n                class=\"text-3xl font-semibold\"\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n            </Price>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-2\">\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/products-4.json b/public/r/styles/base-sera/products-4.json
index 5c64e3d1f..6885edb3d 100644
--- a/public/r/styles/base-sera/products-4.json
+++ b/public/r/styles/base-sera/products-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 405px, (min-width: 64rem) 33vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/products-5.json b/public/r/styles/base-sera/products-5.json
index c9420d383..9b0a09fb9 100644
--- a/public/r/styles/base-sera/products-5.json
+++ b/public/r/styles/base-sera/products-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"gap-0 overflow-hidden\">\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[3/4] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 302px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/registry.json b/public/r/styles/base-sera/registry.json
index ff9ec1227..a1f362fb0 100644
--- a/public/r/styles/base-sera/registry.json
+++ b/public/r/styles/base-sera/registry.json
@@ -1064,16 +1064,36 @@
       "name": "marquee",
       "type": "registry:ui",
       "title": "Marquee",
-      "description": "A continuous scrolling animation component for displaying content in a loop.",
+      "description": "A continuously scrolling row of content, with a pause control and a static fallback.",
       "categories": [
         "ui"
       ],
       "docs": "https://ui.full.dev/components/marquee/",
+      "dependencies": [
+        "embla-carousel@8.6.0",
+        "embla-carousel-auto-scroll@8.6.0",
+        "@lucide/astro"
+      ],
+      "registryDependencies": [
+        "@fulldev/button"
+      ],
       "files": [
         {
           "path": "src/components/ui/marquee/marquee.astro",
           "type": "registry:ui"
         },
+        {
+          "path": "src/components/ui/marquee/marquee-content.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/marquee/marquee-item.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/marquee/marquee-toggle.astro",
+          "type": "registry:ui"
+        },
         {
           "path": "src/components/ui/marquee/index.ts",
           "type": "registry:ui"
@@ -2721,16 +2741,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -2749,16 +2762,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -2777,16 +2783,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -3248,9 +3247,6 @@
         "features"
       ],
       "docs": "https://ui.full.dev/blocks/features/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/icon",
         "@fulldev/section"
@@ -3314,9 +3310,6 @@
         "features"
       ],
       "docs": "https://ui.full.dev/blocks/features/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/icon",
         "@fulldev/section"
diff --git a/public/r/styles/base-sera/reviews-1.json b/public/r/styles/base-sera/reviews-1.json
index 1a508f17b..d4fae359c 100644
--- a/public/r/styles/base-sera/reviews-1.json
+++ b/public/r/styles/base-sera/reviews-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-1 flex-col\">\n            <figure class=\"flex flex-1 flex-col gap-4\">\n              <div class=\"flex items-center justify-between\">\n                <Rating value={item.rating} aria-label={item.ratingLabel} />\n                <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n              </div>\n              <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n                <p>{item.quote}</p>\n              </blockquote>\n              <figcaption class=\"mt-auto flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\" aria-hidden=\"true\">\n                  <AvatarImage src={item.image} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </figcaption>\n            </figure>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/reviews-2.json b/public/r/styles/base-sera/reviews-2.json
index d5ae29850..494ef9157 100644
--- a/public/r/styles/base-sera/reviews-2.json
+++ b/public/r/styles/base-sera/reviews-2.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <figure class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        <p>{featured.quote}</p>\n      </blockquote>\n      <figcaption class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\" aria-hidden=\"true\">\n          <AvatarImage src={featured.image} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </figcaption>\n    </figure>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <div class=\"flex flex-col\">\n          <Separator />\n          <figure class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n              <p>{item.quote}</p>\n            </blockquote>\n            <figcaption class=\"flex items-center gap-3 pt-1\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={item.image} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </figcaption>\n          </figure>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/reviews-3.json b/public/r/styles/base-sera/reviews-3.json
index eb084404f..5f405a1b8 100644
--- a/public/r/styles/base-sera/reviews-3.json
+++ b/public/r/styles/base-sera/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <figure class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                <p>{item.quote}</p>\n              </blockquote>\n              <figcaption class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\" aria-hidden=\"true\">\n                  <AvatarImage src={item.image} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </figcaption>\n            </figure>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/reviews-4.json b/public/r/styles/base-sera/reviews-4.json
index 03ac5fc3e..3c962de9f 100644
--- a/public/r/styles/base-sera/reviews-4.json
+++ b/public/r/styles/base-sera/reviews-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    play: string\n    pause: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst rows = [reviews.slice(0, half), reviews.slice(half)]\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-6\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    {rows\n      .filter((row) => row.length > 0)\n      .map((row, index) => (\n        <MarqueeContent reverse={index % 2 === 1} class=\"py-1\">\n          {row.map((item) => (\n            <MarqueeItem class=\"flex\">\n              <Card class=\"w-[22rem]\">\n                <CardContent class=\"flex flex-1 flex-col\">\n                  <figure class=\"flex flex-1 flex-col gap-3\">\n                    <Rating value={item.rating} aria-label={item.ratingLabel} />\n                    <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n                      <p>{item.quote}</p>\n                    </blockquote>\n                    <figcaption class=\"mt-auto flex items-center gap-3 pt-1\">\n                      <Avatar aria-hidden=\"true\">\n                        <AvatarImage src={item.image} />\n                        <AvatarFallback>{item.initials}</AvatarFallback>\n                      </Avatar>\n                      <div>\n                        <p class=\"text-foreground text-sm font-medium\">\n                          {item.name}\n                        </p>\n                        <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                      </div>\n                    </figcaption>\n                  </figure>\n                </CardContent>\n              </Card>\n            </MarqueeItem>\n          ))}\n        </MarqueeContent>\n      ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/reviews-5.json b/public/r/styles/base-sera/reviews-5.json
index 8b3458106..4f438bd1b 100644
--- a/public/r/styles/base-sera/reviews-5.json
+++ b/public/r/styles/base-sera/reviews-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    play: string\n    pause: string\n  }\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst rows = [\n  reviews.slice(0, third),\n  reviews.slice(third, third * 2),\n  reviews.slice(third * 2),\n]\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-5\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    {rows\n      .filter((row) => row.length > 0)\n      .map((row, index) => (\n        <MarqueeContent reverse={index % 2 === 1} class=\"py-1\">\n          {row.map((item) => (\n            <MarqueeItem class=\"flex\">\n              <figure class=\"bg-muted/50 flex w-[26rem] flex-col gap-4 rounded-2xl p-6\">\n                <figcaption class=\"flex items-center justify-between gap-3\">\n                  <div class=\"flex items-center gap-3\">\n                    <Avatar size=\"lg\" aria-hidden=\"true\">\n                      <AvatarImage src={item.image} />\n                      <AvatarFallback>{item.initials}</AvatarFallback>\n                    </Avatar>\n                    <div>\n                      <p class=\"text-foreground text-sm font-semibold\">\n                        {item.name}\n                      </p>\n                      <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                    </div>\n                  </div>\n                  <Rating value={item.rating} aria-label={item.ratingLabel} />\n                </figcaption>\n                <div class=\"flex gap-2.5\">\n                  <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n                  <blockquote class=\"text-foreground/80 text-sm leading-relaxed\">\n                    <p>{item.quote}</p>\n                  </blockquote>\n                </div>\n              </figure>\n            </MarqueeItem>\n          ))}\n        </MarqueeContent>\n      ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/section.json b/public/r/styles/base-sera/section.json
index b97a05bbf..696da2fb0 100644
--- a/public/r/styles/base-sera/section.json
+++ b/public/r/styles/base-sera/section.json
@@ -6,12 +6,12 @@
   "files": [
     {
       "path": "src/components/ui/section/section.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-20 py-[var(--section-padding,--spacing(24))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-24 rounded-none bg-background shadow-sm ring-1 ring-foreground/5 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-20 py-[var(--section-padding,--spacing(24))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-24 rounded-none bg-background shadow-sm ring-1 ring-foreground/5 mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  \"data-slot\": dataSlot = \"section\",\n  ...props\n} = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot={dataSlot}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/section/section-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"section-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] flex-col gap-8 px-[var(--gutter,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"section-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"relative mx-auto w-full max-w-[var(--container,var(--container-7xl))] px-[var(--gutter,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/services-1.json b/public/r/styles/base-sera/services-1.json
index 4d5ac713e..0ad551b55 100644
--- a/public/r/styles/base-sera/services-1.json
+++ b/public/r/styles/base-sera/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href != null && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs\",\n              service.href != null && \"transition-shadow hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? \"\"}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 80rem) 294px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/services-2.json b/public/r/styles/base-sera/services-2.json
index f2b3db6bc..8c24f803c 100644
--- a/public/r/styles/base-sera/services-2.json
+++ b/public/r/styles/base-sera/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"grid items-center gap-6 rounded-xl border p-4 shadow-xs md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/services-3.json b/public/r/styles/base-sera/services-3.json
index f259c104f..53b390522 100644
--- a/public/r/styles/base-sera/services-3.json
+++ b/public/r/styles/base-sera/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"absolute inset-0 -z-10 size-full object-cover\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 80rem) 612px, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/services-4.json b/public/r/styles/base-sera/services-4.json
index d357efabf..a848dbe59 100644
--- a/public/r/styles/base-sera/services-4.json
+++ b/public/r/styles/base-sera/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 294px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.link && (\n            <a\n              href={service.link.href}\n              class=\"text-primary inline-flex w-fit items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline\"\n            >\n              {service.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/services-5.json b/public/r/styles/base-sera/services-5.json
index def369794..2458133c0 100644
--- a/public/r/styles/base-sera/services-5.json
+++ b/public/r/styles/base-sera/services-5.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background relative flex flex-col gap-4 p-7\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 ring-inset\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.link && (\n            <a\n              href={service.link.href}\n              class=\"text-primary mt-auto inline-flex w-fit items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline\"\n            >\n              {service.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/services-6.json b/public/r/styles/base-sera/services-6.json
index 70206a046..82f8c027b 100644
--- a/public/r/styles/base-sera/services-6.json
+++ b/public/r/styles/base-sera/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 436px, (min-width: 64rem) 35vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/services-7.json b/public/r/styles/base-sera/services-7.json
index 623952170..bbc7e0404 100644
--- a/public/r/styles/base-sera/services-7.json
+++ b/public/r/styles/base-sera/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 1024px) 66vw, 100vw\"\n                  : \"(min-width: 1024px) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs\",\n              service.href != null && \"transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? \"\"}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 80rem) 824px, (min-width: 64rem) 66vw, 100vw\"\n                  : \"(min-width: 80rem) 400px, (min-width: 64rem) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/sidebar-1.json b/public/r/styles/base-sera/sidebar-1.json
index 3476f325b..4ec41b325 100644
--- a/public/r/styles/base-sera/sidebar-1.json
+++ b/public/r/styles/base-sera/sidebar-1.json
@@ -22,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebar: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar\n    class={cn(\"\", className)}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebar} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={labels.github}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  currentPath: string\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    sidebar: string\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebarToggle: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  currentPath: rawCurrentPath,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n  ...props\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(rawCurrentPath)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider {...props}>\n  <Sidebar\n    aria-label={labels.sidebar}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebarToggle} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            <Icon name=\"github\" />\n            <span class=\"sr-only\">{labels.github}</span>\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/sidebar.json b/public/r/styles/base-sera/sidebar.json
index afd7e66b7..a7d5db97a 100644
--- a/public/r/styles/base-sera/sidebar.json
+++ b/public/r/styles/base-sera/sidebar.json
@@ -24,7 +24,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <aside\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </aside>\n    </div>\n  </>\n)}\n",
       "type": "registry:ui"
     },
     {
@@ -34,7 +34,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar-rail.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst { class: className, type = \"button\", ...props } = Astro.props\n---\n\n<button\n  data-sidebar=\"rail\"\n  data-slot=\"sidebar-rail\"\n  aria-label=\"Toggle Sidebar\"\n  tabindex={-1}\n  title=\"Toggle Sidebar\"\n  type={type}\n  class={cn(\n    \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n    \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n    \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n    \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n    \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n    \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n    className\n  )}\n  {...props}\n></button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  type = \"button\",\n  \"aria-label\": ariaLabel = \"Toggle Sidebar\",\n  title = ariaLabel,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-sidebar=\"rail\"\n  data-slot=\"sidebar-rail\"\n  aria-label={ariaLabel}\n  tabindex={-1}\n  title={title}\n  type={type}\n  class={cn(\n    \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n    \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n    \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n    \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n    \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n    \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n    className\n  )}\n  {...props}\n></button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/article-1.json b/public/r/styles/base-vega/article-1.json
index c45df6988..a864d2860 100644
--- a/public/r/styles/base-vega/article-1.json
+++ b/public/r/styles/base-vega/article-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/article-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"max-w-2xl\">\n    <article class=\"flex flex-col gap-8\">\n      <header class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n            {title}\n          </h1>\n          <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n            {description}\n          </p>\n        </div>\n        <div class=\"flex items-center gap-3\">\n          <Avatar size=\"lg\" aria-hidden=\"true\">\n            <AvatarImage src={author.image} />\n            <AvatarFallback>{author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n          </div>\n        </div>\n      </header>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 42rem) 42rem, 100vw\"\n        loading=\"eager\"\n        fetchpriority=\"high\"\n      />\n      <div class=\"flex flex-col gap-6 text-base leading-8\">\n        <slot />\n      </div>\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/article-2.json b/public/r/styles/base-vega/article-2.json
index 6511245f3..c0a3f5f9a 100644
--- a/public/r/styles/base-vega/article-2.json
+++ b/public/r/styles/base-vega/article-2.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/article-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}{\" \"}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\">\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"max-w-2xl\">\n    <article class=\"flex flex-col gap-8\">\n      <header class=\"flex flex-col items-center gap-6 text-center\">\n        <div class=\"flex flex-col gap-4\">\n          <h1 class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\">\n            {title}\n          </h1>\n          <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n            {description}\n          </p>\n        </div>\n        <div class=\"flex items-center gap-3\">\n          <Avatar size=\"lg\" aria-hidden=\"true\">\n            <AvatarImage src={author.image} />\n            <AvatarFallback>{author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col text-left\">\n            <p class=\"text-sm font-medium\">\n              {author.name}{\" \"}\n              <span class=\"text-muted-foreground font-normal\">\n                &middot; {author.date}\n              </span>\n            </p>\n            <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n          </div>\n        </div>\n      </header>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 42rem) 42rem, 100vw\"\n        loading=\"eager\"\n        fetchpriority=\"high\"\n      />\n      <div class=\"flex flex-col gap-6 text-base leading-8\">\n        <slot />\n      </div>\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/articles-1.json b/public/r/styles/base-vega/articles-1.json
index 30aa52bd2..2c9f3ed3b 100644
--- a/public/r/styles/base-vega/articles-1.json
+++ b/public/r/styles/base-vega/articles-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">{description}</p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/articles-2.json b/public/r/styles/base-vega/articles-2.json
index a9d78a9f5..6e60d3f18 100644
--- a/public/r/styles/base-vega/articles-2.json
+++ b/public/r/styles/base-vega/articles-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n\nconst FeaturedWrapper = featured.href != null ? \"a\" : \"div\"\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <FeaturedWrapper\n      href={featured.href}\n      class={cn(\n        \"grid gap-6 rounded-xl lg:grid-cols-2 lg:items-center lg:pr-4\",\n        featured.href != null &&\n          \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n      )}\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 80rem) 616px, (min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">\n          {featured.category}\n        </Badge>\n        <h3 class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\">\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar aria-hidden=\"true\">\n            <AvatarImage src={featured.author.image} />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </FeaturedWrapper>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/articles-3.json b/public/r/styles/base-vega/articles-3.json
index e4182724a..bd0837d65 100644
--- a/public/r/styles/base-vega/articles-3.json
+++ b/public/r/styles/base-vega/articles-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"bg-muted/50 flex h-full flex-col gap-4 rounded-xl p-4\",\n              article.href != null &&\n                \"group hover:bg-muted focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/articles-4.json b/public/r/styles/base-vega/articles-4.json
index b0c908073..ddff63354 100644
--- a/public/r/styles/base-vega/articles-4.json
+++ b/public/r/styles/base-vega/articles-4.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/articles-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <h2 class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {articles.map((article) => {\n        const Wrapper = article.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={article.href}\n            class={cn(\n              \"flex h-full flex-col gap-4 rounded-xl border p-6\",\n              article.href != null &&\n                \"group hover:bg-muted/50 focus-visible:ring-ring/50 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            )}\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={article.author.image} />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/blocks-1.json b/public/r/styles/base-vega/blocks-1.json
index a0da615ca..8719d1a46 100644
--- a/public/r/styles/base-vega/blocks-1.json
+++ b/public/r/styles/base-vega/blocks-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    pagination: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"flex flex-col gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1 class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\">\n          {title}\n        </TypographyH1>\n        <TypographyLead class=\"max-w-2xl text-base leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-blocks-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy class=\"blocks-copy-icon size-3.5\" />\n            <Check class=\"blocks-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/carousel.json b/public/r/styles/base-vega/carousel.json
index 9c27dc50e..5584f6f46 100644
--- a/public/r/styles/base-vega/carousel.json
+++ b/public/r/styles/base-vega/carousel.json
@@ -13,27 +13,27 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  ...props\n} = Astro.props\n\n// A named section is a region landmark. Without a name it would have no role,\n// so it becomes a group, the other container role the APG carousel allows.\nconst named = Boolean(props[\"aria-label\"] || props[\"aria-labelledby\"])\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={named ? undefined : \"group\"}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts.\n  const getParts = <T extends Element>(root: CarouselRoot, slot: string) =>\n    [...root.querySelectorAll<T>(`[data-slot=\"${slot}\"]`)].filter(\n      (part) => part.closest('[data-slot=\"carousel\"]') === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(\n      '[data-slot=\"carousel\"]'\n    )) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"carousel-content\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"carousel-previous\")\n      const next = getParts<HTMLButtonElement>(root, \"carousel-next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest('[data-slot=\"carousel\"]') !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = opts?.axis === \"y\" ? \"vertical\" : \"horizontal\",\n  \"aria-roledescription\": roleDescription = \"carousel\",\n  \"data-slot\": dataSlot = \"carousel\",\n  // A named section is a region landmark. Without a name it would have no\n  // role, so it becomes a group, the other container role the APG carousel\n  // allows.\n  role = Astro.props[\"aria-label\"] || Astro.props[\"aria-labelledby\"]\n    ? undefined\n    : \"group\",\n  ...props\n} = Astro.props\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<section\n  data-slot={dataSlot}\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role={role}\n  aria-roledescription={roleDescription}\n  {...props}\n>\n  <slot />\n</section>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  const instances = new Map<CarouselRoot, () => void>()\n  // A nested carousel owns its own parts. The data-carousel-* markers stay\n  // in place when a caller overrides data-slot.\n  const rootSelector = \"[data-carousel-options]\"\n  const getParts = <T extends Element>(root: CarouselRoot, part: string) =>\n    [...root.querySelectorAll<T>(`[data-carousel-${part}]`)].filter(\n      (element) => element.closest(rootSelector) === root\n    )\n  const initialize = () => {\n    for (const root of document.querySelectorAll<CarouselRoot>(rootSelector)) {\n      if (instances.has(root)) continue\n      const viewport = getParts<HTMLElement>(root, \"viewport\")[0]\n      if (!viewport) continue\n      const opts: EmblaOptionsType = JSON.parse(\n        root.dataset.carouselOptions || \"{}\"\n      )\n      const api = EmblaCarousel(viewport, opts)\n      root.__fulldevCarouselApi = api\n      const previous = getParts<HTMLButtonElement>(root, \"previous\")\n      const next = getParts<HTMLButtonElement>(root, \"next\")\n      const emit = (type: \"carousel:init\" | \"carousel:select\") => {\n        root.dispatchEvent(\n          new CustomEvent(type, {\n            detail: {\n              api,\n              canScrollPrev: api.canScrollPrev(),\n              canScrollNext: api.canScrollNext(),\n              selectedScrollSnap: api.selectedScrollSnap(),\n              scrollSnapList: api.scrollSnapList(),\n            },\n          })\n        )\n      }\n      const sync = () => {\n        root.dataset.canScrollPrev = String(api.canScrollPrev())\n        root.dataset.canScrollNext = String(api.canScrollNext())\n        root.dataset.selectedScrollSnap = String(api.selectedScrollSnap())\n        for (const button of previous)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollPrev()\n        for (const button of next)\n          if (button.dataset.manualDisabled !== \"true\")\n            button.disabled = !api.canScrollNext()\n        emit(\"carousel:select\")\n      }\n      const jump = () =>\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      const onPrevious = () => api.scrollPrev(jump())\n      const onNext = () => api.scrollNext(jump())\n      const onKeyDown = (event: KeyboardEvent) => {\n        const target = event.target\n        if (\n          event.defaultPrevented ||\n          !(target instanceof Element) ||\n          target.closest(rootSelector) !== root ||\n          target.closest(\n            'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])'\n          )\n        )\n          return\n        const vertical = root.dataset.orientation === \"vertical\"\n        switch (event.key) {\n          case vertical ? \"ArrowUp\" : \"ArrowLeft\":\n            onPrevious()\n            break\n          case vertical ? \"ArrowDown\" : \"ArrowRight\":\n            onNext()\n            break\n          case \"Home\":\n            api.scrollTo(0, jump())\n            break\n          case \"End\":\n            api.scrollTo(api.scrollSnapList().length - 1, jump())\n            break\n          default:\n            return\n        }\n        event.preventDefault()\n      }\n      for (const button of previous)\n        button.addEventListener(\"click\", onPrevious)\n      for (const button of next) button.addEventListener(\"click\", onNext)\n      root.addEventListener(\"keydown\", onKeyDown)\n      api.on(\"select\", sync)\n      api.on(\"reInit\", sync)\n      sync()\n      const frame = requestAnimationFrame(() => emit(\"carousel:init\"))\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        for (const button of previous)\n          button.removeEventListener(\"click\", onPrevious)\n        for (const button of next) button.removeEventListener(\"click\", onNext)\n        root.removeEventListener(\"keydown\", onKeyDown)\n        api.off(\"select\", sync)\n        api.off(\"reInit\", sync)\n        api.destroy()\n        delete root.__fulldevCarouselApi\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-content.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div class=\"overflow-hidden\" data-slot=\"carousel-content\">\n  <div\n    data-slot=\"carousel-container\"\n    class={cn(\n      \"flex [touch-action:pan-y_pinch-zoom]\",\n      \"group-data-[orientation=vertical]/carousel:-mt-4 group-data-[orientation=vertical]/carousel:[touch-action:pan-x_pinch-zoom] group-data-[orientation=vertical]/carousel:flex-col\",\n      \"group-data-[orientation=horizontal]/carousel:-ml-4\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"carousel-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  class=\"overflow-hidden\"\n  data-slot=\"carousel-content\"\n  data-carousel-viewport\n>\n  <div\n    data-slot={dataSlot}\n    class={cn(\n      \"flex [touch-action:pan-y_pinch-zoom]\",\n      \"group-data-[orientation=vertical]/carousel:-mt-4 group-data-[orientation=vertical]/carousel:[touch-action:pan-x_pinch-zoom] group-data-[orientation=vertical]/carousel:flex-col\",\n      \"group-data-[orientation=horizontal]/carousel:-ml-4\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"aria-roledescription\": roleDescription = \"slide\",\n  \"data-slot\": dataSlot = \"carousel-item\",\n  role = \"group\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  role={role}\n  aria-roledescription={roleDescription}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-next.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  \"data-slot\": dataSlot = \"carousel-next\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot={dataSlot}\n  data-carousel-next\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-previous.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  \"data-slot\": dataSlot = \"carousel-previous\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot={dataSlot}\n  data-carousel-previous\n  data-variant={variant}\n  data-size={size}\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"rounded-full absolute touch-manipulation group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/contact-1.json b/public/r/styles/base-vega/contact-1.json
index 9af391672..cb4345f47 100644
--- a/public/r/styles/base-vega/contact-1.json
+++ b/public/r/styles/base-vega/contact-1.json
@@ -3,22 +3,15 @@
   "name": "contact-1",
   "title": "Contact 1",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    messageDescription: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <div class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {item.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n      <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n        <FieldSet>\n          <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n          <FieldGroup>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n              <Field>\n                <FieldLabel for={`${formId}-name`}>{form.nameLabel}</FieldLabel>\n                <Input\n                  id={`${formId}-name`}\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  required\n                  placeholder={form.namePlaceholder}\n                />\n              </Field>\n              <Field>\n                <FieldLabel for={`${formId}-email`}>\n                  {form.emailLabel}\n                </FieldLabel>\n                <Input\n                  id={`${formId}-email`}\n                  name=\"email\"\n                  autocomplete=\"email\"\n                  required\n                  type=\"email\"\n                  placeholder={form.emailPlaceholder}\n                />\n              </Field>\n            </div>\n            <Field>\n              <FieldLabel for={`${formId}-message`}>\n                {form.messageLabel}\n              </FieldLabel>\n              <Textarea\n                id={`${formId}-message`}\n                name=\"message\"\n                required\n                rows={5}\n                placeholder={form.messagePlaceholder}\n                aria-describedby={`${formId}-message-description`}\n              />\n              <FieldDescription id={`${formId}-message-description`}>\n                {form.messageDescription}\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n              {form.actionLabel}\n            </Button>\n          </FieldGroup>\n        </FieldSet>\n      </Form>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {contactItems.map((item) => (\n        <li class=\"flex flex-col gap-3 rounded-xl border p-5\">\n          <Button\n            as=\"span\"\n            variant=\"secondary\"\n            size=\"icon\"\n            class=\"text-primary\"\n            aria-hidden=\"true\"\n          >\n            <Icon name={item.icon} />\n          </Button>\n          <h3 class=\"text-foreground text-sm font-medium\">{item.title}</h3>\n          {item.href != null ? (\n            <a\n              href={item.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n            >\n              {item.description}\n            </a>\n          ) : (\n            <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n              {item.description}\n            </p>\n          )}\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n  {Astro.slots.has(\"default\") && (\n    <SectionContainer>\n      <div class=\"mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8\">\n        <slot />\n      </div>\n    </SectionContainer>\n  )}\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/contact-2.json b/public/r/styles/base-vega/contact-2.json
index 97172ad7d..ec5bb574f 100644
--- a/public/r/styles/base-vega/contact-2.json
+++ b/public/r/styles/base-vega/contact-2.json
@@ -3,22 +3,15 @@
   "name": "contact-2",
   "title": "Contact 2",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    title: string\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1fr)_22rem] lg:items-start\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <div class=\"mb-6\">\n          <h3 class=\"text-lg font-medium\">{form.title}</h3>\n        </div>\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n\n    <div class=\"flex flex-col gap-3\">\n      {contactItems.map((item) => (\n        <div class=\"flex gap-4 rounded-xl border p-4\">\n          {item.href ? (\n            <Button\n              as=\"a\"\n              href={item.href}\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-label={item.title}\n            >\n              <Icon name={item.icon} />\n            </Button>\n          ) : (\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n          )}\n          <div class=\"flex flex-col gap-1\">\n            <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1fr)_22rem] lg:items-start\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {Astro.slots.has(\"default\") && (\n        <div class=\"rounded-xl border p-6\">\n          <slot />\n        </div>\n      )}\n    </div>\n\n    <ul class=\"flex flex-col gap-3\">\n      {contactItems.map((item) => (\n        <li class=\"flex gap-4 rounded-xl border p-4\">\n          <Button\n            as=\"span\"\n            variant=\"secondary\"\n            size=\"icon\"\n            class=\"text-primary shrink-0\"\n            aria-hidden=\"true\"\n          >\n            <Icon name={item.icon} />\n          </Button>\n          <div class=\"flex flex-col gap-1\">\n            <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n            {item.href != null ? (\n              <a\n                href={item.href}\n                class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n              >\n                {item.description}\n              </a>\n            ) : (\n              <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n                {item.description}\n              </p>\n            )}\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/contact-3.json b/public/r/styles/base-vega/contact-3.json
index 15a42d48f..b50f57b6e 100644
--- a/public/r/styles/base-vega/contact-3.json
+++ b/public/r/styles/base-vega/contact-3.json
@@ -3,22 +3,15 @@
   "name": "contact-3",
   "title": "Contact 3",
   "description": "Contact sections for project inquiries, support, and sales conversations.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/field",
-    "@fulldev/input",
     "@fulldev/section",
-    "@fulldev/textarea",
-    "@fulldev/form",
     "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/contact-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  form: {\n    id?: string\n    action?: string\n    method?: \"get\" | \"post\"\n    legend: string\n    nameLabel: string\n    namePlaceholder: string\n    emailLabel: string\n    emailPlaceholder: string\n    messageLabel: string\n    messagePlaceholder: string\n    actionLabel: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  form,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\nconst formId = form.id ?? `contact-${crypto.randomUUID()}`\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <div class=\"flex gap-4\">\n            {item.href ? (\n              <Button\n                as=\"a\"\n                href={item.href}\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-label={item.title}\n              >\n                <Icon name={item.icon} />\n              </Button>\n            ) : (\n              <Button\n                as=\"span\"\n                variant=\"secondary\"\n                size=\"icon\"\n                class=\"text-primary shrink-0\"\n                aria-hidden=\"true\"\n              >\n                <Icon name={item.icon} />\n              </Button>\n            )}\n            <div class=\"flex flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div class=\"rounded-xl border p-6\">\n        <Form id={formId} action={form.action} method={form.method ?? \"post\"}>\n          <FieldSet>\n            <FieldLegend class=\"sr-only\">{form.legend}</FieldLegend>\n            <FieldGroup>\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel for={`${formId}-name`}>\n                    {form.nameLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-name`}\n                    name=\"name\"\n                    autocomplete=\"name\"\n                    required\n                    placeholder={form.namePlaceholder}\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel for={`${formId}-email`}>\n                    {form.emailLabel}\n                  </FieldLabel>\n                  <Input\n                    id={`${formId}-email`}\n                    name=\"email\"\n                    autocomplete=\"email\"\n                    required\n                    type=\"email\"\n                    placeholder={form.emailPlaceholder}\n                  />\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel for={`${formId}-message`}>\n                  {form.messageLabel}\n                </FieldLabel>\n                <Textarea\n                  id={`${formId}-message`}\n                  name=\"message\"\n                  required\n                  rows={5}\n                  placeholder={form.messagePlaceholder}\n                />\n              </Field>\n              <Button type=\"submit\" size=\"lg\" class=\"w-full\">\n                {form.actionLabel}\n              </Button>\n            </FieldGroup>\n          </FieldSet>\n        </Form>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  contactItems: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  contactItems,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-start\">\n    <div class=\"flex flex-col gap-8\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"grid gap-4 sm:grid-cols-2\">\n        {contactItems.map((item) => (\n          <li class=\"flex gap-4\">\n            <Button\n              as=\"span\"\n              variant=\"secondary\"\n              size=\"icon\"\n              class=\"text-primary shrink-0\"\n              aria-hidden=\"true\"\n            >\n              <Icon name={item.icon} />\n            </Button>\n            <div class=\"flex min-w-0 flex-col gap-1\">\n              <p class=\"text-foreground text-sm font-medium\">{item.title}</p>\n              {item.href != null ? (\n                <a\n                  href={item.href}\n                  class=\"text-muted-foreground hover:text-foreground text-sm leading-relaxed wrap-anywhere underline-offset-4 hover:underline\"\n                >\n                  {item.description}\n                </a>\n              ) : (\n                <p class=\"text-muted-foreground text-sm leading-relaxed wrap-anywhere\">\n                  {item.description}\n                </p>\n              )}\n            </div>\n          </li>\n        ))}\n      </ul>\n      {Astro.slots.has(\"default\") && (\n        <div class=\"rounded-xl border p-6\">\n          <slot />\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[3/4] w-full rounded-xl border object-cover lg:sticky lg:top-24\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/content-1.json b/public/r/styles/base-vega/content-1.json
index 37cc98379..45ceca637 100644
--- a/public/r/styles/base-vega/content-1.json
+++ b/public/r/styles/base-vega/content-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-3 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-6\">\n    <div class=\"flex flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"flex flex-col gap-3\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-3 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/content-2.json b/public/r/styles/base-vega/content-2.json
index 693b5d9bb..7675cc352 100644
--- a/public/r/styles/base-vega/content-2.json
+++ b/public/r/styles/base-vega/content-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription>{description}</SectionDescription>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/content-3.json b/public/r/styles/base-vega/content-3.json
index fdc0b7afd..cf3b62853 100644
--- a/public/r/styles/base-vega/content-3.json
+++ b/public/r/styles/base-vega/content-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/content-4.json b/public/r/styles/base-vega/content-4.json
index 4dd1cd6f3..fcce4f136 100644
--- a/public/r/styles/base-vega/content-4.json
+++ b/public/r/styles/base-vega/content-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/content-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 1024px) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-center\">\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-col gap-4\">\n          <SectionTitle>{title}</SectionTitle>\n          <SectionDescription>{description}</SectionDescription>\n        </div>\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"secondary\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <Image\n        src={image.src}\n        alt={image.alt}\n        class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 80rem) 800px, (min-width: 64rem) 66vw, 100vw\"\n      />\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/cta-1.json b/public/r/styles/base-vega/cta-1.json
index 880fa60eb..10cbc452e 100644
--- a/public/r/styles/base-vega/cta-1.json
+++ b/public/r/styles/base-vega/cta-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof?: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    {socialProof && (\n      <div class=\"flex flex-col items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex items-center gap-2\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n        </div>\n      </div>\n    )}\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/cta-2.json b/public/r/styles/base-vega/cta-2.json
index 05cfb2687..347395042 100644
--- a/public/r/styles/base-vega/cta-2.json
+++ b/public/r/styles/base-vega/cta-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/cta-3.json b/public/r/styles/base-vega/cta-3.json
index caf08c91a..d8a956197 100644
--- a/public/r/styles/base-vega/cta-3.json
+++ b/public/r/styles/base-vega/cta-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"bg-accent/50 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex flex-col gap-6 lg:items-end\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/cta-4.json b/public/r/styles/base-vega/cta-4.json
index 2ed196c48..43d7c1bd8 100644
--- a/public/r/styles/base-vega/cta-4.json
+++ b/public/r/styles/base-vega/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt={image.alt}\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/cta-5.json b/public/r/styles/base-vega/cta-5.json
index 39ff0c7bb..7a122cb13 100644
--- a/public/r/styles/base-vega/cta-5.json
+++ b/public/r/styles/base-vega/cta-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      {features.length > 0 && (\n        <ul class=\"flex flex-col gap-3\">\n          {features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      )}\n      {buttons.length > 0 && (\n        <div class=\"flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/cta-6.json b/public/r/styles/base-vega/cta-6.json
index cbd7368fe..9aa3276fe 100644
--- a/public/r/styles/base-vega/cta-6.json
+++ b/public/r/styles/base-vega/cta-6.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage, alt: \"\" },\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-10 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/cta-7.json b/public/r/styles/base-vega/cta-7.json
index 86813e6c0..b6755b388 100644
--- a/public/r/styles/base-vega/cta-7.json
+++ b/public/r/styles/base-vega/cta-7.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-muted-foreground text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    count?: string | number\n    text: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"bg-primary/10 border-primary/15 border-y\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription class=\"text-foreground/80\">\n        {description}\n      </SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex flex-col items-center gap-4\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-primary/10 bg-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n        {socialProof.count != null && (\n          <AvatarGroupCount class=\"bg-background text-foreground ring-primary/10 size-11 ring\">\n            {socialProof.count}\n          </AvatarGroupCount>\n        )}\n      </AvatarGroup>\n      <span class=\"text-foreground/80 text-sm leading-snug\">\n        {socialProof.text}\n      </span>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/cta-8.json b/public/r/styles/base-vega/cta-8.json
index eaac34d78..7acaffa25 100644
--- a/public/r/styles/base-vega/cta-8.json
+++ b/public/r/styles/base-vega/cta-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-8.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"border-primary/20 shadow-none\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col gap-8 before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5 text-center\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/doc-1.json b/public/r/styles/base-vega/doc-1.json
index 9c98b34f9..49048e0e5 100644
--- a/public/r/styles/base-vega/doc-1.json
+++ b/public/r/styles/base-vega/doc-1.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/doc-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons/icons/claude.svg\"\nimport Cursor from \"simple-icons/icons/cursor.svg\"\nimport Markdown from \"simple-icons/icons/markdown.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Toc,\n  TocMenu,\n  TocMenuItem,\n  TocMenuLink,\n  TocTitle,\n} from \"@/components/ui/toc\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  title: string\n  description: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  tocItems: {\n    depth: number\n    href: string\n    label: string\n  }[]\n  callout?: {\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    assistantPrompt: string\n    copyCode: string\n    pagination: string\n    toc: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  tocItems,\n  callout,\n  previousPage,\n  nextPage,\n  labels,\n  ...props\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(labels.assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  class={cn(\n    \"flex flex-col gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10\">\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          size=\"sm\"\n          class=\"text-foreground text-left tracking-tight\"\n        >\n          {title}\n        </TypographyH1>\n        <TypographyLead size=\"sm\" class=\"max-w-2xl leading-7\">\n          {description}\n        </TypographyLead>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {showCopyButton && (\n          <Button\n            id={copyButton?.id}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"xs\"\n            data-source={copyButton?.source}\n            data-doc-copy\n            aria-label={labels.copyMarkdown}\n          >\n            <Copy data-copy-icon class=\"docs-copy-icon size-3.5\" />\n            <Check data-check-icon class=\"docs-check-icon hidden size-3.5\" />\n            <span>{labels.copyMarkdown}</span>\n          </Button>\n        )}\n        {showOpenButton && (\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n            >\n              <span>{labels.openIn}</span>\n              <ChevronDown class=\"size-3.5 opacity-70\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n              <DropdownMenuGroup>\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && (\n                      <Markdown\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && (\n                      <Claude\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    {link.icon === \"cursor\" && (\n                      <Cursor\n                        class=\"size-4\"\n                        fill=\"currentColor\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n\n    <Typography\n      as=\"article\"\n      size=\"sm\"\n      data-doc-content\n      data-copy-label={labels.copyCode}\n    >\n      <slot />\n    </Typography>\n\n    {showPagination && (\n      <nav\n        class=\"flex items-center justify-between gap-3\"\n        aria-label={labels.pagination}\n      >\n        {previousPage ? (\n          <Button\n            as=\"a\"\n            href={previousPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n          >\n            <ArrowLeft class=\"size-4\" />\n            <span class=\"truncate text-sm font-medium\">\n              {previousPage.title}\n            </span>\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n\n        {nextPage ? (\n          <Button\n            as=\"a\"\n            href={nextPage.href}\n            variant=\"outline\"\n            class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n          >\n            <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        ) : (\n          <div aria-hidden=\"true\" />\n        )}\n      </nav>\n    )}\n  </div>\n\n  {(tocItems.length > 0 || callout) && (\n    <div class=\"hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start\">\n      <div class=\"flex flex-col gap-6\">\n        {tocItems.length > 0 && (\n          <Toc aria-label={labels.toc}>\n            <TocTitle>{labels.toc}</TocTitle>\n            <TocMenu>\n              {tocItems.map((item) => (\n                <TocMenuItem>\n                  <TocMenuLink href={item.href} depth={item.depth}>\n                    {item.label}\n                  </TocMenuLink>\n                </TocMenuItem>\n              ))}\n            </TocMenu>\n          </Toc>\n        )}\n\n        {callout && (\n          <Card size=\"sm\">\n            <CardHeader>\n              <CardDescription>{callout.description}</CardDescription>\n            </CardHeader>\n            <CardFooter>\n              <Button\n                as=\"a\"\n                href={callout.button.href}\n                variant=\"outline\"\n                size=\"sm\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {callout.button.label}\n              </Button>\n            </CardFooter>\n          </Card>\n        )}\n      </div>\n    </div>\n  )}\n</SectionContainer>\n\n<style is:global>\n  .docs-code-block {\n    position: relative;\n    overflow: hidden;\n    margin-block-start: var(--typeset-flow);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-xl);\n    background: color-mix(in oklab, var(--color-muted) 60%, transparent);\n  }\n\n  .docs-code-block > pre,\n  .docs-code-block > pre.astro-code {\n    margin: 0;\n    overflow-x: auto;\n    border: 0;\n    border-radius: 0;\n    background: transparent !important;\n    padding: 1rem 3.5rem 1rem 1rem;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  .docs-code-block > pre.astro-code code {\n    color: var(--shiki-light, var(--color-foreground)) !important;\n    font: inherit;\n  }\n\n  .dark .docs-code-block > pre.astro-code code {\n    color: var(--shiki-dark, var(--color-foreground)) !important;\n  }\n\n  .dark .docs-code-block > pre.astro-code span[style*=\"--shiki-dark\"] {\n    color: var(--shiki-dark) !important;\n    font-style: var(--shiki-dark-font-style, inherit) !important;\n    font-weight: var(--shiki-dark-font-weight, inherit) !important;\n    text-decoration: var(--shiki-dark-text-decoration, inherit) !important;\n  }\n\n  .docs-code-copy {\n    position: absolute;\n    z-index: 10;\n    top: 0.75rem;\n    right: 0.75rem;\n    display: inline-flex;\n    width: 2rem;\n    height: 2rem;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    background: var(--color-background);\n    color: var(--color-muted-foreground);\n    box-shadow: var(--shadow-sm);\n    transition:\n      color 150ms,\n      background-color 150ms;\n  }\n\n  .docs-code-copy:hover {\n    background: var(--color-accent);\n    color: var(--color-accent-foreground);\n  }\n\n  .docs-code-copy:focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  .docs-code-copy svg {\n    width: 1rem;\n    height: 1rem;\n  }\n</style>\n\n<script>\n  const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>`\n  const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>`\n  const initializeCodeBlocks = () => {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-doc-content]\")\n      .forEach((content) => {\n        content.querySelectorAll(\":scope > pre\").forEach((pre) => {\n          if (pre.closest(\".docs-code-block\")) return\n          const wrapper = document.createElement(\"div\")\n          const button = document.createElement(\"button\")\n          wrapper.className = \"docs-code-block\"\n          wrapper.dataset.notTypeset = \"\"\n          button.type = \"button\"\n          button.className = \"docs-code-copy\"\n          button.ariaLabel = content.dataset.copyLabel ?? null\n          button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class=\"hidden\">${checkIcon}</span>`\n          pre.before(wrapper)\n          wrapper.append(pre, button)\n        })\n      })\n  }\n\n  initializeCodeBlocks()\n  document.addEventListener(\"astro:page-load\", initializeCodeBlocks)\n\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\n      \"[data-doc-copy], [data-doc-content] .docs-code-copy\"\n    )\n    if (!(button instanceof HTMLButtonElement)) return\n    const source =\n      button.dataset.source ??\n      button\n        .closest(\".docs-code-block\")\n        ?.querySelector(\"pre\")\n        ?.textContent?.replace(/\\n$/, \"\")\n\n    try {\n      await navigator.clipboard.writeText(source ?? \"\")\n      button.querySelector(\"[data-copy-icon]\")?.classList.add(\"hidden\")\n      button.querySelector(\"[data-check-icon]\")?.classList.remove(\"hidden\")\n      setTimeout(() => {\n        button.querySelector(\"[data-copy-icon]\")?.classList.remove(\"hidden\")\n        button.querySelector(\"[data-check-icon]\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/faqs-1.json b/public/r/styles/base-vega/faqs-1.json
index 92d59430a..fe0decf6f 100644
--- a/public/r/styles/base-vega/faqs-1.json
+++ b/public/r/styles/base-vega/faqs-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n  defaultItem?: string\n  buttons?: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  faqs,\n  defaultItem,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    {buttons && buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <Accordion collapsible defaultValue={defaultItem}>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/faqs-3.json b/public/r/styles/base-vega/faqs-3.json
index a0d634566..cd5d5197c 100644
--- a/public/r/styles/base-vega/faqs-3.json
+++ b/public/r/styles/base-vega/faqs-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  faqs,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto w-full max-w-3xl rounded-xl border px-6 py-2\">\n      <Accordion collapsible>\n        {faqs.map((item) => (\n          <AccordionItem value={item.id}>\n            <AccordionTrigger>{item.question}</AccordionTrigger>\n            <AccordionContent>{item.answer}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/faqs-4.json b/public/r/styles/base-vega/faqs-4.json
index 4fe0db0bb..19de0d927 100644
--- a/public/r/styles/base-vega/faqs-4.json
+++ b/public/r/styles/base-vega/faqs-4.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/faqs-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst { class: className, title, faqs, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center\">\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <SectionTitle>{title}</SectionTitle>\n      <div class=\"mt-10\">\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  faqs: {\n    id: string\n    question: string\n    answer: string\n  }[]\n}\n\nconst { class: className, title, faqs, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 items-center\">\n    <div class=\"mx-auto w-full max-w-3xl\">\n      <SectionTitle>{title}</SectionTitle>\n      <div class=\"mt-10\">\n        <Accordion collapsible>\n          {faqs.map((item) => (\n            <AccordionItem value={item.id}>\n              <AccordionTrigger>{item.question}</AccordionTrigger>\n              <AccordionContent>{item.answer}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/features-1.json b/public/r/styles/base-vega/features-1.json
index 585c6b7f2..61240563f 100644
--- a/public/r/styles/base-vega/features-1.json
+++ b/public/r/styles/base-vega/features-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.href && feature.linkText && (\n            <a\n              href={feature.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.linkText}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n    {buttons.length > 0 && (\n      <div class=\"flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    )}\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <li class=\"flex flex-col gap-4 rounded-xl border p-6\">\n          <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n          {feature.link && (\n            <a\n              href={feature.link.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n            >\n              {feature.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/features-2.json b/public/r/styles/base-vega/features-2.json
index 467338413..a15ebe78c 100644
--- a/public/r/styles/base-vega/features-2.json
+++ b/public/r/styles/base-vega/features-2.json
@@ -3,9 +3,6 @@
   "name": "features-2",
   "title": "Features 2",
   "description": "Feature section layouts for product narratives, launch pages, and capability overviews.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/icon",
     "@fulldev/section"
@@ -13,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li class=\"bg-background relative flex flex-col items-center gap-4 p-7 text-center\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 ring-inset\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium tracking-tight text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/features-3.json b/public/r/styles/base-vega/features-3.json
index 83402f1a0..0f7902b8c 100644
--- a/public/r/styles/base-vega/features-3.json
+++ b/public/r/styles/base-vega/features-3.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <div class=\"group/feature hover:bg-muted/40 flex items-center gap-5 rounded-xl border p-4 transition-colors\">\n          <Image\n            src={feature.image.src}\n            alt={feature.image.alt}\n            class=\"size-20 shrink-0 rounded-lg object-cover\"\n            widths={[160, 320]}\n            sizes=\"80px\"\n          />\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-5 rounded-xl border p-4\">\n          <Image\n            src={feature.image.src}\n            alt={feature.image.alt}\n            class=\"size-20 shrink-0 rounded-lg object-cover\"\n            widths={[160, 320]}\n            sizes=\"80px\"\n          />\n          <div class=\"flex flex-col gap-1.5\">\n            <h3 class=\"text-foreground text-base font-medium\">\n              {feature.title}\n            </h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/features-4.json b/public/r/styles/base-vega/features-4.json
index 6cadcba43..437798358 100644
--- a/public/r/styles/base-vega/features-4.json
+++ b/public/r/styles/base-vega/features-4.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-4.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    href?: string\n    linkText?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <div class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <div class=\"group/feature hover:bg-muted/40 flex flex-col gap-4 rounded-xl border p-6 transition-colors\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.href && feature.linkText && (\n              <a\n                href={feature.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.linkText}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n    icon: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start\">\n      <div class=\"lg:sticky lg:top-28\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n        <div class=\"mt-6 flex flex-wrap gap-3\">\n          {buttons.map(({ href, label }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={index === 0 ? \"default\" : \"outline\"}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      </div>\n      <ul class=\"grid gap-6 sm:grid-cols-2\">\n        {features.map((feature) => (\n          <li class=\"flex flex-col gap-4 rounded-xl border p-6\">\n            <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n              <Icon name={feature.icon} class=\"size-5\" />\n            </div>\n            <div class=\"flex flex-col gap-1.5\">\n              <h3 class=\"text-foreground text-base font-medium\">\n                {feature.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {feature.description}\n              </p>\n            </div>\n            {feature.link && (\n              <a\n                href={feature.link.href}\n                class=\"text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline\"\n              >\n                {feature.link.label}\n                <ArrowRightIcon class=\"size-3.5\" />\n              </a>\n            )}\n          </li>\n        ))}\n      </ul>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/features-5.json b/public/r/styles/base-vega/features-5.json
index 61eba406f..420643adf 100644
--- a/public/r/styles/base-vega/features-5.json
+++ b/public/r/styles/base-vega/features-5.json
@@ -3,9 +3,6 @@
   "name": "features-5",
   "title": "Features 5",
   "description": "Feature section layouts for product narratives, launch pages, and capability overviews.",
-  "dependencies": [
-    "@lucide/astro"
-  ],
   "registryDependencies": [
     "@fulldev/icon",
     "@fulldev/section"
@@ -13,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div class=\"group/feature flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: {\n    title: string\n    description: string\n    icon: string\n  }[]\n}\n\nconst { class: className, title, description, features, ...props } = Astro.props\n---\n\n<Section variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-6 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li class=\"flex flex-col items-center gap-4 text-center\">\n          <div class=\"bg-primary/5 text-primary border-primary/20 flex size-12 items-center justify-center rounded-xl border\">\n            <Icon name={feature.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-foreground text-base font-medium text-balance\">\n            {feature.title}\n          </h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n            {feature.description}\n          </p>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/features-6.json b/public/r/styles/base-vega/features-6.json
index d21ff5c93..9b01c7537 100644
--- a/public/r/styles/base-vega/features-6.json
+++ b/public/r/styles/base-vega/features-6.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/features-6.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <div>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  features: {\n    title: string\n    description: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  features,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-2 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <ul class=\"grid gap-12 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature) => (\n        <li>\n          <Separator />\n          <div class=\"pt-6\">\n            <h3 class=\"text-foreground text-lg font-medium\">{feature.title}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">\n              {feature.description}\n            </p>\n          </div>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/footer-1.json b/public/r/styles/base-vega/footer-1.json
index 7ac3e8331..6e75db4ac 100644
--- a/public/r/styles/base-vega/footer-1.json
+++ b/public/r/styles/base-vega/footer-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer class=\"flex flex-col gap-8\">\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <h2 class=\"text-sm font-medium\">{column.title}</h2>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/footer-2.json b/public/r/styles/base-vega/footer-2.json
index 217f595bb..d5fbcdfec 100644
--- a/public/r/styles/base-vega/footer-2.json
+++ b/public/r/styles/base-vega/footer-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      <div class=\"flex items-center justify-center gap-3\">\n        {socials.map((social) => (\n          <a\n            href={social.href}\n            class=\"text-muted-foreground hover:text-foreground transition-colors\"\n            aria-label={social.label}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n          >\n            <Icon name={social.icon} href={social.href} class=\"size-4\" />\n          </a>\n        ))}\n      </div>\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  links: {\n    label: string\n    href: string\n  }[]\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  copyright: string\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  links,\n  socials,\n  copyright,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-12 lg:py-16\">\n    <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n      <Logo href={brandHref}>\n        <LogoText>{brandName}</LogoText>\n      </Logo>\n      <p class=\"text-muted-foreground max-w-md text-sm leading-relaxed\">\n        {description}\n      </p>\n      <nav\n        aria-label={navigationLabel}\n        class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\"\n      >\n        {links.map((link) => (\n          <a\n            href={link.href}\n            class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n          >\n            {link.label}\n          </a>\n        ))}\n      </nav>\n      {socials.length > 0 && (\n        <div class=\"flex items-center justify-center gap-3\">\n          {socials.map((social) => (\n            <a\n              href={social.href}\n              class=\"text-muted-foreground hover:text-foreground transition-colors\"\n              aria-label={social.label}\n            >\n              <Icon name={social.icon} href={social.href} class=\"size-4\" />\n            </a>\n          ))}\n        </div>\n      )}\n      <Separator />\n      <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/footer-3.json b/public/r/styles/base-vega/footer-3.json
index b5bc278e9..27d6eb84e 100644
--- a/public/r/styles/base-vega/footer-3.json
+++ b/public/r/styles/base-vega/footer-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/footer-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer>\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          <div class=\"flex items-center gap-3\">\n            {socials.map((social) => (\n              <a\n                href={social.href}\n                class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                aria-label={social.label}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <Icon name={social.icon} href={social.href} class=\"size-4\" />\n              </a>\n            ))}\n          </div>\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <p class=\"text-sm font-medium\">{column.title}</p>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"footer\"> & {\n  brandName: string\n  brandHref: string\n  description: string\n  socials: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  columns: {\n    title: string\n    links: {\n      label: string\n      href: string\n    }[]\n  }[]\n  copyright: string\n  bottomLinks: {\n    label: string\n    href: string\n  }[]\n  navigationLabel: string\n}\n\nconst {\n  class: className,\n  brandName,\n  brandHref,\n  description,\n  socials,\n  columns,\n  copyright,\n  bottomLinks,\n  navigationLabel,\n  ...props\n} = Astro.props\n---\n\n<footer class={cn(\"\", className)} {...props}>\n  <Section class=\"py-16 lg:py-20\">\n    <SectionContainer class=\"flex flex-col gap-8\">\n      <div class=\"grid gap-10 lg:grid-cols-[1fr_2fr]\">\n        <div class=\"flex flex-col gap-5\">\n          <Logo href={brandHref}>\n            <LogoText>{brandName}</LogoText>\n          </Logo>\n          <p class=\"text-muted-foreground max-w-xs text-sm leading-relaxed\">\n            {description}\n          </p>\n          {socials.length > 0 && (\n            <div class=\"flex items-center gap-3\">\n              {socials.map((social) => (\n                <a\n                  href={social.href}\n                  class=\"text-muted-foreground hover:text-foreground transition-colors\"\n                  aria-label={social.label}\n                >\n                  <Icon name={social.icon} href={social.href} class=\"size-4\" />\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n        <div class=\"grid gap-8 sm:grid-cols-3\">\n          {columns.map((column) => (\n            <div class=\"flex flex-col gap-3\">\n              <h2 class=\"text-sm font-medium\">{column.title}</h2>\n              <ul class=\"flex flex-col gap-2.5\">\n                {column.links.map((link) => (\n                  <li>\n                    <a\n                      href={link.href}\n                      class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n      <Separator />\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p class=\"text-muted-foreground text-sm\">{copyright}</p>\n        <nav\n          aria-label={navigationLabel}\n          class=\"flex flex-wrap items-center gap-x-5 gap-y-2\"\n        >\n          {bottomLinks.map((link) => (\n            <a\n              href={link.href}\n              class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n      </div>\n    </SectionContainer>\n  </Section>\n</footer>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/header-1.json b/public/r/styles/base-vega/header-1.json
index 5b7896a87..0bfb9eb6d 100644
--- a/public/r/styles/base-vega/header-1.json
+++ b/public/r/styles/base-vega/header-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"hidden flex-none justify-start lg:flex\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/header-2.json b/public/r/styles/base-vega/header-2.json
index 6a35ca3c4..16c30ad25 100644
--- a/public/r/styles/base-vega/header-2.json
+++ b/public/r/styles/base-vega/header-2.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header variant=\"floating\" class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) => (\n          <NavigationMenuItem value={`nav-${index}`}>\n            <NavigationMenuLink href={item.href} active={item.active}>\n              {item.label}\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/header-3.json b/public/r/styles/base-vega/header-3.json
index 70418bc87..fd0157b7f 100644
--- a/public/r/styles/base-vega/header-3.json
+++ b/public/r/styles/base-vega/header-3.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end gap-1 lg:flex\">\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden max-w-none justify-end lg:flex\"\n      >\n        <NavigationMenuList>\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n      <Separator\n        orientation=\"vertical\"\n        class=\"mx-1 hidden h-5 self-center lg:block\"\n      />\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/header-4.json b/public/r/styles/base-vega/header-4.json
index 0a7d02adf..60663b63f 100644
--- a/public/r/styles/base-vega/header-4.json
+++ b/public/r/styles/base-vega/header-4.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"text-base font-medium\">{item.label}</span>\n                    {item.description && (\n                      <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                        {item.description}\n                      </span>\n                    )}\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/header-5.json b/public/r/styles/base-vega/header-5.json
index 97bc283a6..a09f4b53b 100644
--- a/public/r/styles/base-vega/header-5.json
+++ b/public/r/styles/base-vega/header-5.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {buttons.map(({ label, href, icon }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size={icon && !label ? \"icon-sm\" : \"sm\"}\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n          aria-label={label}\n          target={href.startsWith(\"http\") ? \"_blank\" : undefined}\n          rel={href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt={item.image.alt}\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/header.json b/public/r/styles/base-vega/header.json
index 4108fed3e..6f38b7e4c 100644
--- a/public/r/styles/base-vega/header.json
+++ b/public/r/styles/base-vega/header.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/ui/header/header.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-lg border bg-background shadow-sm mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot=\"header\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"header\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"py-2 relative z-50 flex w-full items-center gap-4\", {\n  variants: {\n    variant: {\n      default: \"\",\n      floating:\n        \"my-2 rounded-lg border bg-background shadow-sm mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  \"data-slot\": dataSlot = \"header\",\n  ...props\n} = Astro.props\n---\n\n<header\n  class={cn(variants({ variant }), className)}\n  data-slot={dataSlot}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</header>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/hero-1.json b/public/r/styles/base-vega/hero-1.json
index 74dc8b92d..3001b9ff4 100644
--- a/public/r/styles/base-vega/hero-1.json
+++ b/public/r/styles/base-vega/hero-1.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n      {badge.label}\n    </Badge>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge?: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    {badge && (\n      <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n        {badge.label}\n      </Badge>\n    )}\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/hero-10.json b/public/r/styles/base-vega/hero-10.json
index 96ed3c089..770bb0a86 100644
--- a/public/r/styles/base-vega/hero-10.json
+++ b/public/r/styles/base-vega/hero-10.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-10.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\">\n    <div class=\"flex flex-col gap-5\">\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            class=\"w-full\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/hero-11.json b/public/r/styles/base-vega/hero-11.json
index 86a7f5e03..09a801205 100644
--- a/public/r/styles/base-vega/hero-11.json
+++ b/public/r/styles/base-vega/hero-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-11.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/hero-12.json b/public/r/styles/base-vega/hero-12.json
index a88805751..77a37b010 100644
--- a/public/r/styles/base-vega/hero-12.json
+++ b/public/r/styles/base-vega/hero-12.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-12.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8 border-y py-8\">\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\">\n      <h1 class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/hero-13.json b/public/r/styles/base-vega/hero-13.json
index f25d55373..f1f708613 100644
--- a/public/r/styles/base-vega/hero-13.json
+++ b/public/r/styles/base-vega/hero-13.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-13.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 900px, (min-width: 64rem) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/hero-2.json b/public/r/styles/base-vega/hero-2.json
index 672b023de..872bdcf70 100644
--- a/public/r/styles/base-vega/hero-2.json
+++ b/public/r/styles/base-vega/hero-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage\n              src={avatar.image}\n              alt={avatar.name ?? avatar.initials}\n            />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/hero-3.json b/public/r/styles/base-vega/hero-3.json
index 03cde7001..dcd3d0d23 100644
--- a/public/r/styles/base-vega/hero-3.json
+++ b/public/r/styles/base-vega/hero-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/hero-4.json b/public/r/styles/base-vega/hero-4.json
index ccdf499cf..b0e278928 100644
--- a/public/r/styles/base-vega/hero-4.json
+++ b/public/r/styles/base-vega/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-center gap-2 text-sm\">\n          <CheckIcon class=\"text-primary size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/hero-5.json b/public/r/styles/base-vega/hero-5.json
index a11173eff..1b95a5469 100644
--- a/public/r/styles/base-vega/hero-5.json
+++ b/public/r/styles/base-vega/hero-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/hero-6.json b/public/r/styles/base-vega/hero-6.json
index f458c5879..b60078e9c 100644
--- a/public/r/styles/base-vega/hero-6.json
+++ b/public/r/styles/base-vega/hero-6.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 600px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/hero-7.json b/public/r/styles/base-vega/hero-7.json
index e417ccade..75d00053f 100644
--- a/public/r/styles/base-vega/hero-7.json
+++ b/public/r/styles/base-vega/hero-7.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 750px, (min-width: 64rem) 60vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/hero-8.json b/public/r/styles/base-vega/hero-8.json
index a3db6ba64..2ed1b607f 100644
--- a/public/r/styles/base-vega/hero-8.json
+++ b/public/r/styles/base-vega/hero-8.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-8.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\">\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 936px, (min-width: 64rem) 75vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/hero-9.json b/public/r/styles/base-vega/hero-9.json
index 22397aa77..3fc4a2faa 100644
--- a/public/r/styles/base-vega/hero-9.json
+++ b/public/r/styles/base-vega/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-center gap-3 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/links-2.json b/public/r/styles/base-vega/links-2.json
index 9e1d20ae8..ed6e31559 100644
--- a/public/r/styles/base-vega/links-2.json
+++ b/public/r/styles/base-vega/links-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/links-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  links: {\n    href: string\n    title: string\n    description: string\n  }[]\n}\n\nconst { class: className, title, description, links, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-10\">\n    <div class=\"flex min-w-0 flex-col gap-4 border-b pb-8\">\n      <h2 class=\"text-foreground text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground max-w-2xl text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-2 md:grid-cols-2 xl:grid-cols-3\">\n      {links.map((item) => (\n        <a\n          href={item.href}\n          class=\"bg-muted/40 hover:bg-muted/60 focus-visible:ring-ring/50 group/link rounded-lg px-4 py-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          <span class=\"flex min-w-0 items-center justify-between gap-3\">\n            <span class=\"text-sm font-medium\">{item.title}</span>\n            <ArrowRightIcon class=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5\" />\n          </span>\n          <span class=\"text-muted-foreground mt-1 block text-sm leading-6\">\n            {item.description}\n          </span>\n        </a>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/logos-1.json b/public/r/styles/base-vega/logos-1.json
index de017ff6a..de62b4b00 100644
--- a/public/r/styles/base-vega/logos-1.json
+++ b/public/r/styles/base-vega/logos-1.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-10 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <ul class=\"text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <li>\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground transition-colors focus-visible:text-foreground\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/logos-2.json b/public/r/styles/base-vega/logos-2.json
index 3d3960693..48760e394 100644
--- a/public/r/styles/base-vega/logos-2.json
+++ b/public/r/styles/base-vega/logos-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, title, description, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee\n    class=\"text-muted-foreground mask-x-from-90%\"\n    gap=\"3rem\"\n    duration=\"30s\"\n    pauseOnHover\n    infinite\n  >\n    {brands.map((brand) => (\n      <Logo\n        class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n        href={brand.href}\n      >\n        <LogoText>{brand.name}</LogoText>\n      </Logo>\n    ))}\n  </Marquee>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  brands: {\n    name: string\n    href?: string\n  }[]\n  labels: {\n    play: string\n    pause: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  brands,\n  labels,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-4 [--marquee-gap:--spacing(12)]\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    <MarqueeContent class=\"text-muted-foreground mask-x-from-90%\">\n      {brands.map((brand) => (\n        <MarqueeItem class=\"flex items-center\">\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground focus-visible:text-foreground transition-colors\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </MarqueeItem>\n      ))}\n    </MarqueeContent>\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/logos-3.json b/public/r/styles/base-vega/logos-3.json
index f0f2762ed..4824f14cc 100644
--- a/public/r/styles/base-vega/logos-3.json
+++ b/public/r/styles/base-vega/logos-3.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "src/components/blocks/logos-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"py-12 lg:py-16\", className)} {...props}>\n  <SectionContainer>\n    <div class=\"text-muted-foreground flex flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <Logo\n          class=\"hover:text-foreground grayscale transition-all hover:grayscale-0\"\n          href={brand.href}\n        >\n          <LogoText>{brand.name}</LogoText>\n        </Logo>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Logo, LogoText } from \"@/components/ui/logo\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  brands: {\n    name: string\n    href?: string\n  }[]\n}\n\nconst { class: className, brands, ...props } = Astro.props\n---\n\n<Section class={cn(\"py-12 lg:py-16\", className)} {...props}>\n  <SectionContainer>\n    <ul class=\"text-muted-foreground flex flex-wrap items-center justify-center gap-x-12 gap-y-6\">\n      {brands.map((brand) => (\n        <li>\n          <Logo\n            class={cn(\n              brand.href != null &&\n                \"hover:text-foreground transition-colors focus-visible:text-foreground\"\n            )}\n            href={brand.href}\n          >\n            <LogoText>{brand.name}</LogoText>\n          </Logo>\n        </li>\n      ))}\n    </ul>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/marquee.json b/public/r/styles/base-vega/marquee.json
index c932b246a..c0543ae7f 100644
--- a/public/r/styles/base-vega/marquee.json
+++ b/public/r/styles/base-vega/marquee.json
@@ -2,16 +2,39 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "marquee",
   "title": "Marquee",
-  "description": "A continuous scrolling animation component for displaying content in a loop.",
+  "description": "A continuously scrolling row of content, with a pause control and a static fallback.",
+  "dependencies": [
+    "embla-carousel@8.6.0",
+    "embla-carousel-auto-scroll@8.6.0",
+    "@lucide/astro"
+  ],
+  "registryDependencies": [
+    "@fulldev/button"
+  ],
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst trackVariants = cva(\n  \"flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-[''] motion-reduce:[animation-play-state:paused]\",\n  {\n    variants: {\n      direction: {\n        left: \"\",\n        right: \"[animation-direction:reverse]\",\n      },\n      pauseOnHover: {\n        true: \"group-hover/marquee:[animation-play-state:paused]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"left\",\n      pauseOnHover: false,\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof trackVariants> & {\n    duration?: string\n    gap?: string\n    infinite?: boolean\n  }\n\nconst {\n  class: className,\n  direction,\n  pauseOnHover,\n  duration = \"40s\",\n  gap = \"1.5rem\",\n  infinite = true,\n  style,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n\nconst resolvedStyle = [\n  `--marquee-duration:${duration}`,\n  `--marquee-gap:${gap}`,\n  typeof style === \"string\" ? style : undefined,\n]\n  .filter(Boolean)\n  .join(\";\")\n---\n\n<div\n  class={cn(\n    \"group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]\",\n    className\n  )}\n  data-slot={dataSlot}\n  style={resolvedStyle}\n  {...props}\n>\n  <div class={trackVariants({ direction, pauseOnHover })}>\n    <slot />\n  </div>\n  {infinite && (\n    <div aria-hidden=\"true\" class={trackVariants({ direction, pauseOnHover })}>\n      <slot />\n    </div>\n  )}\n</div>\n\n<style>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n\n    to {\n      transform: translateX(-100%);\n    }\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({ viewport }))\n      // Moving content needs a way to pause it, so a marquee without a toggle\n      // stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no focusable content of its own.\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = row.viewport.querySelector(\n          \"a[href], button, input, select, textarea, [tabindex]\"\n        )\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || toggles.length === 0) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-content.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  reverse?: boolean\n}\n\nconst {\n  class: className,\n  reverse = false,\n  \"data-slot\": dataSlot = \"marquee-content\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee-viewport\n  data-reverse={reverse ? \"\" : undefined}\n  class={cn(\n    \"focus-visible:ring-ring/50 overflow-x-auto outline-none contain-inline-size focus-visible:ring-3 data-active:overflow-hidden\",\n    className\n  )}\n  {...props}\n>\n  <div class=\"-ms-[var(--marquee-gap,--spacing(4))] flex justify-center-safe\">\n    <slot />\n  </div>\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-item.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee-item\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 ps-[var(--marquee-gap,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/marquee/marquee-toggle.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  hidden\n  data-slot={dataSlot}\n  data-marquee-toggle\n  data-state=\"playing\"\n  data-play-label={playLabel}\n  data-pause-label={pauseLabel}\n  data-variant={variant}\n  data-size={size}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"group/marquee-toggle\",\n    className\n  )}\n  {...props}\n>\n  <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n  <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n  <span class=\"sr-only\" data-marquee-label>\n    {pauseLabel}\n  </span>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/marquee/index.ts",
-      "content": "export { default as Marquee } from \"./marquee.astro\"\n",
+      "content": "export { default as Marquee } from \"./marquee.astro\"\nexport { default as MarqueeContent } from \"./marquee-content.astro\"\nexport { default as MarqueeItem } from \"./marquee-item.astro\"\nexport { default as MarqueeToggle } from \"./marquee-toggle.astro\"\n",
       "type": "registry:ui"
     }
   ],
diff --git a/public/r/styles/base-vega/price.json b/public/r/styles/base-vega/price.json
index d815f6576..e512209cd 100644
--- a/public/r/styles/base-vega/price.json
+++ b/public/r/styles/base-vega/price.json
@@ -16,7 +16,7 @@
     },
     {
       "path": "src/components/ui/price/price-value.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst formattedCompareAt = formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && compareAt\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\nconst hasDiscount = Boolean(formattedCompareAt && formattedDiscount)\n---\n\n{formattedPrice && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt && (\n      <span class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </span>\n    )}\n    {hasDiscount && (\n      <span class=\"rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground\">Save {formattedDiscount}</span>\n    )}\n  </span>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  formatPriceDiscount,\n  formatPriceValue,\n  parseSinglePriceValue,\n  type DiscountFormat,\n  type PriceValue,\n} from \"./format-price-value\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> & {\n    price?: PriceValue\n    compareAt?: PriceValue\n    currency?: string\n    locale?: string\n    variant?: \"default\" | \"sale\"\n    discountFormat?: DiscountFormat\n    showDiscount?: boolean\n    discountLabel?: string\n  }\n\nconst variants = cva(\"leading-tight\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      sale: \"text-muted-foreground line-through\",\n    },\n  },\n})\n\nconst {\n  class: className,\n  price,\n  compareAt,\n  currency = \"USD\",\n  locale = \"en-US\",\n  variant = \"default\",\n  discountFormat = \"percentage\",\n  showDiscount = true,\n  discountLabel = \"Save\",\n  \"data-slot\": dataSlot = \"price-value\",\n  ...props\n} = Astro.props\n\nconst formattedPrice = formatPriceValue(price, { currency, locale })\nconst currentValue = parseSinglePriceValue(price)\nconst compareAtValue = parseSinglePriceValue(compareAt)\n// A compare-at price only shows when it is higher than the price.\nconst formattedCompareAt =\n  currentValue !== null &&\n  compareAtValue !== null &&\n  compareAtValue <= currentValue\n    ? null\n    : formatPriceValue(compareAt, { currency, locale })\nconst formattedDiscount =\n  showDiscount && formattedCompareAt !== null\n    ? formatPriceDiscount(price, compareAt, {\n        currency,\n        locale,\n        format: discountFormat,\n      })\n    : null\n---\n\n{formattedPrice !== null && (\n  <span\n    class={cn(\"inline-flex flex-wrap items-center gap-x-2 gap-y-1\", className)}\n    data-slot={dataSlot}\n    data-variant={variant}\n    {...props}\n  >\n    <span class={cn(variants({ variant }))}>{formattedPrice}</span>\n    {formattedCompareAt !== null && (\n      <del class=\"text-muted-foreground text-sm leading-tight line-through\">\n        {formattedCompareAt}\n      </del>\n    )}\n    {formattedDiscount !== null && (\n      <span class=\"rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-foreground\">\n        {discountLabel} {formattedDiscount}\n      </span>\n    )}\n  </span>\n)}\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/pricing-1.json b/public/r/styles/base-vega/pricing-1.json
index 69ddbb891..2649f08fb 100644
--- a/public/r/styles/base-vega/pricing-1.json
+++ b/public/r/styles/base-vega/pricing-1.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-1.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle>{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue price={plan.price} currency={plan.currency} />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  featuredLabel: string\n  locale?: string\n  discountLabel?: string\n  plans: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  featuredLabel,\n  locale,\n  discountLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card\n          class={cn(\"flex flex-col\", plan.featured && \"ring-primary ring-2\")}\n        >\n          <CardHeader>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle as=\"h3\">{plan.name}</CardTitle>\n              {plan.featured && <Badge>{featuredLabel}</Badge>}\n            </div>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price.value}\n                compareAt={plan.price.compareAt}\n                currency={plan.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{plan.price.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-start gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/pricing-2.json b/public/r/styles/base-vega/pricing-2.json
index 6f6a446c3..14d7ffde3 100644
--- a/public/r/styles/base-vega/pricing-2.json
+++ b/public/r/styles/base-vega/pricing-2.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  plans: {\n    name: string\n    description: string\n    price: number\n    compareAt?: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst { class: className, title, description, plans, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan, index) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle>{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price}\n                compareAt={plan.compareAt}\n                currency={plan.currency}\n              />\n              <PriceUnit>{plan.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-center gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={index === 0 ? \"outline\" : \"default\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  locale?: string\n  discountLabel?: string\n  plans: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    featured?: boolean\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  locale,\n  discountLabel,\n  plans,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription class=\"mt-4\">{description}</SectionDescription>\n    </div>\n    <div class=\"mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]\">\n      {plans.map((plan) => (\n        <Card class=\"flex flex-col border-none shadow-none\">\n          <CardHeader>\n            <CardTitle as=\"h3\">{plan.name}</CardTitle>\n            <CardDescription>{plan.description}</CardDescription>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-6\">\n            <Price>\n              <PriceValue\n                price={plan.price.value}\n                compareAt={plan.price.compareAt}\n                currency={plan.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{plan.price.unit}</PriceUnit>\n            </Price>\n            <Separator />\n            <ul class=\"flex flex-col gap-3\">\n              {plan.features.map((feature) => (\n                <li class=\"flex items-start gap-3 text-sm\">\n                  <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n                  {feature}\n                </li>\n              ))}\n            </ul>\n          </CardContent>\n          <CardFooter class=\"mt-auto\">\n            <Button\n              as=\"a\"\n              href={plan.button.href}\n              variant={plan.featured ? \"default\" : \"outline\"}\n              class=\"w-full\"\n            >\n              {plan.button.label}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/pricing-3.json b/public/r/styles/base-vega/pricing-3.json
index cf14ce08c..5e767ea90 100644
--- a/public/r/styles/base-vega/pricing-3.json
+++ b/public/r/styles/base-vega/pricing-3.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/pricing-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  offer: {\n    name: string\n    description: string\n    price: number\n    currency: string\n    unit: string\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle>{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue price={offer.price} currency={offer.currency} />\n          <PriceUnit>{offer.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  locale?: string\n  discountLabel?: string\n  offer: {\n    name: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n    features: string[]\n    button: {\n      label: string\n      href: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  locale,\n  discountLabel,\n  offer,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-8 text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-4\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle>{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <Card class=\"ring-primary w-full max-w-md ring-2\">\n      <CardHeader class=\"text-left\">\n        <CardTitle as=\"h3\">{offer.name}</CardTitle>\n        <CardDescription>{offer.description}</CardDescription>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-6 text-left\">\n        <Price>\n          <PriceValue\n            price={offer.price.value}\n            compareAt={offer.price.compareAt}\n            currency={offer.price.currency}\n            locale={locale}\n            discountLabel={discountLabel}\n          />\n          <PriceUnit>{offer.price.unit}</PriceUnit>\n        </Price>\n        <Separator />\n        <ul class=\"flex flex-col gap-3\">\n          {offer.features.map((feature) => (\n            <li class=\"flex items-start gap-3 text-sm\">\n              <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </CardContent>\n      <CardFooter>\n        <Button as=\"a\" href={offer.button.href} class=\"w-full\">\n          {offer.button.label}\n        </Button>\n      </CardFooter>\n    </Card>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/product-1.json b/public/r/styles/base-vega/product-1.json
index 74777c9da..d09a7114b 100644
--- a/public/r/styles/base-vega/product-1.json
+++ b/public/r/styles/base-vega/product-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/product-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    currency: string\n    unit: string\n  }\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] rounded-lg object-cover\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue price={price.value} currency={price.currency} />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n  price: {\n    value: number\n    compareAt?: number\n    currency: string\n    unit: string\n  }\n  locale?: string\n  discountLabel?: string\n  note: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  image,\n  price,\n  locale,\n  discountLabel,\n  note,\n  buttons,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/11] w-full rounded-lg object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 80rem) 608px, (min-width: 64rem) 50vw, 100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n    <div class=\"flex flex-col gap-5\">\n      <Badge variant=\"secondary\" class=\"w-fit\">\n        {badge}\n      </Badge>\n      <h1 class=\"text-4xl font-semibold tracking-tight text-balance sm:text-5xl\">\n        {title}\n      </h1>\n      <p class=\"text-muted-foreground text-lg leading-8\">{description}</p>\n      <Price>\n        <PriceValue\n          price={price.value}\n          compareAt={price.compareAt}\n          currency={price.currency}\n          locale={locale}\n          discountLabel={discountLabel}\n        />\n        <PriceUnit>{price.unit}</PriceUnit>\n      </Price>\n      <p class=\"border-y py-4 text-sm leading-7\">{note}</p>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/products-1.json b/public/r/styles/base-vega/products-1.json
index 551e0e726..2bc2c4508 100644
--- a/public/r/styles/base-vega/products-1.json
+++ b/public/r/styles/base-vega/products-1.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 302px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/products-2.json b/public/r/styles/base-vega/products-2.json
index 47d395874..34a441afd 100644
--- a/public/r/styles/base-vega/products-2.json
+++ b/public/r/styles/base-vega/products-2.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-2.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"max-w-2xl\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-3\">\n      {products.map((item) => (\n        <div>\n          <Separator />\n          <div class=\"flex flex-col gap-4 py-5 md:flex-row md:items-center md:justify-between\">\n            <div class=\"flex flex-col gap-1 md:max-w-lg\">\n              <h3 class=\"text-base font-medium\">{item.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-6\">\n                {item.description}\n              </p>\n            </div>\n            <Price>\n              <PriceValue\n                price={item.price.value}\n                currency={item.price.currency}\n              />\n              <PriceUnit>{item.price.unit}</PriceUnit>\n            </Price>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"max-w-2xl\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-3\">\n      {products.map((item) => (\n        <div>\n          <Separator />\n          <div class=\"flex flex-col gap-4 py-5 md:flex-row md:items-center md:justify-between\">\n            <div class=\"flex flex-col gap-1 md:max-w-lg\">\n              <h3 class=\"text-base font-medium\">{item.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-6\">\n                {item.description}\n              </p>\n            </div>\n            <Price>\n              <PriceValue\n                price={item.price.value}\n                compareAt={item.price.compareAt}\n                currency={item.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{item.price.unit}</PriceUnit>\n            </Price>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/products-3.json b/public/r/styles/base-vega/products-3.json
index 91921d696..0e6645c63 100644
--- a/public/r/styles/base-vega/products-3.json
+++ b/public/r/styles/base-vega/products-3.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-3.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, products, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card class=\"text-center\">\n          <CardHeader>\n            <Price class=\"justify-center\">\n              <PriceValue\n                class=\"text-3xl font-semibold\"\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n            </Price>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-2\">\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  locale?: string\n  discountLabel?: string\n  products: {\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card class=\"text-center\">\n          <CardHeader>\n            <Price class=\"justify-center\">\n              <PriceValue\n                class=\"text-3xl font-semibold\"\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n            </Price>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-2\">\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/products-4.json b/public/r/styles/base-vega/products-4.json
index 5c64e3d1f..6885edb3d 100644
--- a/public/r/styles/base-vega/products-4.json
+++ b/public/r/styles/base-vega/products-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n          />\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-3 text-lg leading-8\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-shrink-0 flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {products.map((product) => (\n        <Card>\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[4/3] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 405px, (min-width: 64rem) 33vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/products-5.json b/public/r/styles/base-vega/products-5.json
index c9420d383..9b0a09fb9 100644
--- a/public/r/styles/base-vega/products-5.json
+++ b/public/r/styles/base-vega/products-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/products-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"group/product gap-0 overflow-hidden\">\n          <div class=\"overflow-hidden\">\n            <Image\n              src={product.image.src}\n              alt={product.image.alt}\n              class=\"aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover/product:scale-105\"\n            />\n          </div>\n          <CardHeader>\n            <CardTitle>{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                currency={product.price.currency}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  locale?: string\n  discountLabel?: string\n  products: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    price: {\n      value: number\n      compareAt?: number\n      currency: string\n      unit: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  locale,\n  discountLabel,\n  products,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <div class=\"mt-4 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href}>\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {products.map((product) => (\n        <Card class=\"gap-0 overflow-hidden\">\n          <Image\n            src={product.image.src}\n            alt={product.image.alt}\n            class=\"aspect-[3/4] w-full object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 302px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <CardHeader>\n            <CardTitle as=\"h3\">{product.title}</CardTitle>\n            <CardDescription>{product.description}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <Price>\n              <PriceValue\n                price={product.price.value}\n                compareAt={product.price.compareAt}\n                currency={product.price.currency}\n                locale={locale}\n                discountLabel={discountLabel}\n              />\n              <PriceUnit>{product.price.unit}</PriceUnit>\n            </Price>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/registry.json b/public/r/styles/base-vega/registry.json
index e5fcf8263..ba9d1ef86 100644
--- a/public/r/styles/base-vega/registry.json
+++ b/public/r/styles/base-vega/registry.json
@@ -1064,16 +1064,36 @@
       "name": "marquee",
       "type": "registry:ui",
       "title": "Marquee",
-      "description": "A continuous scrolling animation component for displaying content in a loop.",
+      "description": "A continuously scrolling row of content, with a pause control and a static fallback.",
       "categories": [
         "ui"
       ],
       "docs": "https://ui.full.dev/components/marquee/",
+      "dependencies": [
+        "embla-carousel@8.6.0",
+        "embla-carousel-auto-scroll@8.6.0",
+        "@lucide/astro"
+      ],
+      "registryDependencies": [
+        "@fulldev/button"
+      ],
       "files": [
         {
           "path": "src/components/ui/marquee/marquee.astro",
           "type": "registry:ui"
         },
+        {
+          "path": "src/components/ui/marquee/marquee-content.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/marquee/marquee-item.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/marquee/marquee-toggle.astro",
+          "type": "registry:ui"
+        },
         {
           "path": "src/components/ui/marquee/index.ts",
           "type": "registry:ui"
@@ -2721,16 +2741,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -2749,16 +2762,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -2777,16 +2783,9 @@
         "contact"
       ],
       "docs": "https://ui.full.dev/blocks/contact/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/button",
-        "@fulldev/field",
-        "@fulldev/input",
         "@fulldev/section",
-        "@fulldev/textarea",
-        "@fulldev/form",
         "@fulldev/icon"
       ],
       "files": [
@@ -3248,9 +3247,6 @@
         "features"
       ],
       "docs": "https://ui.full.dev/blocks/features/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/icon",
         "@fulldev/section"
@@ -3314,9 +3310,6 @@
         "features"
       ],
       "docs": "https://ui.full.dev/blocks/features/",
-      "dependencies": [
-        "@lucide/astro"
-      ],
       "registryDependencies": [
         "@fulldev/icon",
         "@fulldev/section"
diff --git a/public/r/styles/base-vega/reviews-1.json b/public/r/styles/base-vega/reviews-1.json
index 1a508f17b..d4fae359c 100644
--- a/public/r/styles/base-vega/reviews-1.json
+++ b/public/r/styles/base-vega/reviews-1.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n            </div>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-2\">\n              <Avatar size=\"lg\">\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <div class=\"grid gap-6 md:grid-cols-3\">\n      {reviews.map((item) => (\n        <Card>\n          <CardContent class=\"flex flex-1 flex-col\">\n            <figure class=\"flex flex-1 flex-col gap-4\">\n              <div class=\"flex items-center justify-between\">\n                <Rating value={item.rating} aria-label={item.ratingLabel} />\n                <QuoteIcon class=\"text-muted-foreground/20 size-6\" />\n              </div>\n              <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n                <p>{item.quote}</p>\n              </blockquote>\n              <figcaption class=\"mt-auto flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\" aria-hidden=\"true\">\n                  <AvatarImage src={item.image} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </figcaption>\n            </figure>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/reviews-2.json b/public/r/styles/base-vega/reviews-2.json
index d5ae29850..494ef9157 100644
--- a/public/r/styles/base-vega/reviews-2.json
+++ b/public/r/styles/base-vega/reviews-2.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <article class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        {featured.quote}\n      </blockquote>\n      <div class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={featured.image} alt={featured.name} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </div>\n    </article>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <article class=\"flex flex-col\">\n          <Separator />\n          <div class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </div>\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  featured: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, featured, reviews, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start\">\n    <figure class=\"flex flex-col gap-6 rounded-xl border p-8\">\n      <QuoteIcon class=\"text-primary size-8\" />\n      <blockquote class=\"text-foreground text-2xl leading-snug font-semibold text-balance sm:text-3xl\">\n        <p>{featured.quote}</p>\n      </blockquote>\n      <figcaption class=\"flex items-center gap-3 pt-2\">\n        <Avatar size=\"lg\" aria-hidden=\"true\">\n          <AvatarImage src={featured.image} />\n          <AvatarFallback>{featured.initials}</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-foreground text-sm font-medium\">{featured.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{featured.role}</p>\n        </div>\n      </figcaption>\n    </figure>\n    <div class=\"grid gap-6\">\n      {reviews.map((item) => (\n        <div class=\"flex flex-col\">\n          <Separator />\n          <figure class=\"flex flex-col gap-3 pt-6\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n              <p>{item.quote}</p>\n            </blockquote>\n            <figcaption class=\"flex items-center gap-3 pt-1\">\n              <Avatar aria-hidden=\"true\">\n                <AvatarImage src={item.image} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </figcaption>\n          </figure>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/reviews-3.json b/public/r/styles/base-vega/reviews-3.json
index eb084404f..5f405a1b8 100644
--- a/public/r/styles/base-vega/reviews-3.json
+++ b/public/r/styles/base-vega/reviews-3.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <div class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                {item.quote}\n              </blockquote>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    previous: string\n    next: string\n    carousel: string\n    slide: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <SectionContainer>\n    <Carousel\n      aria-label={title}\n      aria-roledescription={labels.carousel}\n      opts={{ loop: true }}\n      class=\"mx-auto w-[calc(100%-6rem)] max-w-3xl\"\n    >\n      <CarouselContent>\n        {reviews.map((item) => (\n          <CarouselItem aria-roledescription={labels.slide}>\n            <figure class=\"flex flex-col items-center gap-6 px-4 py-8 text-center\">\n              <QuoteIcon class=\"text-primary size-10\" />\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n              <blockquote class=\"text-foreground text-xl leading-relaxed font-medium text-balance sm:text-2xl\">\n                <p>{item.quote}</p>\n              </blockquote>\n              <figcaption class=\"flex items-center gap-3 pt-2\">\n                <Avatar size=\"lg\" aria-hidden=\"true\">\n                  <AvatarImage src={item.image} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div class=\"text-left\">\n                  <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </figcaption>\n            </figure>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious>\n        <ChevronLeftIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.previous}</span>\n      </CarouselPrevious>\n      <CarouselNext>\n        <ChevronRightIcon aria-hidden=\"true\" />\n        <span class=\"sr-only\">{labels.next}</span>\n      </CarouselNext>\n    </Carousel>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/reviews-4.json b/public/r/styles/base-vega/reviews-4.json
index 03ac5fc3e..3c962de9f 100644
--- a/public/r/styles/base-vega/reviews-4.json
+++ b/public/r/styles/base-vega/reviews-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst topRow = reviews.slice(0, half)\nconst bottomRow = reviews.slice(half)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-6 overflow-x-hidden py-1\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {topRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1rem\"\n      class=\"py-1 [&>div]:items-stretch\"\n    >\n      {bottomRow.map((item) => (\n        <Card class=\"flex w-[22rem] shrink-0 self-stretch\">\n          <CardContent class=\"flex flex-1 flex-col gap-3\">\n            <Rating value={item.rating} aria-label={item.ratingLabel} />\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {item.quote}\n            </p>\n            <div class=\"mt-auto flex items-center gap-3 pt-1\">\n              <Avatar>\n                <AvatarImage src={item.image} alt={item.name} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">{item.name}</p>\n                <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    play: string\n    pause: string\n  }\n  reviews: {\n    rating: number\n    ratingLabel: string\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n\nconst half = Math.ceil(reviews.length / 2)\nconst rows = [reviews.slice(0, half), reviews.slice(half)]\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-6\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    {rows\n      .filter((row) => row.length > 0)\n      .map((row, index) => (\n        <MarqueeContent reverse={index % 2 === 1} class=\"py-1\">\n          {row.map((item) => (\n            <MarqueeItem class=\"flex\">\n              <Card class=\"w-[22rem]\">\n                <CardContent class=\"flex flex-1 flex-col\">\n                  <figure class=\"flex flex-1 flex-col gap-3\">\n                    <Rating value={item.rating} aria-label={item.ratingLabel} />\n                    <blockquote class=\"text-muted-foreground text-sm leading-relaxed\">\n                      <p>{item.quote}</p>\n                    </blockquote>\n                    <figcaption class=\"mt-auto flex items-center gap-3 pt-1\">\n                      <Avatar aria-hidden=\"true\">\n                        <AvatarImage src={item.image} />\n                        <AvatarFallback>{item.initials}</AvatarFallback>\n                      </Avatar>\n                      <div>\n                        <p class=\"text-foreground text-sm font-medium\">\n                          {item.name}\n                        </p>\n                        <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                      </div>\n                    </figcaption>\n                  </figure>\n                </CardContent>\n              </Card>\n            </MarqueeItem>\n          ))}\n        </MarqueeContent>\n      ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/reviews-5.json b/public/r/styles/base-vega/reviews-5.json
index 8b3458106..4f438bd1b 100644
--- a/public/r/styles/base-vega/reviews-5.json
+++ b/public/r/styles/base-vega/reviews-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/reviews-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Marquee } from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst { class: className, title, description, reviews, ...props } = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst row1 = reviews.slice(0, third)\nconst row2 = reviews.slice(third, third * 2)\nconst row3 = reviews.slice(third * 2)\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <div class=\"flex flex-col gap-5\">\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row1.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"right\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row2.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n    <Marquee\n      direction=\"left\"\n      pauseOnHover\n      infinite\n      gap=\"1.25rem\"\n      class=\"[&>div]:items-stretch\"\n    >\n      {row3.map((item) => (\n        <div class=\"bg-muted/50 flex w-[26rem] shrink-0 rounded-2xl p-6\">\n          <div class=\"flex flex-1 flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar size=\"lg\">\n                  <AvatarImage src={item.image} alt={item.name} />\n                  <AvatarFallback>{item.initials}</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">\n                    {item.name}\n                  </p>\n                  <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                </div>\n              </div>\n              <Rating value={item.rating} aria-label={item.ratingLabel} />\n            </div>\n            <div class=\"flex gap-2.5\">\n              <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n              <p class=\"text-foreground/80 text-sm leading-relaxed\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </Marquee>\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport QuoteIcon from \"@lucide/astro/icons/quote\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeToggle,\n} from \"@/components/ui/marquee\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  labels: {\n    play: string\n    pause: string\n  }\n  reviews: {\n    quote: string\n    image?: ImageMetadata\n    initials: string\n    name: string\n    role: string\n    rating: number\n    ratingLabel: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  labels,\n  reviews,\n  ...props\n} = Astro.props\n\nconst third = Math.ceil(reviews.length / 3)\nconst rows = [\n  reviews.slice(0, third),\n  reviews.slice(third, third * 2),\n  reviews.slice(third * 2),\n]\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col items-center gap-4 text-center\">\n    <SectionTitle>{title}</SectionTitle>\n    <SectionDescription class=\"max-w-2xl\">{description}</SectionDescription>\n  </SectionContainer>\n  <Marquee class=\"flex flex-col gap-5\">\n    <SectionContainer class=\"flex justify-end\">\n      <MarqueeToggle playLabel={labels.play} pauseLabel={labels.pause} />\n    </SectionContainer>\n    {rows\n      .filter((row) => row.length > 0)\n      .map((row, index) => (\n        <MarqueeContent reverse={index % 2 === 1} class=\"py-1\">\n          {row.map((item) => (\n            <MarqueeItem class=\"flex\">\n              <figure class=\"bg-muted/50 flex w-[26rem] flex-col gap-4 rounded-2xl p-6\">\n                <figcaption class=\"flex items-center justify-between gap-3\">\n                  <div class=\"flex items-center gap-3\">\n                    <Avatar size=\"lg\" aria-hidden=\"true\">\n                      <AvatarImage src={item.image} />\n                      <AvatarFallback>{item.initials}</AvatarFallback>\n                    </Avatar>\n                    <div>\n                      <p class=\"text-foreground text-sm font-semibold\">\n                        {item.name}\n                      </p>\n                      <p class=\"text-muted-foreground text-xs\">{item.role}</p>\n                    </div>\n                  </div>\n                  <Rating value={item.rating} aria-label={item.ratingLabel} />\n                </figcaption>\n                <div class=\"flex gap-2.5\">\n                  <QuoteIcon class=\"text-primary/30 mt-0.5 size-5 shrink-0\" />\n                  <blockquote class=\"text-foreground/80 text-sm leading-relaxed\">\n                    <p>{item.quote}</p>\n                  </blockquote>\n                </div>\n              </figure>\n            </MarqueeItem>\n          ))}\n        </MarqueeContent>\n      ))}\n  </Marquee>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/section.json b/public/r/styles/base-vega/section.json
index bfdcd376b..929ff6ee8 100644
--- a/public/r/styles/base-vega/section.json
+++ b/public/r/styles/base-vega/section.json
@@ -6,12 +6,12 @@
   "files": [
     {
       "path": "src/components/ui/section/section.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-16 py-[var(--section-padding,--spacing(16))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-16 rounded-xl border bg-background shadow-md mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant = \"default\", ...props } = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot=\"section\"\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"section\"> & VariantProps<typeof variants>\n\nconst variants = cva(\"gap-16 py-[var(--section-padding,--spacing(16))] relative flex scroll-mt-12 flex-col\", {\n  variants: {\n    variant: {\n      default: \"w-full bg-background\",\n      floating:\n        \"my-16 rounded-xl border bg-background shadow-md mx-auto w-[calc(100%-2*var(--gutter,--spacing(4)))] max-w-[calc(var(--container,var(--container-7xl))-2*var(--gutter,--spacing(4)))] overflow-hidden\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst {\n  class: className,\n  variant = \"default\",\n  \"data-slot\": dataSlot = \"section\",\n  ...props\n} = Astro.props\n---\n\n<section\n  class={cn(variants({ variant }), className)}\n  data-slot={dataSlot}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</section>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/section/section-container.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"section-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"relative mx-auto flex w-full max-w-[var(--container,var(--container-7xl))] flex-col gap-8 px-[var(--gutter,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"section-container\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  class={cn(\n    \"relative mx-auto w-full max-w-[var(--container,var(--container-7xl))] px-[var(--gutter,--spacing(4))]\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/services-1.json b/public/r/styles/base-vega/services-1.json
index 4d5ac713e..0ad551b55 100644
--- a/public/r/styles/base-vega/services-1.json
+++ b/public/r/styles/base-vega/services-1.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs transition-shadow\",\n              service.href != null && \"hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }) => (\n          <Button as=\"a\" href={href} variant=\"outline\">\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col gap-4 overflow-hidden rounded-xl border shadow-xs\",\n              service.href != null && \"transition-shadow hover:shadow-md\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? \"\"}\n              class=\"aspect-[4/3] w-full object-cover\"\n              widths={[320, 480, 640]}\n              sizes=\"(min-width: 80rem) 294px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-1 flex-col gap-2 px-5 pb-5\">\n              <span class=\"text-primary text-xs font-medium\">\n                {service.label}\n              </span>\n              <h3 class=\"text-base font-medium\">{service.title}</h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <span class=\"mt-auto pt-2\">\n                  <ArrowRightIcon class=\"text-muted-foreground size-4 transition-transform group-hover/service:translate-x-1\" />\n                </span>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/services-2.json b/public/r/styles/base-vega/services-2.json
index f2b3db6bc..8c24f803c 100644
--- a/public/r/styles/base-vega/services-2.json
+++ b/public/r/styles/base-vega/services-2.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"group/service grid items-center gap-6 rounded-xl border p-4 shadow-xs transition-shadow hover:shadow-md md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"grid gap-6 lg:gap-8\">\n      {services.map((service) => (\n        <div class=\"grid items-center gap-6 rounded-xl border p-4 shadow-xs md:grid-cols-[16rem_minmax(0,1fr)] md:p-0\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"aspect-[4/3] w-full rounded-lg object-cover md:aspect-auto md:h-full md:rounded-l-xl md:rounded-r-none\"\n            widths={[320, 480]}\n            sizes=\"(min-width: 768px) 16rem, 100vw\"\n          />\n          <div class=\"flex flex-col gap-2 py-2 md:py-6 md:pr-6\">\n            <span class=\"text-primary text-xs font-medium tracking-wider uppercase\">\n              {service.label}\n            </span>\n            <h3 class=\"text-lg font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-1 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/services-3.json b/public/r/styles/base-vega/services-3.json
index f259c104f..53b390522 100644
--- a/public/r/styles/base-vega/services-3.json
+++ b/public/r/styles/base-vega/services-3.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    button: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-xl\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"absolute inset-0 -z-10 size-full object-cover\"\n            widths={[480, 640, 960]}\n            sizes=\"(min-width: 80rem) 612px, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n          <div class=\"flex flex-col gap-2 p-6 text-white\">\n            <h3 class=\"text-xl font-semibold\">{service.title}</h3>\n            <p class=\"text-sm leading-relaxed text-white/80\">\n              {service.description}\n            </p>\n            <Button\n              as=\"a\"\n              href={service.button.href}\n              variant=\"secondary\"\n              class=\"mt-2 w-fit\"\n            >\n              {service.button.label}\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/services-4.json b/public/r/styles/base-vega/services-4.json
index d357efabf..a848dbe59 100644
--- a/public/r/styles/base-vega/services-4.json
+++ b/public/r/styles/base-vega/services-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"group/service flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <SectionTitle>{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <article class=\"flex flex-col gap-4\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"aspect-[16/10] w-full rounded-lg object-cover\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 294px, (min-width: 64rem) 25vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"flex flex-1 flex-col gap-1\">\n            <h3 class=\"text-base font-medium\">{service.title}</h3>\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              {service.description}\n            </p>\n          </div>\n          {service.link && (\n            <a\n              href={service.link.href}\n              class=\"text-primary inline-flex w-fit items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline\"\n            >\n              {service.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </article>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/services-5.json b/public/r/styles/base-vega/services-5.json
index def369794..2458133c0 100644
--- a/public/r/styles/base-vega/services-5.json
+++ b/public/r/styles/base-vega/services-5.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-5.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background group/service hover:bg-accent/30 relative flex flex-col gap-4 p-7 transition-colors\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/service:scale-105\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.href != null && (\n            <a\n              href={service.href}\n              class=\"text-primary mt-auto inline-flex items-center gap-1.5 text-sm font-medium\"\n            >\n              {linkLabel}\n              <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Icon } from \"@/components/ui/icon\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  services: {\n    icon: string\n    title: string\n    description: string\n    link?: {\n      label: string\n      href: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-12\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n      <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n        {description}\n      </p>\n    </div>\n    <div class=\"ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-4\">\n      {services.map((service) => (\n        <div class=\"bg-background relative flex flex-col gap-4 p-7\">\n          <div class=\"bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 ring-inset\">\n            <Icon name={service.icon} class=\"size-5\" />\n          </div>\n          <h3 class=\"text-base font-medium tracking-tight\">{service.title}</h3>\n          <p class=\"text-muted-foreground text-sm leading-relaxed\">\n            {service.description}\n          </p>\n          {service.link && (\n            <a\n              href={service.link.href}\n              class=\"text-primary mt-auto inline-flex w-fit items-center gap-1.5 text-sm font-medium underline-offset-4 hover:underline\"\n            >\n              {service.link.label}\n              <ArrowRightIcon class=\"size-3.5\" />\n            </a>\n          )}\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/services-6.json b/public/r/styles/base-vega/services-6.json
index 70206a046..82f8c027b 100644
--- a/public/r/styles/base-vega/services-6.json
+++ b/public/r/styles/base-vega/services-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"group/service relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? service.title}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60 transition-transform duration-500 group-hover/service:scale-105\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-8 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start\">\n    <div class=\"lg:sticky lg:top-28\">\n      <Badge variant=\"secondary\">{badge}</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance\">\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        {description}\n      </p>\n      <div class=\"mt-6 flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 sm:grid-cols-2\">\n      {services.map((service) => (\n        <div class=\"relative isolate flex aspect-square flex-col justify-end overflow-hidden rounded-xl bg-black\">\n          <Image\n            src={service.image?.src ?? PlaceholderImage}\n            alt={service.image?.alt ?? \"\"}\n            class=\"absolute inset-0 -z-10 size-full object-cover opacity-60\"\n            widths={[320, 480, 640]}\n            sizes=\"(min-width: 80rem) 436px, (min-width: 64rem) 35vw, (min-width: 40rem) 50vw, 100vw\"\n          />\n          <div class=\"absolute inset-0 -z-10 bg-gradient-to-t from-black/70 to-transparent\" />\n          <div class=\"flex items-end justify-between gap-4 p-5 text-white\">\n            <div class=\"flex flex-col gap-1\">\n              <h3 class=\"text-lg font-semibold\">{service.title}</h3>\n              <p class=\"text-sm leading-relaxed text-white/75\">\n                {service.description}\n              </p>\n            </div>\n            {service.href != null && (\n              <a\n                href={service.href}\n                aria-label={service.title}\n                class=\"shrink-0 rounded-full bg-white/15 p-2 backdrop-blur-sm transition-colors hover:bg-white/25\"\n              >\n                <ArrowRightIcon class=\"size-4 text-white\" />\n              </a>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/services-7.json b/public/r/styles/base-vega/services-7.json
index 623952170..bbc7e0404 100644
--- a/public/r/styles/base-vega/services-7.json
+++ b/public/r/styles/base-vega/services-7.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/blocks/services-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? service.title}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 1024px) 66vw, 100vw\"\n                  : \"(min-width: 1024px) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge: string\n  title: string\n  description: string\n  linkLabel: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  services: {\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    label: string\n    title: string\n    description: string\n    href?: string\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  buttons,\n  linkLabel,\n  services,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"flex flex-col gap-8\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">{badge}</Badge>\n        <SectionTitle class=\"mt-4\">{title}</SectionTitle>\n        <p class=\"text-muted-foreground mt-4 text-base leading-relaxed text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            variant={index === 0 ? \"default\" : \"outline\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n    </div>\n    <div class=\"grid gap-6 lg:grid-cols-3\">\n      {services.map((service, index) => {\n        const Wrapper = service.href != null ? \"a\" : \"div\"\n        return (\n          <Wrapper\n            href={service.href}\n            class={cn(\n              \"group/service flex flex-col overflow-hidden rounded-xl border shadow-xs\",\n              service.href != null && \"transition-shadow hover:shadow-md\",\n              index === 0 && \"lg:col-span-2 lg:row-span-2\"\n            )}\n          >\n            <Image\n              src={service.image?.src ?? PlaceholderImage}\n              alt={service.image?.alt ?? \"\"}\n              class={cn(\n                \"w-full object-cover\",\n                index === 0 ? \"aspect-[16/9]\" : \"aspect-[16/10]\"\n              )}\n              widths={[320, 480, 640, 960]}\n              sizes={\n                index === 0\n                  ? \"(min-width: 80rem) 824px, (min-width: 64rem) 66vw, 100vw\"\n                  : \"(min-width: 80rem) 400px, (min-width: 64rem) 33vw, 100vw\"\n              }\n            />\n            <div class=\"flex flex-1 flex-col gap-2 p-5\">\n              <Badge variant=\"secondary\" class=\"w-fit\">\n                {service.label}\n              </Badge>\n              <h3\n                class={cn(\"font-medium\", index === 0 ? \"text-xl\" : \"text-base\")}\n              >\n                {service.title}\n              </h3>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                {service.description}\n              </p>\n              {service.href != null && (\n                <div\n                  class={cn(\n                    \"text-primary flex items-center gap-1.5 pt-2 text-sm font-medium\",\n                    index !== 0 && \"mt-auto\"\n                  )}\n                >\n                  {linkLabel}\n                  <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/service:translate-x-1\" />\n                </div>\n              )}\n            </div>\n          </Wrapper>\n        )\n      })}\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/sidebar-1.json b/public/r/styles/base-vega/sidebar-1.json
index 3476f325b..4ec41b325 100644
--- a/public/r/styles/base-vega/sidebar-1.json
+++ b/public/r/styles/base-vega/sidebar-1.json
@@ -22,7 +22,7 @@
   "files": [
     {
       "path": "src/components/blocks/sidebar-1.astro",
-      "content": "---\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebar: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(Astro.url.pathname)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider>\n  <Sidebar\n    class={cn(\"\", className)}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebar} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={labels.github}\n          >\n            <Icon name=\"github\" />\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\nimport SearchIcon from \"@lucide/astro/icons/search\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { LogoImage, LogoText } from \"@/components/ui/logo\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  currentPath: string\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  search: {\n    label: string\n    empty: string\n    items: {\n      label: string\n      href: string\n      title: string\n      path: string\n      description: string\n      group: string\n    }[]\n  }\n  breadcrumb: {\n    items: {\n      label: string\n      href: string\n    }[]\n    menu: {\n      label: string\n      href: string\n    }[]\n  }\n  navigation: {\n    label: string\n    href: string\n    links?: {\n      label: string\n      href: string\n    }[]\n  }[]\n  githubRepo: string\n  githubStars?: number\n  labels: {\n    sidebar: string\n    github: string\n    stars: string\n    breadcrumb: string\n    breadcrumbMenu: string\n    sidebarToggle: string\n    mobileTitle: string\n    mobileDescription: string\n    theme: string\n    shortcut: {\n      mac: string\n      other: string\n    }\n  }\n}\n\nconst {\n  currentPath: rawCurrentPath,\n  logo,\n  search,\n  breadcrumb,\n  navigation,\n  githubRepo,\n  githubStars,\n  labels,\n  ...props\n} = Astro.props\n\nconst normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\nconst currentPath = normalizePath(rawCurrentPath)\nconst searchGroups = search.items.reduce<\n  { label: string; items: typeof search.items }[]\n>((groups, item) => {\n  const group = groups.find((entry) => entry.label === item.group)\n\n  if (group) {\n    group.items.push(item)\n  } else {\n    groups.push({ label: item.group, items: [item] })\n  }\n\n  return groups\n}, [])\n\nconst githubStarsLabel =\n  githubStars === undefined\n    ? labels.stars\n    : new Intl.NumberFormat().format(githubStars)\n\n/* eslint-disable astro/jsx-a11y/no-autofocus -- Focus moves into the search dialog when it opens. */\n---\n\n<SidebarProvider {...props}>\n  <Sidebar\n    aria-label={labels.sidebar}\n    collapsible=\"offcanvas\"\n    variant=\"inset\"\n    mobileTitle={labels.mobileTitle}\n    mobileDescription={labels.mobileDescription}\n  >\n    <SidebarHeader class=\"flex-col\">\n      <SidebarMenuButton size=\"lg\" href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText class=\"font-semibold\">{logo.label}</LogoText>\n      </SidebarMenuButton>\n      <CommandDialog\n        class=\"w-full\"\n        data-search-dialog\n        title={search.label}\n        description={search.label}\n      >\n        <DialogTrigger\n          slot=\"trigger\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-full justify-start shadow-none\"\n          aria-keyshortcuts=\"Meta+K Control+K\"\n        >\n          <SearchIcon data-icon=\"inline-start\" />\n          <span class=\"truncate\">{search.label}</span>\n          <Kbd\n            class=\"bg-background/80 ml-auto h-4 min-w-4 translate-y-0 px-1 text-[10px]\"\n            data-search-shortcut\n            data-shortcut-mac={labels.shortcut.mac}\n            data-shortcut-other={labels.shortcut.other}\n          >\n            {labels.shortcut.mac}\n          </Kbd>\n        </DialogTrigger>\n\n        <Command class=\"[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground\">\n          <CommandInput autofocus placeholder={search.label} />\n          <CommandList>\n            <CommandEmpty>{search.empty}</CommandEmpty>\n\n            {searchGroups.map((group) => (\n              <CommandGroup heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    href={item.href}\n                    value={`${item.group} ${item.label}`}\n                    label={item.label}\n                    keywords={[\n                      item.group,\n                      item.title,\n                      item.path,\n                      item.description,\n                    ]}\n                  >\n                    {item.label}\n                    <CommandShortcut>{item.href}</CommandShortcut>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n      </CommandDialog>\n    </SidebarHeader>\n    <SidebarContent class=\"[mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%_-_1rem),transparent)] group-data-[collapsible=icon]:[mask-image:none] group-data-[collapsible=icon]:[-webkit-mask-image:none]\">\n      {navigation.map((group) => (\n        <SidebarGroup>\n          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n          <SidebarMenu>\n            {(group.links ?? [group]).map((item) => (\n              <SidebarMenuItem>\n                <SidebarMenuButton\n                  href={item.href}\n                  isActive={normalizePath(item.href) === currentPath}\n                >\n                  <span>{item.label}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      ))}\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <Header class=\"h-16\">\n      <HeaderContainer class=\"max-w-none justify-between\">\n        <HeaderGroup>\n          <SidebarTrigger aria-label={labels.sidebarToggle} />\n          <Separator orientation=\"vertical\" class=\"my-auto mr-2 h-4\" />\n          <Breadcrumb aria-label={labels.breadcrumb}>\n            <BreadcrumbList>\n              {breadcrumb.items.map((item, index) => {\n                const isLast = index === breadcrumb.items.length - 1\n                const isHome = item.href === \"/\"\n                const hasMenu =\n                  !isHome &&\n                  breadcrumb.menu.some(\n                    (menuItem) =>\n                      normalizePath(menuItem.href) === normalizePath(item.href)\n                  )\n\n                return (\n                  <>\n                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}\n                    <BreadcrumbItem>\n                      {hasMenu ? (\n                        <DropdownMenu>\n                          <DropdownMenuTrigger\n                            aria-current={isLast ? \"page\" : undefined}\n                            class={cn(\n                              \"hover:text-foreground inline-flex items-center gap-1 transition-colors\",\n                              isLast && \"text-foreground\"\n                            )}\n                          >\n                            {item.label}\n                            <ChevronDownIcon\n                              class=\"size-3.5 opacity-70\"\n                              aria-hidden=\"true\"\n                            />\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"start\">\n                            <DropdownMenuGroup>\n                              {breadcrumb.menu.map((menuItem) => (\n                                <DropdownMenuItem\n                                  href={menuItem.href}\n                                  aria-current={\n                                    normalizePath(menuItem.href) === currentPath\n                                      ? \"page\"\n                                      : undefined\n                                  }\n                                  class=\"aria-[current=page]:text-foreground\"\n                                >\n                                  {menuItem.label}\n                                </DropdownMenuItem>\n                              ))}\n                            </DropdownMenuGroup>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      ) : isLast ? (\n                        <BreadcrumbPage>{item.label}</BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink href={item.href}>\n                          {item.label}\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </>\n                )\n              })}\n              {breadcrumb.menu.length > 0 && currentPath === \"/\" && (\n                <>\n                  <BreadcrumbSeparator>/</BreadcrumbSeparator>\n                  <BreadcrumbItem>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger class=\"hover:text-foreground inline-flex items-center leading-none transition-colors\">\n                        <BreadcrumbEllipsis />\n                        <span class=\"sr-only\">{labels.breadcrumbMenu}</span>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"start\">\n                        <DropdownMenuGroup>\n                          {breadcrumb.menu.map((item) => (\n                            <DropdownMenuItem href={item.href}>\n                              {item.label}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </BreadcrumbItem>\n                </>\n              )}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </HeaderGroup>\n        <HeaderGroup class=\"shrink-0\">\n          <Button\n            as=\"a\"\n            href={`https://github.com/${githubRepo}`}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            <Icon name=\"github\" />\n            <span class=\"sr-only\">{labels.github}</span>\n            <span class=\"hidden sm:inline\">{githubStarsLabel}</span>\n          </Button>\n          <ThemeToggle aria-label={labels.theme} />\n        </HeaderGroup>\n      </HeaderContainer>\n    </Header>\n    <slot />\n  </SidebarInset>\n</SidebarProvider>\n\n<script>\n  const isMac = /Mac|iPhone|iPad|iPod/i.test(\n    navigator.platform || navigator.userAgent\n  )\n\n  document\n    .querySelectorAll<HTMLElement>(\"[data-search-shortcut]\")\n    .forEach((shortcut) => {\n      shortcut.textContent =\n        (isMac\n          ? shortcut.dataset.shortcutMac\n          : shortcut.dataset.shortcutOther) ?? null\n    })\n\n  document.addEventListener(\"keydown\", (event) => {\n    if (event.key.toLowerCase() !== \"k\") return\n    if (event.shiftKey || event.altKey) return\n\n    const dialog = document.querySelector(\"[data-search-dialog]\")\n    const isSearchShortcut = isMac\n      ? event.metaKey && !event.ctrlKey\n      : event.ctrlKey && !event.metaKey\n\n    if (!dialog || dialog.hasAttribute(\"data-open\") || !isSearchShortcut) return\n\n    event.preventDefault()\n    dialog.dispatchEvent(\n      new CustomEvent(\"dialog:set\", { detail: { open: true } })\n    )\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/sidebar.json b/public/r/styles/base-vega/sidebar.json
index 40c1605c9..c2d2a3d09 100644
--- a/public/r/styles/base-vega/sidebar.json
+++ b/public/r/styles/base-vega/sidebar.json
@@ -24,7 +24,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </>\n)}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\"\n\ntype Props = Omit<HTMLAttributes<\"div\">, \"dir\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  state?: \"expanded\" | \"collapsed\"\n  mobileTitle?: string\n  mobileDescription?: string\n}\n\nconst {\n  class: className,\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  state = \"expanded\",\n  mobileTitle = \"Sidebar\",\n  mobileDescription = \"Displays the mobile sidebar.\",\n  ...props\n} = Astro.props\n\nconst desktopState = collapsible === \"none\" ? \"expanded\" : state\nconst desktopCollapsible = desktopState === \"collapsed\" ? collapsible : \"\"\n---\n\n{collapsible === \"none\" ? (\n  <div\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"none\"\n    data-variant={variant}\n    data-side={side}\n    data-sidebar-collapsible=\"none\"\n    class={cn(\n      \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n) : (\n  <>\n    <Sheet data-sidebar=\"sheet\" defaultOpen={false}>\n      <SheetContent\n        side={side}\n        showCloseButton={false}\n        data-sidebar=\"sidebar\"\n        data-mobile=\"true\"\n        style=\"--sidebar-width: var(--sidebar-width-mobile);\"\n        class={cn(\n          \"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 md:hidden\",\n          className\n        )}\n      >\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{mobileTitle}</SheetTitle>\n          <SheetDescription>{mobileDescription}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full w-full flex-col\">\n          <slot />\n        </div>\n      </SheetContent>\n    </Sheet>\n\n    <div\n      data-slot=\"sidebar\"\n      data-state={desktopState}\n      data-collapsible={desktopCollapsible}\n      data-variant={variant}\n      data-side={side}\n      data-sidebar-collapsible={collapsible}\n      class=\"group peer text-sidebar-foreground hidden md:block\"\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        class={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <aside\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        class={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          class=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          <slot />\n        </div>\n      </aside>\n    </div>\n  </>\n)}\n",
       "type": "registry:ui"
     },
     {
@@ -34,7 +34,7 @@
     },
     {
       "path": "src/components/ui/sidebar/sidebar-rail.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst { class: className, type = \"button\", ...props } = Astro.props\n---\n\n<button\n  data-sidebar=\"rail\"\n  data-slot=\"sidebar-rail\"\n  aria-label=\"Toggle Sidebar\"\n  tabindex={-1}\n  title=\"Toggle Sidebar\"\n  type={type}\n  class={cn(\n    \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n    \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n    \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n    \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n    \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n    \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n    className\n  )}\n  {...props}\n></button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\">\n\nconst {\n  class: className,\n  type = \"button\",\n  \"aria-label\": ariaLabel = \"Toggle Sidebar\",\n  title = ariaLabel,\n  ...props\n} = Astro.props\n---\n\n<button\n  data-sidebar=\"rail\"\n  data-slot=\"sidebar-rail\"\n  aria-label={ariaLabel}\n  tabindex={-1}\n  title={title}\n  type={type}\n  class={cn(\n    \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n    \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n    \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n    \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n    \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n    \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n    className\n  )}\n  {...props}\n></button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/registry.json b/registry.json
index 2b35c015d..42fd8a862 100644
--- a/registry.json
+++ b/registry.json
@@ -972,9 +972,15 @@
       "name": "marquee",
       "type": "registry:ui",
       "title": "Marquee",
-      "description": "A continuous scrolling animation component for displaying content in a loop.",
+      "description": "A continuously scrolling row of content, with a pause control and a static fallback.",
       "categories": ["ui"],
       "docs": "https://ui.full.dev/components/marquee/",
+      "dependencies": [
+        "embla-carousel@8.6.0",
+        "embla-carousel-auto-scroll@8.6.0",
+        "@lucide/astro"
+      ],
+      "registryDependencies": ["@fulldev/button"],
       "files": [
         {
           "path": "src/components/ui/marquee/marquee.astro",
@@ -996,13 +1002,7 @@
           "path": "src/components/ui/marquee/index.ts",
           "type": "registry:ui"
         }
-      ],
-      "dependencies": [
-        "embla-carousel@8.6.0",
-        "embla-carousel-auto-scroll@8.6.0",
-        "@lucide/astro"
-      ],
-      "registryDependencies": ["@fulldev/button"]
+      ]
     },
     {
       "name": "theme-toggle",

From b4e70a1839f187e375a2d8f31ea531c52f1043f5 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 17:52:23 +0200
Subject: [PATCH 47/60] Report locatable incomplete axe results and compare
 request origins exactly

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 scripts/a11y.mjs | 62 +++++++++++++++++++++++++++++-------------------
 1 file changed, 37 insertions(+), 25 deletions(-)

diff --git a/scripts/a11y.mjs b/scripts/a11y.mjs
index 1274d755b..fb6a0f9a1 100644
--- a/scripts/a11y.mjs
+++ b/scripts/a11y.mjs
@@ -102,6 +102,13 @@ const server = createServer((request, response) => {
 
 await new Promise((done) => server.listen(0, "127.0.0.1", done))
 const origin = `http://127.0.0.1:${server.address().port}`
+const sameOrigin = (url) => {
+  try {
+    return new URL(url).origin === origin
+  } catch {
+    return false
+  }
+}
 
 let browser
 const results = []
@@ -126,7 +133,7 @@ try {
   }
   const context = await browser.newContext()
   await context.route("**/*", (route) =>
-    route.request().url().startsWith(origin) ? route.continue() : route.abort()
+    sameOrigin(route.request().url()) ? route.continue() : route.abort()
   )
 
   const scan = async (route) => {
@@ -134,11 +141,11 @@ try {
     const errors = []
     page.on("pageerror", (error) => errors.push(`Page error: ${error.message}`))
     page.on("requestfailed", (request) => {
-      if (request.url().startsWith(origin))
+      if (sameOrigin(request.url()))
         errors.push(`Request failed: ${request.url()}`)
     })
     page.on("response", (response) => {
-      if (response.url().startsWith(origin) && response.status() >= 400)
+      if (sameOrigin(response.url()) && response.status() >= 400)
         errors.push(`HTTP ${response.status()}: ${response.url()}`)
     })
     try {
@@ -156,21 +163,23 @@ try {
         )
         .catch(() => errors.push("Images did not finish loading in 10s"))
       const axe = await new AxeBuilder({ page }).analyze()
-      results.push({
-        route,
-        errors,
-        violations: axe.violations.map((rule) => ({
+      const rules = (list) =>
+        list.map((rule) => ({
           id: rule.id,
           impact: rule.impact,
           help: rule.help,
           helpUrl: rule.helpUrl,
-          targets: rule.nodes.map((node) => node.target.join(" ")),
-        })),
-        incomplete: axe.incomplete.map((rule) => ({
-          id: rule.id,
-          help: rule.help,
-          count: rule.nodes.length,
-        })),
+          nodes: rule.nodes.map((node) => ({
+            target: node.target.join(" "),
+            html: node.html,
+            summary: node.failureSummary,
+          })),
+        }))
+      results.push({
+        route,
+        errors,
+        violations: rules(axe.violations),
+        incomplete: rules(axe.incomplete),
       })
     } catch (error) {
       results.push({
@@ -207,27 +216,30 @@ for (const { route, errors, violations } of results) {
   for (const rule of violations) {
     failures++
     console.log(`${route}\n  ${rule.id} (${rule.impact}): ${rule.help}`)
-    for (const target of rule.targets) console.log(`    ${target}`)
+    for (const node of rule.nodes) console.log(`    ${node.target}`)
     console.log(`    ${rule.helpUrl}`)
   }
 }
 
+// Incomplete results, grouped by rule, with the first elements per page.
+// The report lists every element with its HTML and axe's reason.
 const review = new Map()
-for (const { incomplete } of results)
+for (const { route, incomplete } of results)
   for (const rule of incomplete) {
-    const entry = review.get(rule.id) ?? {
-      help: rule.help,
-      routes: 0,
-      nodes: 0,
-    }
-    entry.routes++
-    entry.nodes += rule.count
+    const entry = review.get(rule.id) ?? { ...rule, pages: [] }
+    entry.pages.push({ route, nodes: rule.nodes })
     review.set(rule.id, entry)
   }
 if (review.size > 0) {
   console.log("\nNeeds manual review (axe could not decide, so not a pass):")
-  for (const [id, { help, routes, nodes }] of review)
-    console.log(`  ${id}: ${help} (${nodes} elements on ${routes} pages)`)
+  for (const [id, { help, helpUrl, pages }] of review) {
+    console.log(`  ${id}: ${help}\n    ${helpUrl}`)
+    for (const { route, nodes } of pages) {
+      const more = nodes.length > 2 ? ` (+${nodes.length - 2} more)` : ""
+      const targets = nodes.slice(0, 2).map((node) => node.target)
+      console.log(`    ${route} ${targets.join(", ")}${more}`)
+    }
+  }
 }
 
 console.log(

From 892b6afd390b030349fb3238f5dad538ba0a7199 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 17:52:23 +0200
Subject: [PATCH 48/60] Move Marquee only with an enabled toggle and keep
 caller tabindex

A disabled or aria-disabled toggle no longer counts as a pause control, so the marquee stays static. The fallback tab stop is only managed when the caller set no tabindex, and disabled, hidden, inert or tabindex=-1 content no longer counts as reachable.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/block-props-simplification.md |  2 +-
 src/components/ui/marquee/marquee.astro  | 39 ++++++++++++++++++------
 src/content/pages/components/marquee.mdx |  2 +-
 3 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/.changeset/block-props-simplification.md b/.changeset/block-props-simplification.md
index 1ee6247d8..780efa636 100644
--- a/.changeset/block-props-simplification.md
+++ b/.changeset/block-props-simplification.md
@@ -6,7 +6,7 @@ Simplify block props and improve block semantics (breaking).
 
 - Blocks drop unused fields and button variants: button styles are fixed in each block. User-facing copy such as screen reader labels, close labels and rating labels is passed in by the caller. Banner1 takes an optional `storageKey` for dismissal instead of a shared hardcoded key. `BannerContainer` gains an optional `closeLabel` and `Sidebar` gains optional `mobileTitle` and `mobileDescription`.
 - `SectionContainer` only sets width, gutter and position. It no longer adds `flex flex-col gap-8`; add the layout classes your content needs, such as `class="flex flex-col gap-8"`.
-- Marquee renders its items once and moves them with Embla and its Auto Scroll plugin. Compose it from `Marquee`, `MarqueeContent` (`reverse` replaces `direction`), `MarqueeItem` and `MarqueeToggle` (`playLabel`, `pauseLabel`). It stays static without a toggle, with reduced motion, or when the items do not fill the row. The `duration`, `gap`, `infinite` and `pauseOnHover` props are removed; set `--marquee-gap` for spacing. Logos2, Reviews4 and Reviews5 take `labels: { play, pause }`.
+- Marquee renders its items once and moves them with Embla and its Auto Scroll plugin. Compose it from `Marquee`, `MarqueeContent` (`reverse` replaces `direction`), `MarqueeItem` and `MarqueeToggle` (`playLabel`, `pauseLabel`). It stays static without an enabled toggle, with reduced motion, or when the items do not fill the row. The `duration`, `gap`, `infinite` and `pauseOnHover` props are removed; set `--marquee-gap` for spacing. Logos2, Reviews4 and Reviews5 take `labels: { play, pause }`.
 - `PriceValue` takes `discountLabel` for the savings badge, keeps a `0` price or compare-at price, and only shows a compare-at price above the price. Pricing1-3, Product1 and Products1-5 take `locale` and `discountLabel`, and every price is `{ value, compareAt?, currency, unit }`. Pricing2 emphasizes plans with `featured` instead of the first plan.
 - Header1-5 render their `buttons` in the mobile menu too and no longer have a default or `mobile` slot. Buttons always show their label and open in the same tab unless they set `target: "_blank"`. The logo takes typed images without `alt`, and Header4 and Header5 menu images are decorative.
 - Features1 and Features4 take `link?: { label, href }` instead of `href` and `linkText`. Services4 and Services5 take a `link` per service instead of `linkLabel`.
diff --git a/src/components/ui/marquee/marquee.astro b/src/components/ui/marquee/marquee.astro
index efd7bfe76..ecc908dab 100644
--- a/src/components/ui/marquee/marquee.astro
+++ b/src/components/ui/marquee/marquee.astro
@@ -27,6 +27,8 @@ const {
 
   type Row = {
     viewport: HTMLElement
+    // Whether the caller left tabindex to the marquee.
+    ownTabIndex: boolean
     api?: EmblaCarouselType
     autoScroll?: AutoScrollType
   }
@@ -42,6 +44,15 @@ const {
       (part) => part.closest(rootSelector) === root
     )
 
+  const focusableSelector =
+    "a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]"
+  const reachable = (element: HTMLElement) =>
+    element.tabIndex >= 0 &&
+    !element.matches(":disabled") &&
+    !element.closest("[inert]") &&
+    (element.checkVisibility?.({ visibilityProperty: true }) ??
+      element.getClientRects().length > 0)
+
   // Embla turns loop off when the slides are too few to fill the viewport.
   const loops = (api: EmblaCarouselType) =>
     api.internalEngine().options.loop && api.scrollSnapList().length > 1
@@ -53,9 +64,12 @@ const {
       const rows: Row[] = getParts<HTMLElement>(
         root,
         "[data-marquee-viewport]"
-      ).map((viewport) => ({ viewport }))
-      // Moving content needs a way to pause it, so a marquee without a toggle
-      // stays static. Focus, dragging and the toggle pause it until the toggle
+      ).map((viewport) => ({
+        viewport,
+        ownTabIndex: !viewport.hasAttribute("tabindex"),
+      }))
+      // Moving content needs a way to pause it, so a marquee without an
+      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle
       // plays it again; hovering a row pauses it only while the pointer is
       // over it.
       let playing = true
@@ -85,17 +99,24 @@ const {
         row.autoScroll = undefined
         delete row.viewport.dataset.active
         // A static row scrolls natively; give it a tab stop when it overflows
-        // and has no focusable content of its own.
+        // and has no reachable content of its own.
+        if (!row.ownTabIndex) return
         const overflows = row.viewport.scrollWidth > row.viewport.clientWidth
-        const focusable = row.viewport.querySelector(
-          "a[href], button, input, select, textarea, [tabindex]"
-        )
+        const focusable = [
+          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),
+        ].some(reachable)
         if (overflows && !focusable) row.viewport.tabIndex = 0
         else row.viewport.removeAttribute("tabindex")
       }
 
       const evaluate = (row: Row) => {
-        if (reducedMotion.matches || toggles.length === 0) return stop(row)
+        const usable = toggles.some(
+          (toggle) =>
+            !toggle.disabled &&
+            toggle.getAttribute("aria-disabled") !== "true" &&
+            !toggle.closest("[inert]")
+        )
+        if (reducedMotion.matches || !usable) return stop(row)
         if (row.api) return
         row.viewport.scrollLeft = 0
         const autoScroll = AutoScroll({
@@ -127,7 +148,7 @@ const {
         row.api = api
         row.autoScroll = autoScroll
         row.viewport.dataset.active = ""
-        row.viewport.removeAttribute("tabindex")
+        if (row.ownTabIndex) row.viewport.removeAttribute("tabindex")
         api.on("pointerDown", () => {
           playing = false
           sync()
diff --git a/src/content/pages/components/marquee.mdx b/src/content/pages/components/marquee.mdx
index ebfa97abd..3a0bd0de7 100644
--- a/src/content/pages/components/marquee.mdx
+++ b/src/content/pages/components/marquee.mdx
@@ -85,7 +85,7 @@ The row only moves when it can loop and the visitor allows motion. It stays a st
 
 - the items do not fill the row,
 - the visitor prefers reduced motion,
-- the marquee has no `MarqueeToggle`, because moving content needs a way to pause it,
+- the marquee has no enabled `MarqueeToggle`, because moving content needs a way to pause it,
 - JavaScript has not run.
 
 `MarqueeToggle` shows only while the row moves. Its labels come from you, so they can be in the page language. Focus inside the row, dragging it or pressing the toggle pauses the motion until the toggle plays it again. Hovering with a mouse pauses it while the pointer is over the marquee.

From 959342176e5e8df9cceda7e26dfb6dcb9951ad03 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 17:52:29 +0200
Subject: [PATCH 49/60] Regenerate registry for the Marquee toggle and tabindex
 fix

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 public/r/marquee.json                  | 2 +-
 public/r/styles/base-luma/marquee.json | 2 +-
 public/r/styles/base-lyra/marquee.json | 2 +-
 public/r/styles/base-maia/marquee.json | 2 +-
 public/r/styles/base-mira/marquee.json | 2 +-
 public/r/styles/base-nova/marquee.json | 2 +-
 public/r/styles/base-rhea/marquee.json | 2 +-
 public/r/styles/base-sera/marquee.json | 2 +-
 public/r/styles/base-vega/marquee.json | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/public/r/marquee.json b/public/r/marquee.json
index c0543ae7f..7eb3513bc 100644
--- a/public/r/marquee.json
+++ b/public/r/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({ viewport }))\n      // Moving content needs a way to pause it, so a marquee without a toggle\n      // stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no focusable content of its own.\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = row.viewport.querySelector(\n          \"a[href], button, input, select, textarea, [tabindex]\"\n        )\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || toggles.length === 0) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    (element.checkVisibility?.({ visibilityProperty: true }) ??\n      element.getClientRects().length > 0)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        const usable = toggles.some(\n          (toggle) =>\n            !toggle.disabled &&\n            toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n            !toggle.closest(\"[inert]\")\n        )\n        if (reducedMotion.matches || !usable) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/marquee.json b/public/r/styles/base-luma/marquee.json
index c0543ae7f..7eb3513bc 100644
--- a/public/r/styles/base-luma/marquee.json
+++ b/public/r/styles/base-luma/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({ viewport }))\n      // Moving content needs a way to pause it, so a marquee without a toggle\n      // stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no focusable content of its own.\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = row.viewport.querySelector(\n          \"a[href], button, input, select, textarea, [tabindex]\"\n        )\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || toggles.length === 0) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    (element.checkVisibility?.({ visibilityProperty: true }) ??\n      element.getClientRects().length > 0)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        const usable = toggles.some(\n          (toggle) =>\n            !toggle.disabled &&\n            toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n            !toggle.closest(\"[inert]\")\n        )\n        if (reducedMotion.matches || !usable) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/marquee.json b/public/r/styles/base-lyra/marquee.json
index c0543ae7f..7eb3513bc 100644
--- a/public/r/styles/base-lyra/marquee.json
+++ b/public/r/styles/base-lyra/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({ viewport }))\n      // Moving content needs a way to pause it, so a marquee without a toggle\n      // stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no focusable content of its own.\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = row.viewport.querySelector(\n          \"a[href], button, input, select, textarea, [tabindex]\"\n        )\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || toggles.length === 0) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    (element.checkVisibility?.({ visibilityProperty: true }) ??\n      element.getClientRects().length > 0)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        const usable = toggles.some(\n          (toggle) =>\n            !toggle.disabled &&\n            toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n            !toggle.closest(\"[inert]\")\n        )\n        if (reducedMotion.matches || !usable) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/marquee.json b/public/r/styles/base-maia/marquee.json
index c0543ae7f..7eb3513bc 100644
--- a/public/r/styles/base-maia/marquee.json
+++ b/public/r/styles/base-maia/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({ viewport }))\n      // Moving content needs a way to pause it, so a marquee without a toggle\n      // stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no focusable content of its own.\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = row.viewport.querySelector(\n          \"a[href], button, input, select, textarea, [tabindex]\"\n        )\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || toggles.length === 0) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    (element.checkVisibility?.({ visibilityProperty: true }) ??\n      element.getClientRects().length > 0)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        const usable = toggles.some(\n          (toggle) =>\n            !toggle.disabled &&\n            toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n            !toggle.closest(\"[inert]\")\n        )\n        if (reducedMotion.matches || !usable) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/marquee.json b/public/r/styles/base-mira/marquee.json
index c0543ae7f..7eb3513bc 100644
--- a/public/r/styles/base-mira/marquee.json
+++ b/public/r/styles/base-mira/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({ viewport }))\n      // Moving content needs a way to pause it, so a marquee without a toggle\n      // stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no focusable content of its own.\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = row.viewport.querySelector(\n          \"a[href], button, input, select, textarea, [tabindex]\"\n        )\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || toggles.length === 0) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    (element.checkVisibility?.({ visibilityProperty: true }) ??\n      element.getClientRects().length > 0)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        const usable = toggles.some(\n          (toggle) =>\n            !toggle.disabled &&\n            toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n            !toggle.closest(\"[inert]\")\n        )\n        if (reducedMotion.matches || !usable) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/marquee.json b/public/r/styles/base-nova/marquee.json
index c0543ae7f..7eb3513bc 100644
--- a/public/r/styles/base-nova/marquee.json
+++ b/public/r/styles/base-nova/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({ viewport }))\n      // Moving content needs a way to pause it, so a marquee without a toggle\n      // stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no focusable content of its own.\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = row.viewport.querySelector(\n          \"a[href], button, input, select, textarea, [tabindex]\"\n        )\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || toggles.length === 0) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    (element.checkVisibility?.({ visibilityProperty: true }) ??\n      element.getClientRects().length > 0)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        const usable = toggles.some(\n          (toggle) =>\n            !toggle.disabled &&\n            toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n            !toggle.closest(\"[inert]\")\n        )\n        if (reducedMotion.matches || !usable) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/marquee.json b/public/r/styles/base-rhea/marquee.json
index c0543ae7f..7eb3513bc 100644
--- a/public/r/styles/base-rhea/marquee.json
+++ b/public/r/styles/base-rhea/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({ viewport }))\n      // Moving content needs a way to pause it, so a marquee without a toggle\n      // stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no focusable content of its own.\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = row.viewport.querySelector(\n          \"a[href], button, input, select, textarea, [tabindex]\"\n        )\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || toggles.length === 0) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    (element.checkVisibility?.({ visibilityProperty: true }) ??\n      element.getClientRects().length > 0)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        const usable = toggles.some(\n          (toggle) =>\n            !toggle.disabled &&\n            toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n            !toggle.closest(\"[inert]\")\n        )\n        if (reducedMotion.matches || !usable) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/marquee.json b/public/r/styles/base-sera/marquee.json
index c0543ae7f..7eb3513bc 100644
--- a/public/r/styles/base-sera/marquee.json
+++ b/public/r/styles/base-sera/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({ viewport }))\n      // Moving content needs a way to pause it, so a marquee without a toggle\n      // stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no focusable content of its own.\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = row.viewport.querySelector(\n          \"a[href], button, input, select, textarea, [tabindex]\"\n        )\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || toggles.length === 0) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    (element.checkVisibility?.({ visibilityProperty: true }) ??\n      element.getClientRects().length > 0)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        const usable = toggles.some(\n          (toggle) =>\n            !toggle.disabled &&\n            toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n            !toggle.closest(\"[inert]\")\n        )\n        if (reducedMotion.matches || !usable) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/marquee.json b/public/r/styles/base-vega/marquee.json
index c0543ae7f..7eb3513bc 100644
--- a/public/r/styles/base-vega/marquee.json
+++ b/public/r/styles/base-vega/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({ viewport }))\n      // Moving content needs a way to pause it, so a marquee without a toggle\n      // stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no focusable content of its own.\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = row.viewport.querySelector(\n          \"a[href], button, input, select, textarea, [tabindex]\"\n        )\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || toggles.length === 0) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    (element.checkVisibility?.({ visibilityProperty: true }) ??\n      element.getClientRects().length > 0)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        const usable = toggles.some(\n          (toggle) =>\n            !toggle.disabled &&\n            toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n            !toggle.closest(\"[inert]\")\n        )\n        if (reducedMotion.matches || !usable) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {

From 77dc379a79d9613cfcf136ba88b3ec8ccb6084e9 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 17:59:49 +0200
Subject: [PATCH 50/60] Highlight light-mode code with
 github-light-high-contrast

github-light-default comments (#6E7781) measure 4.32:1 on the code background. Every token of the high-contrast theme clears 4.5:1.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 astro.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/astro.config.ts b/astro.config.ts
index 773cfe96d..0d9dfd48b 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -38,7 +38,7 @@ export default defineConfig({
     processor: unified(),
     shikiConfig: {
       themes: {
-        light: "github-light-default",
+        light: "github-light-high-contrast",
         dark: "github-dark-default",
       },
     },

From 6ade0c73fd009f6f5ad00f86bd0e6ce237e05e0a Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 17:59:49 +0200
Subject: [PATCH 51/60] Let finite animations settle before the axe scan

Button transitions were sometimes still running when axe measured colors, so it reported in-between colors as contrast failures. The wait is bounded to 5 seconds and skips endless animations.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 scripts/a11y.mjs | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/scripts/a11y.mjs b/scripts/a11y.mjs
index fb6a0f9a1..95e74eecf 100644
--- a/scripts/a11y.mjs
+++ b/scripts/a11y.mjs
@@ -10,7 +10,8 @@
 // them, so they did not pass. Requests to other origins are blocked, so the
 // scan needs no network. The report goes to .dev/a11y/report.json.
 //
-// Axe checks the rendered default state of each page. Menus, dialogs, focus
+// Axe checks the rendered default state of each page, after fonts, eager
+// images and finite animations have settled. Menus, dialogs, focus
 // order and motion still need a manual check.
 import { createReadStream, existsSync, statSync } from "node:fs"
 import { mkdir, readdir, writeFile } from "node:fs/promises"
@@ -162,6 +163,24 @@ try {
           { timeout: 10_000 }
         )
         .catch(() => errors.push("Images did not finish loading in 10s"))
+      // Axe measures colors as they are now, so let finite animations and
+      // transitions, such as styles settling after load, finish first.
+      // Endless animations are not waited for.
+      const settled = await page.evaluate(() =>
+        Promise.race([
+          Promise.all(
+            document
+              .getAnimations()
+              .filter((animation) => {
+                const { endTime } = animation.effect?.getComputedTiming() ?? {}
+                return endTime !== undefined && endTime !== Infinity
+              })
+              .map((animation) => animation.finished.catch(() => {}))
+          ).then(() => true),
+          new Promise((done) => setTimeout(() => done(false), 5_000)),
+        ])
+      )
+      if (!settled) errors.push("Animations did not finish in 5s")
       const axe = await new AxeBuilder({ page }).analyze()
       const rules = (list) =>
         list.map((rule) => ({

From 2a08209e939c9e6e1cd13da0bfcdc2f28023dae0 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 18:13:20 +0200
Subject: [PATCH 52/60] Move Marquee only while its toggle can be pressed and
 seen

A toggle disabled through its fieldset, or with a hidden or display:none parent, no longer counts as a pause control. Rows also stop when a toggle is later disabled, made inert, or hidden at a breakpoint, and start again with the user's pause kept when it becomes usable.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/block-props-simplification.md |  2 +-
 src/components/ui/marquee/marquee.astro  | 39 ++++++++++++++++--------
 src/content/pages/components/marquee.mdx |  2 +-
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/.changeset/block-props-simplification.md b/.changeset/block-props-simplification.md
index 780efa636..8cb0cdb0c 100644
--- a/.changeset/block-props-simplification.md
+++ b/.changeset/block-props-simplification.md
@@ -6,7 +6,7 @@ Simplify block props and improve block semantics (breaking).
 
 - Blocks drop unused fields and button variants: button styles are fixed in each block. User-facing copy such as screen reader labels, close labels and rating labels is passed in by the caller. Banner1 takes an optional `storageKey` for dismissal instead of a shared hardcoded key. `BannerContainer` gains an optional `closeLabel` and `Sidebar` gains optional `mobileTitle` and `mobileDescription`.
 - `SectionContainer` only sets width, gutter and position. It no longer adds `flex flex-col gap-8`; add the layout classes your content needs, such as `class="flex flex-col gap-8"`.
-- Marquee renders its items once and moves them with Embla and its Auto Scroll plugin. Compose it from `Marquee`, `MarqueeContent` (`reverse` replaces `direction`), `MarqueeItem` and `MarqueeToggle` (`playLabel`, `pauseLabel`). It stays static without an enabled toggle, with reduced motion, or when the items do not fill the row. The `duration`, `gap`, `infinite` and `pauseOnHover` props are removed; set `--marquee-gap` for spacing. Logos2, Reviews4 and Reviews5 take `labels: { play, pause }`.
+- Marquee renders its items once and moves them with Embla and its Auto Scroll plugin. Compose it from `Marquee`, `MarqueeContent` (`reverse` replaces `direction`), `MarqueeItem` and `MarqueeToggle` (`playLabel`, `pauseLabel`). It stays static without an enabled, visible toggle, with reduced motion, or when the items do not fill the row. The `duration`, `gap`, `infinite` and `pauseOnHover` props are removed; set `--marquee-gap` for spacing. Logos2, Reviews4 and Reviews5 take `labels: { play, pause }`.
 - `PriceValue` takes `discountLabel` for the savings badge, keeps a `0` price or compare-at price, and only shows a compare-at price above the price. Pricing1-3, Product1 and Products1-5 take `locale` and `discountLabel`, and every price is `{ value, compareAt?, currency, unit }`. Pricing2 emphasizes plans with `featured` instead of the first plan.
 - Header1-5 render their `buttons` in the mobile menu too and no longer have a default or `mobile` slot. Buttons always show their label and open in the same tab unless they set `target: "_blank"`. The logo takes typed images without `alt`, and Header4 and Header5 menu images are decorative.
 - Features1 and Features4 take `link?: { label, href }` instead of `href` and `linkText`. Services4 and Services5 take a `link` per service instead of `linkLabel`.
diff --git a/src/components/ui/marquee/marquee.astro b/src/components/ui/marquee/marquee.astro
index ecc908dab..c436cd7af 100644
--- a/src/components/ui/marquee/marquee.astro
+++ b/src/components/ui/marquee/marquee.astro
@@ -46,12 +46,23 @@ const {
 
   const focusableSelector =
     "a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]"
+  const visible = (element: Element) =>
+    element.checkVisibility?.({ visibilityProperty: true }) ??
+    element.getClientRects().length > 0
+  // A toggle is a pause control when it can be pressed and seen. The marquee
+  // hides the toggle itself while no row moves, so visibility is read from its
+  // parent, where the caller's hiding applies.
+  const usable = (toggle: HTMLButtonElement) =>
+    !toggle.matches(":disabled") &&
+    toggle.getAttribute("aria-disabled") !== "true" &&
+    !toggle.closest("[inert]") &&
+    toggle.parentElement !== null &&
+    visible(toggle.parentElement)
   const reachable = (element: HTMLElement) =>
     element.tabIndex >= 0 &&
     !element.matches(":disabled") &&
     !element.closest("[inert]") &&
-    (element.checkVisibility?.({ visibilityProperty: true }) ??
-      element.getClientRects().length > 0)
+    visible(element)
 
   // Embla turns loop off when the slides are too few to fill the viewport.
   const loops = (api: EmblaCarouselType) =>
@@ -110,13 +121,7 @@ const {
       }
 
       const evaluate = (row: Row) => {
-        const usable = toggles.some(
-          (toggle) =>
-            !toggle.disabled &&
-            toggle.getAttribute("aria-disabled") !== "true" &&
-            !toggle.closest("[inert]")
-        )
-        if (reducedMotion.matches || !usable) return stop(row)
+        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)
         if (row.api) return
         row.viewport.scrollLeft = 0
         const autoScroll = AutoScroll({
@@ -159,15 +164,22 @@ const {
         })
       }
 
-      // Embla watches size changes while it runs; this observer lets a static
-      // row start once its content no longer fits.
+      // Rows start or stop when their size changes, such as a static row
+      // whose content no longer fits or a toggle hidden at a breakpoint, and
+      // when a toggle is disabled or made inert.
       let frame = 0
-      const observer = new ResizeObserver(() => {
+      const refresh = () => {
         cancelAnimationFrame(frame)
         frame = requestAnimationFrame(() => {
-          for (const row of rows) if (!row.api) evaluate(row)
+          for (const row of rows) evaluate(row)
           sync()
         })
+      }
+      const observer = new ResizeObserver(refresh)
+      const availability = new MutationObserver(refresh)
+      availability.observe(document.documentElement, {
+        subtree: true,
+        attributeFilter: ["disabled", "aria-disabled", "inert"],
       })
       for (const row of rows) {
         observer.observe(row.viewport)
@@ -215,6 +227,7 @@ const {
       instances.set(root, () => {
         cancelAnimationFrame(frame)
         observer.disconnect()
+        availability.disconnect()
         reducedMotion.removeEventListener("change", onMotionChange)
         root.removeEventListener("focusin", onFocusIn)
         for (const row of rows) {
diff --git a/src/content/pages/components/marquee.mdx b/src/content/pages/components/marquee.mdx
index 3a0bd0de7..a2a06a49d 100644
--- a/src/content/pages/components/marquee.mdx
+++ b/src/content/pages/components/marquee.mdx
@@ -85,7 +85,7 @@ The row only moves when it can loop and the visitor allows motion. It stays a st
 
 - the items do not fill the row,
 - the visitor prefers reduced motion,
-- the marquee has no enabled `MarqueeToggle`, because moving content needs a way to pause it,
+- the marquee has no enabled, visible `MarqueeToggle`, because moving content needs a way to pause it. A row that moves stops when its toggle is later disabled, made inert or hidden,
 - JavaScript has not run.
 
 `MarqueeToggle` shows only while the row moves. Its labels come from you, so they can be in the page language. Focus inside the row, dragging it or pressing the toggle pauses the motion until the toggle plays it again. Hovering with a mouse pauses it while the pointer is over the marquee.

From e159979cb3e4cc13f852fbb20cb6adfba61d0f97 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 18:13:20 +0200
Subject: [PATCH 53/60] Regenerate registry for the Marquee toggle availability
 fix

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 public/r/marquee.json                  | 2 +-
 public/r/styles/base-luma/marquee.json | 2 +-
 public/r/styles/base-lyra/marquee.json | 2 +-
 public/r/styles/base-maia/marquee.json | 2 +-
 public/r/styles/base-mira/marquee.json | 2 +-
 public/r/styles/base-nova/marquee.json | 2 +-
 public/r/styles/base-rhea/marquee.json | 2 +-
 public/r/styles/base-sera/marquee.json | 2 +-
 public/r/styles/base-vega/marquee.json | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/public/r/marquee.json b/public/r/marquee.json
index 7eb3513bc..c5354ee8d 100644
--- a/public/r/marquee.json
+++ b/public/r/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    (element.checkVisibility?.({ visibilityProperty: true }) ??\n      element.getClientRects().length > 0)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        const usable = toggles.some(\n          (toggle) =>\n            !toggle.disabled &&\n            toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n            !toggle.closest(\"[inert]\")\n        )\n        if (reducedMotion.matches || !usable) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides the toggle itself while no row moves, so visibility is read from its\n  // parent, where the caller's hiding applies.\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    toggle.parentElement !== null &&\n    visible(toggle.parentElement)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits or a toggle hidden at a breakpoint, and\n      // when a toggle is disabled or made inert.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const availability = new MutationObserver(refresh)\n      availability.observe(document.documentElement, {\n        subtree: true,\n        attributeFilter: [\"disabled\", \"aria-disabled\", \"inert\"],\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        availability.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/marquee.json b/public/r/styles/base-luma/marquee.json
index 7eb3513bc..c5354ee8d 100644
--- a/public/r/styles/base-luma/marquee.json
+++ b/public/r/styles/base-luma/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    (element.checkVisibility?.({ visibilityProperty: true }) ??\n      element.getClientRects().length > 0)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        const usable = toggles.some(\n          (toggle) =>\n            !toggle.disabled &&\n            toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n            !toggle.closest(\"[inert]\")\n        )\n        if (reducedMotion.matches || !usable) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides the toggle itself while no row moves, so visibility is read from its\n  // parent, where the caller's hiding applies.\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    toggle.parentElement !== null &&\n    visible(toggle.parentElement)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits or a toggle hidden at a breakpoint, and\n      // when a toggle is disabled or made inert.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const availability = new MutationObserver(refresh)\n      availability.observe(document.documentElement, {\n        subtree: true,\n        attributeFilter: [\"disabled\", \"aria-disabled\", \"inert\"],\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        availability.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/marquee.json b/public/r/styles/base-lyra/marquee.json
index 7eb3513bc..c5354ee8d 100644
--- a/public/r/styles/base-lyra/marquee.json
+++ b/public/r/styles/base-lyra/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    (element.checkVisibility?.({ visibilityProperty: true }) ??\n      element.getClientRects().length > 0)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        const usable = toggles.some(\n          (toggle) =>\n            !toggle.disabled &&\n            toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n            !toggle.closest(\"[inert]\")\n        )\n        if (reducedMotion.matches || !usable) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides the toggle itself while no row moves, so visibility is read from its\n  // parent, where the caller's hiding applies.\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    toggle.parentElement !== null &&\n    visible(toggle.parentElement)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits or a toggle hidden at a breakpoint, and\n      // when a toggle is disabled or made inert.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const availability = new MutationObserver(refresh)\n      availability.observe(document.documentElement, {\n        subtree: true,\n        attributeFilter: [\"disabled\", \"aria-disabled\", \"inert\"],\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        availability.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/marquee.json b/public/r/styles/base-maia/marquee.json
index 7eb3513bc..c5354ee8d 100644
--- a/public/r/styles/base-maia/marquee.json
+++ b/public/r/styles/base-maia/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    (element.checkVisibility?.({ visibilityProperty: true }) ??\n      element.getClientRects().length > 0)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        const usable = toggles.some(\n          (toggle) =>\n            !toggle.disabled &&\n            toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n            !toggle.closest(\"[inert]\")\n        )\n        if (reducedMotion.matches || !usable) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides the toggle itself while no row moves, so visibility is read from its\n  // parent, where the caller's hiding applies.\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    toggle.parentElement !== null &&\n    visible(toggle.parentElement)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits or a toggle hidden at a breakpoint, and\n      // when a toggle is disabled or made inert.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const availability = new MutationObserver(refresh)\n      availability.observe(document.documentElement, {\n        subtree: true,\n        attributeFilter: [\"disabled\", \"aria-disabled\", \"inert\"],\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        availability.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/marquee.json b/public/r/styles/base-mira/marquee.json
index 7eb3513bc..c5354ee8d 100644
--- a/public/r/styles/base-mira/marquee.json
+++ b/public/r/styles/base-mira/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    (element.checkVisibility?.({ visibilityProperty: true }) ??\n      element.getClientRects().length > 0)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        const usable = toggles.some(\n          (toggle) =>\n            !toggle.disabled &&\n            toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n            !toggle.closest(\"[inert]\")\n        )\n        if (reducedMotion.matches || !usable) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides the toggle itself while no row moves, so visibility is read from its\n  // parent, where the caller's hiding applies.\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    toggle.parentElement !== null &&\n    visible(toggle.parentElement)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits or a toggle hidden at a breakpoint, and\n      // when a toggle is disabled or made inert.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const availability = new MutationObserver(refresh)\n      availability.observe(document.documentElement, {\n        subtree: true,\n        attributeFilter: [\"disabled\", \"aria-disabled\", \"inert\"],\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        availability.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/marquee.json b/public/r/styles/base-nova/marquee.json
index 7eb3513bc..c5354ee8d 100644
--- a/public/r/styles/base-nova/marquee.json
+++ b/public/r/styles/base-nova/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    (element.checkVisibility?.({ visibilityProperty: true }) ??\n      element.getClientRects().length > 0)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        const usable = toggles.some(\n          (toggle) =>\n            !toggle.disabled &&\n            toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n            !toggle.closest(\"[inert]\")\n        )\n        if (reducedMotion.matches || !usable) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides the toggle itself while no row moves, so visibility is read from its\n  // parent, where the caller's hiding applies.\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    toggle.parentElement !== null &&\n    visible(toggle.parentElement)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits or a toggle hidden at a breakpoint, and\n      // when a toggle is disabled or made inert.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const availability = new MutationObserver(refresh)\n      availability.observe(document.documentElement, {\n        subtree: true,\n        attributeFilter: [\"disabled\", \"aria-disabled\", \"inert\"],\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        availability.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/marquee.json b/public/r/styles/base-rhea/marquee.json
index 7eb3513bc..c5354ee8d 100644
--- a/public/r/styles/base-rhea/marquee.json
+++ b/public/r/styles/base-rhea/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    (element.checkVisibility?.({ visibilityProperty: true }) ??\n      element.getClientRects().length > 0)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        const usable = toggles.some(\n          (toggle) =>\n            !toggle.disabled &&\n            toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n            !toggle.closest(\"[inert]\")\n        )\n        if (reducedMotion.matches || !usable) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides the toggle itself while no row moves, so visibility is read from its\n  // parent, where the caller's hiding applies.\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    toggle.parentElement !== null &&\n    visible(toggle.parentElement)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits or a toggle hidden at a breakpoint, and\n      // when a toggle is disabled or made inert.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const availability = new MutationObserver(refresh)\n      availability.observe(document.documentElement, {\n        subtree: true,\n        attributeFilter: [\"disabled\", \"aria-disabled\", \"inert\"],\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        availability.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/marquee.json b/public/r/styles/base-sera/marquee.json
index 7eb3513bc..c5354ee8d 100644
--- a/public/r/styles/base-sera/marquee.json
+++ b/public/r/styles/base-sera/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    (element.checkVisibility?.({ visibilityProperty: true }) ??\n      element.getClientRects().length > 0)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        const usable = toggles.some(\n          (toggle) =>\n            !toggle.disabled &&\n            toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n            !toggle.closest(\"[inert]\")\n        )\n        if (reducedMotion.matches || !usable) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides the toggle itself while no row moves, so visibility is read from its\n  // parent, where the caller's hiding applies.\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    toggle.parentElement !== null &&\n    visible(toggle.parentElement)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits or a toggle hidden at a breakpoint, and\n      // when a toggle is disabled or made inert.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const availability = new MutationObserver(refresh)\n      availability.observe(document.documentElement, {\n        subtree: true,\n        attributeFilter: [\"disabled\", \"aria-disabled\", \"inert\"],\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        availability.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/marquee.json b/public/r/styles/base-vega/marquee.json
index 7eb3513bc..c5354ee8d 100644
--- a/public/r/styles/base-vega/marquee.json
+++ b/public/r/styles/base-vega/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    (element.checkVisibility?.({ visibilityProperty: true }) ??\n      element.getClientRects().length > 0)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        const usable = toggles.some(\n          (toggle) =>\n            !toggle.disabled &&\n            toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n            !toggle.closest(\"[inert]\")\n        )\n        if (reducedMotion.matches || !usable) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Embla watches size changes while it runs; this observer lets a static\n      // row start once its content no longer fits.\n      let frame = 0\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) if (!row.api) evaluate(row)\n          sync()\n        })\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides the toggle itself while no row moves, so visibility is read from its\n  // parent, where the caller's hiding applies.\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    toggle.parentElement !== null &&\n    visible(toggle.parentElement)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits or a toggle hidden at a breakpoint, and\n      // when a toggle is disabled or made inert.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const availability = new MutationObserver(refresh)\n      availability.observe(document.documentElement, {\n        subtree: true,\n        attributeFilter: [\"disabled\", \"aria-disabled\", \"inert\"],\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        availability.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {

From 4760a67dfd4656b79db226f82d6f6367e1b7dae2 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 18:27:47 +0200
Subject: [PATCH 54/60] Read Marquee toggle visibility apart from its own
 hiding

The marquee now shows and hides its toggle through a private display:contents wrapper, so the button's hidden attribute, class and style stay the caller's and count when deciding whether the toggle can be seen. Instead of a document-wide observer, it watches class, style, hidden, disabled, aria-disabled and inert on each toggle and its ancestors, and the sizes of the toggle's path inside the marquee, so a toggle hidden at a breakpoint stops motion even when the row keeps its width.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../ui/marquee/marquee-toggle.astro           | 50 +++++++++--------
 src/components/ui/marquee/marquee.astro       | 54 ++++++++++++++-----
 2 files changed, 68 insertions(+), 36 deletions(-)

diff --git a/src/components/ui/marquee/marquee-toggle.astro b/src/components/ui/marquee/marquee-toggle.astro
index 8c98dbcef..a76575656 100644
--- a/src/components/ui/marquee/marquee-toggle.astro
+++ b/src/components/ui/marquee/marquee-toggle.astro
@@ -21,28 +21,32 @@ const {
   "data-slot": dataSlot = "marquee-toggle",
   ...props
 } = Astro.props
+
+// The marquee shows and hides the toggle through its wrapper, so the button's
+// own hidden attribute, class and style stay the caller's.
 ---
 
-<button
-  type="button"
-  hidden
-  data-slot={dataSlot}
-  data-marquee-toggle
-  data-state="playing"
-  data-play-label={playLabel}
-  data-pause-label={pauseLabel}
-  data-variant={variant}
-  data-size={size}
-  class={cn(
-    buttonVariants({ variant, size }),
-    "group/marquee-toggle",
-    className
-  )}
-  {...props}
->
-  <PauseIcon class="group-data-[state=paused]/marquee-toggle:hidden" />
-  <PlayIcon class="hidden group-data-[state=paused]/marquee-toggle:block" />
-  <span class="sr-only" data-marquee-label>
-    {pauseLabel}
-  </span>
-</button>
+<span data-marquee-control hidden class="contents">
+  <button
+    type="button"
+    data-slot={dataSlot}
+    data-marquee-toggle
+    data-state="playing"
+    data-play-label={playLabel}
+    data-pause-label={pauseLabel}
+    data-variant={variant}
+    data-size={size}
+    class={cn(
+      buttonVariants({ variant, size }),
+      "group/marquee-toggle",
+      className
+    )}
+    {...props}
+  >
+    <PauseIcon class="group-data-[state=paused]/marquee-toggle:hidden" />
+    <PlayIcon class="hidden group-data-[state=paused]/marquee-toggle:block" />
+    <span class="sr-only" data-marquee-label>
+      {pauseLabel}
+    </span>
+  </button>
+</span>
diff --git a/src/components/ui/marquee/marquee.astro b/src/components/ui/marquee/marquee.astro
index c436cd7af..db6d22e9e 100644
--- a/src/components/ui/marquee/marquee.astro
+++ b/src/components/ui/marquee/marquee.astro
@@ -50,14 +50,23 @@ const {
     element.checkVisibility?.({ visibilityProperty: true }) ??
     element.getClientRects().length > 0
   // A toggle is a pause control when it can be pressed and seen. The marquee
-  // hides the toggle itself while no row moves, so visibility is read from its
-  // parent, where the caller's hiding applies.
+  // hides a toggle through its private wrapper, so visibility is read from the
+  // button's own styles and from the wrapper's parent.
+  const shown = (toggle: HTMLButtonElement) => {
+    const style = getComputedStyle(toggle)
+    const outside = toggle.closest("[data-marquee-control]")?.parentElement
+    return (
+      style.display !== "none" &&
+      style.visibility !== "hidden" &&
+      outside != null &&
+      visible(outside)
+    )
+  }
   const usable = (toggle: HTMLButtonElement) =>
     !toggle.matches(":disabled") &&
     toggle.getAttribute("aria-disabled") !== "true" &&
     !toggle.closest("[inert]") &&
-    toggle.parentElement !== null &&
-    visible(toggle.parentElement)
+    shown(toggle)
   const reachable = (element: HTMLElement) =>
     element.tabIndex >= 0 &&
     !element.matches(":disabled") &&
@@ -93,7 +102,9 @@ const {
           else row.autoScroll?.stop()
         }
         for (const toggle of toggles) {
-          toggle.hidden = moving.length === 0
+          const control = toggle.closest<HTMLElement>("[data-marquee-control]")
+          if (control && control.hidden !== (moving.length === 0))
+            control.hidden = moving.length === 0
           toggle.dataset.state = playing ? "playing" : "paused"
           const label = toggle.querySelector("[data-marquee-label]")
           if (label)
@@ -165,8 +176,9 @@ const {
       }
 
       // Rows start or stop when their size changes, such as a static row
-      // whose content no longer fits or a toggle hidden at a breakpoint, and
-      // when a toggle is disabled or made inert.
+      // whose content no longer fits, and when a toggle can no longer be
+      // pressed or seen. That covers changes to the toggle and its ancestors,
+      // and breakpoints that hide the toggle or its container.
       let frame = 0
       const refresh = () => {
         cancelAnimationFrame(frame)
@@ -176,11 +188,27 @@ const {
         })
       }
       const observer = new ResizeObserver(refresh)
-      const availability = new MutationObserver(refresh)
-      availability.observe(document.documentElement, {
-        subtree: true,
-        attributeFilter: ["disabled", "aria-disabled", "inert"],
-      })
+      const controls = new MutationObserver(refresh)
+      for (const toggle of toggles) {
+        for (
+          let element: Element | null = toggle;
+          element;
+          element = element.parentElement
+        ) {
+          if (element.hasAttribute("data-marquee-control")) continue
+          controls.observe(element, {
+            attributeFilter: [
+              "class",
+              "style",
+              "hidden",
+              "disabled",
+              "aria-disabled",
+              "inert",
+            ],
+          })
+          if (root.contains(element)) observer.observe(element)
+        }
+      }
       for (const row of rows) {
         observer.observe(row.viewport)
         for (const item of row.viewport.firstElementChild?.children ?? [])
@@ -227,7 +255,7 @@ const {
       instances.set(root, () => {
         cancelAnimationFrame(frame)
         observer.disconnect()
-        availability.disconnect()
+        controls.disconnect()
         reducedMotion.removeEventListener("change", onMotionChange)
         root.removeEventListener("focusin", onFocusIn)
         for (const row of rows) {

From 6304ae8909d3d78ca617c2a95848a929acf118b4 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 18:27:47 +0200
Subject: [PATCH 55/60] Regenerate registry for the Marquee toggle visibility
 fix

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 public/r/marquee.json                  | 4 ++--
 public/r/styles/base-luma/marquee.json | 4 ++--
 public/r/styles/base-lyra/marquee.json | 4 ++--
 public/r/styles/base-maia/marquee.json | 4 ++--
 public/r/styles/base-mira/marquee.json | 4 ++--
 public/r/styles/base-nova/marquee.json | 4 ++--
 public/r/styles/base-rhea/marquee.json | 4 ++--
 public/r/styles/base-sera/marquee.json | 4 ++--
 public/r/styles/base-vega/marquee.json | 4 ++--
 9 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/public/r/marquee.json b/public/r/marquee.json
index c5354ee8d..81916aedd 100644
--- a/public/r/marquee.json
+++ b/public/r/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides the toggle itself while no row moves, so visibility is read from its\n  // parent, where the caller's hiding applies.\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    toggle.parentElement !== null &&\n    visible(toggle.parentElement)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits or a toggle hidden at a breakpoint, and\n      // when a toggle is disabled or made inert.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const availability = new MutationObserver(refresh)\n      availability.observe(document.documentElement, {\n        subtree: true,\n        attributeFilter: [\"disabled\", \"aria-disabled\", \"inert\"],\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        availability.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides a toggle through its private wrapper, so visibility is read from the\n  // button's own styles and from the wrapper's parent.\n  const shown = (toggle: HTMLButtonElement) => {\n    const style = getComputedStyle(toggle)\n    const outside = toggle.closest(\"[data-marquee-control]\")?.parentElement\n    return (\n      style.display !== \"none\" &&\n      style.visibility !== \"hidden\" &&\n      outside != null &&\n      visible(outside)\n    )\n  }\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    shown(toggle)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          const control = toggle.closest<HTMLElement>(\"[data-marquee-control]\")\n          if (control && control.hidden !== (moving.length === 0))\n            control.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits, and when a toggle can no longer be\n      // pressed or seen. That covers changes to the toggle and its ancestors,\n      // and breakpoints that hide the toggle or its container.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const controls = new MutationObserver(refresh)\n      for (const toggle of toggles) {\n        for (\n          let element: Element | null = toggle;\n          element;\n          element = element.parentElement\n        ) {\n          if (element.hasAttribute(\"data-marquee-control\")) continue\n          controls.observe(element, {\n            attributeFilter: [\n              \"class\",\n              \"style\",\n              \"hidden\",\n              \"disabled\",\n              \"aria-disabled\",\n              \"inert\",\n            ],\n          })\n          if (root.contains(element)) observer.observe(element)\n        }\n      }\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        controls.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "src/components/ui/marquee/marquee-toggle.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  hidden\n  data-slot={dataSlot}\n  data-marquee-toggle\n  data-state=\"playing\"\n  data-play-label={playLabel}\n  data-pause-label={pauseLabel}\n  data-variant={variant}\n  data-size={size}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"group/marquee-toggle\",\n    className\n  )}\n  {...props}\n>\n  <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n  <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n  <span class=\"sr-only\" data-marquee-label>\n    {pauseLabel}\n  </span>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n\n// The marquee shows and hides the toggle through its wrapper, so the button's\n// own hidden attribute, class and style stay the caller's.\n---\n\n<span data-marquee-control hidden class=\"contents\">\n  <button\n    type=\"button\"\n    data-slot={dataSlot}\n    data-marquee-toggle\n    data-state=\"playing\"\n    data-play-label={playLabel}\n    data-pause-label={pauseLabel}\n    data-variant={variant}\n    data-size={size}\n    class={cn(\n      buttonVariants({ variant, size }),\n      \"group/marquee-toggle\",\n      className\n    )}\n    {...props}\n  >\n    <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n    <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n    <span class=\"sr-only\" data-marquee-label>\n      {pauseLabel}\n    </span>\n  </button>\n</span>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-luma/marquee.json b/public/r/styles/base-luma/marquee.json
index c5354ee8d..81916aedd 100644
--- a/public/r/styles/base-luma/marquee.json
+++ b/public/r/styles/base-luma/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides the toggle itself while no row moves, so visibility is read from its\n  // parent, where the caller's hiding applies.\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    toggle.parentElement !== null &&\n    visible(toggle.parentElement)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits or a toggle hidden at a breakpoint, and\n      // when a toggle is disabled or made inert.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const availability = new MutationObserver(refresh)\n      availability.observe(document.documentElement, {\n        subtree: true,\n        attributeFilter: [\"disabled\", \"aria-disabled\", \"inert\"],\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        availability.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides a toggle through its private wrapper, so visibility is read from the\n  // button's own styles and from the wrapper's parent.\n  const shown = (toggle: HTMLButtonElement) => {\n    const style = getComputedStyle(toggle)\n    const outside = toggle.closest(\"[data-marquee-control]\")?.parentElement\n    return (\n      style.display !== \"none\" &&\n      style.visibility !== \"hidden\" &&\n      outside != null &&\n      visible(outside)\n    )\n  }\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    shown(toggle)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          const control = toggle.closest<HTMLElement>(\"[data-marquee-control]\")\n          if (control && control.hidden !== (moving.length === 0))\n            control.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits, and when a toggle can no longer be\n      // pressed or seen. That covers changes to the toggle and its ancestors,\n      // and breakpoints that hide the toggle or its container.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const controls = new MutationObserver(refresh)\n      for (const toggle of toggles) {\n        for (\n          let element: Element | null = toggle;\n          element;\n          element = element.parentElement\n        ) {\n          if (element.hasAttribute(\"data-marquee-control\")) continue\n          controls.observe(element, {\n            attributeFilter: [\n              \"class\",\n              \"style\",\n              \"hidden\",\n              \"disabled\",\n              \"aria-disabled\",\n              \"inert\",\n            ],\n          })\n          if (root.contains(element)) observer.observe(element)\n        }\n      }\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        controls.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "src/components/ui/marquee/marquee-toggle.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  hidden\n  data-slot={dataSlot}\n  data-marquee-toggle\n  data-state=\"playing\"\n  data-play-label={playLabel}\n  data-pause-label={pauseLabel}\n  data-variant={variant}\n  data-size={size}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"group/marquee-toggle\",\n    className\n  )}\n  {...props}\n>\n  <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n  <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n  <span class=\"sr-only\" data-marquee-label>\n    {pauseLabel}\n  </span>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n\n// The marquee shows and hides the toggle through its wrapper, so the button's\n// own hidden attribute, class and style stay the caller's.\n---\n\n<span data-marquee-control hidden class=\"contents\">\n  <button\n    type=\"button\"\n    data-slot={dataSlot}\n    data-marquee-toggle\n    data-state=\"playing\"\n    data-play-label={playLabel}\n    data-pause-label={pauseLabel}\n    data-variant={variant}\n    data-size={size}\n    class={cn(\n      buttonVariants({ variant, size }),\n      \"group/marquee-toggle\",\n      className\n    )}\n    {...props}\n  >\n    <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n    <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n    <span class=\"sr-only\" data-marquee-label>\n      {pauseLabel}\n    </span>\n  </button>\n</span>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-lyra/marquee.json b/public/r/styles/base-lyra/marquee.json
index c5354ee8d..81916aedd 100644
--- a/public/r/styles/base-lyra/marquee.json
+++ b/public/r/styles/base-lyra/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides the toggle itself while no row moves, so visibility is read from its\n  // parent, where the caller's hiding applies.\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    toggle.parentElement !== null &&\n    visible(toggle.parentElement)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits or a toggle hidden at a breakpoint, and\n      // when a toggle is disabled or made inert.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const availability = new MutationObserver(refresh)\n      availability.observe(document.documentElement, {\n        subtree: true,\n        attributeFilter: [\"disabled\", \"aria-disabled\", \"inert\"],\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        availability.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides a toggle through its private wrapper, so visibility is read from the\n  // button's own styles and from the wrapper's parent.\n  const shown = (toggle: HTMLButtonElement) => {\n    const style = getComputedStyle(toggle)\n    const outside = toggle.closest(\"[data-marquee-control]\")?.parentElement\n    return (\n      style.display !== \"none\" &&\n      style.visibility !== \"hidden\" &&\n      outside != null &&\n      visible(outside)\n    )\n  }\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    shown(toggle)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          const control = toggle.closest<HTMLElement>(\"[data-marquee-control]\")\n          if (control && control.hidden !== (moving.length === 0))\n            control.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits, and when a toggle can no longer be\n      // pressed or seen. That covers changes to the toggle and its ancestors,\n      // and breakpoints that hide the toggle or its container.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const controls = new MutationObserver(refresh)\n      for (const toggle of toggles) {\n        for (\n          let element: Element | null = toggle;\n          element;\n          element = element.parentElement\n        ) {\n          if (element.hasAttribute(\"data-marquee-control\")) continue\n          controls.observe(element, {\n            attributeFilter: [\n              \"class\",\n              \"style\",\n              \"hidden\",\n              \"disabled\",\n              \"aria-disabled\",\n              \"inert\",\n            ],\n          })\n          if (root.contains(element)) observer.observe(element)\n        }\n      }\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        controls.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "src/components/ui/marquee/marquee-toggle.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  hidden\n  data-slot={dataSlot}\n  data-marquee-toggle\n  data-state=\"playing\"\n  data-play-label={playLabel}\n  data-pause-label={pauseLabel}\n  data-variant={variant}\n  data-size={size}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"group/marquee-toggle\",\n    className\n  )}\n  {...props}\n>\n  <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n  <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n  <span class=\"sr-only\" data-marquee-label>\n    {pauseLabel}\n  </span>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n\n// The marquee shows and hides the toggle through its wrapper, so the button's\n// own hidden attribute, class and style stay the caller's.\n---\n\n<span data-marquee-control hidden class=\"contents\">\n  <button\n    type=\"button\"\n    data-slot={dataSlot}\n    data-marquee-toggle\n    data-state=\"playing\"\n    data-play-label={playLabel}\n    data-pause-label={pauseLabel}\n    data-variant={variant}\n    data-size={size}\n    class={cn(\n      buttonVariants({ variant, size }),\n      \"group/marquee-toggle\",\n      className\n    )}\n    {...props}\n  >\n    <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n    <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n    <span class=\"sr-only\" data-marquee-label>\n      {pauseLabel}\n    </span>\n  </button>\n</span>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-maia/marquee.json b/public/r/styles/base-maia/marquee.json
index c5354ee8d..81916aedd 100644
--- a/public/r/styles/base-maia/marquee.json
+++ b/public/r/styles/base-maia/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides the toggle itself while no row moves, so visibility is read from its\n  // parent, where the caller's hiding applies.\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    toggle.parentElement !== null &&\n    visible(toggle.parentElement)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits or a toggle hidden at a breakpoint, and\n      // when a toggle is disabled or made inert.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const availability = new MutationObserver(refresh)\n      availability.observe(document.documentElement, {\n        subtree: true,\n        attributeFilter: [\"disabled\", \"aria-disabled\", \"inert\"],\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        availability.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides a toggle through its private wrapper, so visibility is read from the\n  // button's own styles and from the wrapper's parent.\n  const shown = (toggle: HTMLButtonElement) => {\n    const style = getComputedStyle(toggle)\n    const outside = toggle.closest(\"[data-marquee-control]\")?.parentElement\n    return (\n      style.display !== \"none\" &&\n      style.visibility !== \"hidden\" &&\n      outside != null &&\n      visible(outside)\n    )\n  }\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    shown(toggle)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          const control = toggle.closest<HTMLElement>(\"[data-marquee-control]\")\n          if (control && control.hidden !== (moving.length === 0))\n            control.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits, and when a toggle can no longer be\n      // pressed or seen. That covers changes to the toggle and its ancestors,\n      // and breakpoints that hide the toggle or its container.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const controls = new MutationObserver(refresh)\n      for (const toggle of toggles) {\n        for (\n          let element: Element | null = toggle;\n          element;\n          element = element.parentElement\n        ) {\n          if (element.hasAttribute(\"data-marquee-control\")) continue\n          controls.observe(element, {\n            attributeFilter: [\n              \"class\",\n              \"style\",\n              \"hidden\",\n              \"disabled\",\n              \"aria-disabled\",\n              \"inert\",\n            ],\n          })\n          if (root.contains(element)) observer.observe(element)\n        }\n      }\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        controls.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "src/components/ui/marquee/marquee-toggle.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  hidden\n  data-slot={dataSlot}\n  data-marquee-toggle\n  data-state=\"playing\"\n  data-play-label={playLabel}\n  data-pause-label={pauseLabel}\n  data-variant={variant}\n  data-size={size}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"group/marquee-toggle\",\n    className\n  )}\n  {...props}\n>\n  <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n  <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n  <span class=\"sr-only\" data-marquee-label>\n    {pauseLabel}\n  </span>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n\n// The marquee shows and hides the toggle through its wrapper, so the button's\n// own hidden attribute, class and style stay the caller's.\n---\n\n<span data-marquee-control hidden class=\"contents\">\n  <button\n    type=\"button\"\n    data-slot={dataSlot}\n    data-marquee-toggle\n    data-state=\"playing\"\n    data-play-label={playLabel}\n    data-pause-label={pauseLabel}\n    data-variant={variant}\n    data-size={size}\n    class={cn(\n      buttonVariants({ variant, size }),\n      \"group/marquee-toggle\",\n      className\n    )}\n    {...props}\n  >\n    <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n    <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n    <span class=\"sr-only\" data-marquee-label>\n      {pauseLabel}\n    </span>\n  </button>\n</span>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-mira/marquee.json b/public/r/styles/base-mira/marquee.json
index c5354ee8d..81916aedd 100644
--- a/public/r/styles/base-mira/marquee.json
+++ b/public/r/styles/base-mira/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides the toggle itself while no row moves, so visibility is read from its\n  // parent, where the caller's hiding applies.\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    toggle.parentElement !== null &&\n    visible(toggle.parentElement)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits or a toggle hidden at a breakpoint, and\n      // when a toggle is disabled or made inert.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const availability = new MutationObserver(refresh)\n      availability.observe(document.documentElement, {\n        subtree: true,\n        attributeFilter: [\"disabled\", \"aria-disabled\", \"inert\"],\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        availability.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides a toggle through its private wrapper, so visibility is read from the\n  // button's own styles and from the wrapper's parent.\n  const shown = (toggle: HTMLButtonElement) => {\n    const style = getComputedStyle(toggle)\n    const outside = toggle.closest(\"[data-marquee-control]\")?.parentElement\n    return (\n      style.display !== \"none\" &&\n      style.visibility !== \"hidden\" &&\n      outside != null &&\n      visible(outside)\n    )\n  }\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    shown(toggle)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          const control = toggle.closest<HTMLElement>(\"[data-marquee-control]\")\n          if (control && control.hidden !== (moving.length === 0))\n            control.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits, and when a toggle can no longer be\n      // pressed or seen. That covers changes to the toggle and its ancestors,\n      // and breakpoints that hide the toggle or its container.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const controls = new MutationObserver(refresh)\n      for (const toggle of toggles) {\n        for (\n          let element: Element | null = toggle;\n          element;\n          element = element.parentElement\n        ) {\n          if (element.hasAttribute(\"data-marquee-control\")) continue\n          controls.observe(element, {\n            attributeFilter: [\n              \"class\",\n              \"style\",\n              \"hidden\",\n              \"disabled\",\n              \"aria-disabled\",\n              \"inert\",\n            ],\n          })\n          if (root.contains(element)) observer.observe(element)\n        }\n      }\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        controls.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "src/components/ui/marquee/marquee-toggle.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  hidden\n  data-slot={dataSlot}\n  data-marquee-toggle\n  data-state=\"playing\"\n  data-play-label={playLabel}\n  data-pause-label={pauseLabel}\n  data-variant={variant}\n  data-size={size}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"group/marquee-toggle\",\n    className\n  )}\n  {...props}\n>\n  <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n  <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n  <span class=\"sr-only\" data-marquee-label>\n    {pauseLabel}\n  </span>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n\n// The marquee shows and hides the toggle through its wrapper, so the button's\n// own hidden attribute, class and style stay the caller's.\n---\n\n<span data-marquee-control hidden class=\"contents\">\n  <button\n    type=\"button\"\n    data-slot={dataSlot}\n    data-marquee-toggle\n    data-state=\"playing\"\n    data-play-label={playLabel}\n    data-pause-label={pauseLabel}\n    data-variant={variant}\n    data-size={size}\n    class={cn(\n      buttonVariants({ variant, size }),\n      \"group/marquee-toggle\",\n      className\n    )}\n    {...props}\n  >\n    <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n    <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n    <span class=\"sr-only\" data-marquee-label>\n      {pauseLabel}\n    </span>\n  </button>\n</span>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-nova/marquee.json b/public/r/styles/base-nova/marquee.json
index c5354ee8d..81916aedd 100644
--- a/public/r/styles/base-nova/marquee.json
+++ b/public/r/styles/base-nova/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides the toggle itself while no row moves, so visibility is read from its\n  // parent, where the caller's hiding applies.\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    toggle.parentElement !== null &&\n    visible(toggle.parentElement)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits or a toggle hidden at a breakpoint, and\n      // when a toggle is disabled or made inert.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const availability = new MutationObserver(refresh)\n      availability.observe(document.documentElement, {\n        subtree: true,\n        attributeFilter: [\"disabled\", \"aria-disabled\", \"inert\"],\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        availability.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides a toggle through its private wrapper, so visibility is read from the\n  // button's own styles and from the wrapper's parent.\n  const shown = (toggle: HTMLButtonElement) => {\n    const style = getComputedStyle(toggle)\n    const outside = toggle.closest(\"[data-marquee-control]\")?.parentElement\n    return (\n      style.display !== \"none\" &&\n      style.visibility !== \"hidden\" &&\n      outside != null &&\n      visible(outside)\n    )\n  }\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    shown(toggle)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          const control = toggle.closest<HTMLElement>(\"[data-marquee-control]\")\n          if (control && control.hidden !== (moving.length === 0))\n            control.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits, and when a toggle can no longer be\n      // pressed or seen. That covers changes to the toggle and its ancestors,\n      // and breakpoints that hide the toggle or its container.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const controls = new MutationObserver(refresh)\n      for (const toggle of toggles) {\n        for (\n          let element: Element | null = toggle;\n          element;\n          element = element.parentElement\n        ) {\n          if (element.hasAttribute(\"data-marquee-control\")) continue\n          controls.observe(element, {\n            attributeFilter: [\n              \"class\",\n              \"style\",\n              \"hidden\",\n              \"disabled\",\n              \"aria-disabled\",\n              \"inert\",\n            ],\n          })\n          if (root.contains(element)) observer.observe(element)\n        }\n      }\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        controls.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "src/components/ui/marquee/marquee-toggle.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  hidden\n  data-slot={dataSlot}\n  data-marquee-toggle\n  data-state=\"playing\"\n  data-play-label={playLabel}\n  data-pause-label={pauseLabel}\n  data-variant={variant}\n  data-size={size}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"group/marquee-toggle\",\n    className\n  )}\n  {...props}\n>\n  <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n  <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n  <span class=\"sr-only\" data-marquee-label>\n    {pauseLabel}\n  </span>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n\n// The marquee shows and hides the toggle through its wrapper, so the button's\n// own hidden attribute, class and style stay the caller's.\n---\n\n<span data-marquee-control hidden class=\"contents\">\n  <button\n    type=\"button\"\n    data-slot={dataSlot}\n    data-marquee-toggle\n    data-state=\"playing\"\n    data-play-label={playLabel}\n    data-pause-label={pauseLabel}\n    data-variant={variant}\n    data-size={size}\n    class={cn(\n      buttonVariants({ variant, size }),\n      \"group/marquee-toggle\",\n      className\n    )}\n    {...props}\n  >\n    <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n    <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n    <span class=\"sr-only\" data-marquee-label>\n      {pauseLabel}\n    </span>\n  </button>\n</span>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-rhea/marquee.json b/public/r/styles/base-rhea/marquee.json
index c5354ee8d..81916aedd 100644
--- a/public/r/styles/base-rhea/marquee.json
+++ b/public/r/styles/base-rhea/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides the toggle itself while no row moves, so visibility is read from its\n  // parent, where the caller's hiding applies.\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    toggle.parentElement !== null &&\n    visible(toggle.parentElement)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits or a toggle hidden at a breakpoint, and\n      // when a toggle is disabled or made inert.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const availability = new MutationObserver(refresh)\n      availability.observe(document.documentElement, {\n        subtree: true,\n        attributeFilter: [\"disabled\", \"aria-disabled\", \"inert\"],\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        availability.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides a toggle through its private wrapper, so visibility is read from the\n  // button's own styles and from the wrapper's parent.\n  const shown = (toggle: HTMLButtonElement) => {\n    const style = getComputedStyle(toggle)\n    const outside = toggle.closest(\"[data-marquee-control]\")?.parentElement\n    return (\n      style.display !== \"none\" &&\n      style.visibility !== \"hidden\" &&\n      outside != null &&\n      visible(outside)\n    )\n  }\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    shown(toggle)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          const control = toggle.closest<HTMLElement>(\"[data-marquee-control]\")\n          if (control && control.hidden !== (moving.length === 0))\n            control.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits, and when a toggle can no longer be\n      // pressed or seen. That covers changes to the toggle and its ancestors,\n      // and breakpoints that hide the toggle or its container.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const controls = new MutationObserver(refresh)\n      for (const toggle of toggles) {\n        for (\n          let element: Element | null = toggle;\n          element;\n          element = element.parentElement\n        ) {\n          if (element.hasAttribute(\"data-marquee-control\")) continue\n          controls.observe(element, {\n            attributeFilter: [\n              \"class\",\n              \"style\",\n              \"hidden\",\n              \"disabled\",\n              \"aria-disabled\",\n              \"inert\",\n            ],\n          })\n          if (root.contains(element)) observer.observe(element)\n        }\n      }\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        controls.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "src/components/ui/marquee/marquee-toggle.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  hidden\n  data-slot={dataSlot}\n  data-marquee-toggle\n  data-state=\"playing\"\n  data-play-label={playLabel}\n  data-pause-label={pauseLabel}\n  data-variant={variant}\n  data-size={size}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"group/marquee-toggle\",\n    className\n  )}\n  {...props}\n>\n  <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n  <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n  <span class=\"sr-only\" data-marquee-label>\n    {pauseLabel}\n  </span>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n\n// The marquee shows and hides the toggle through its wrapper, so the button's\n// own hidden attribute, class and style stay the caller's.\n---\n\n<span data-marquee-control hidden class=\"contents\">\n  <button\n    type=\"button\"\n    data-slot={dataSlot}\n    data-marquee-toggle\n    data-state=\"playing\"\n    data-play-label={playLabel}\n    data-pause-label={pauseLabel}\n    data-variant={variant}\n    data-size={size}\n    class={cn(\n      buttonVariants({ variant, size }),\n      \"group/marquee-toggle\",\n      className\n    )}\n    {...props}\n  >\n    <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n    <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n    <span class=\"sr-only\" data-marquee-label>\n      {pauseLabel}\n    </span>\n  </button>\n</span>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-sera/marquee.json b/public/r/styles/base-sera/marquee.json
index c5354ee8d..81916aedd 100644
--- a/public/r/styles/base-sera/marquee.json
+++ b/public/r/styles/base-sera/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides the toggle itself while no row moves, so visibility is read from its\n  // parent, where the caller's hiding applies.\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    toggle.parentElement !== null &&\n    visible(toggle.parentElement)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits or a toggle hidden at a breakpoint, and\n      // when a toggle is disabled or made inert.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const availability = new MutationObserver(refresh)\n      availability.observe(document.documentElement, {\n        subtree: true,\n        attributeFilter: [\"disabled\", \"aria-disabled\", \"inert\"],\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        availability.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides a toggle through its private wrapper, so visibility is read from the\n  // button's own styles and from the wrapper's parent.\n  const shown = (toggle: HTMLButtonElement) => {\n    const style = getComputedStyle(toggle)\n    const outside = toggle.closest(\"[data-marquee-control]\")?.parentElement\n    return (\n      style.display !== \"none\" &&\n      style.visibility !== \"hidden\" &&\n      outside != null &&\n      visible(outside)\n    )\n  }\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    shown(toggle)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          const control = toggle.closest<HTMLElement>(\"[data-marquee-control]\")\n          if (control && control.hidden !== (moving.length === 0))\n            control.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits, and when a toggle can no longer be\n      // pressed or seen. That covers changes to the toggle and its ancestors,\n      // and breakpoints that hide the toggle or its container.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const controls = new MutationObserver(refresh)\n      for (const toggle of toggles) {\n        for (\n          let element: Element | null = toggle;\n          element;\n          element = element.parentElement\n        ) {\n          if (element.hasAttribute(\"data-marquee-control\")) continue\n          controls.observe(element, {\n            attributeFilter: [\n              \"class\",\n              \"style\",\n              \"hidden\",\n              \"disabled\",\n              \"aria-disabled\",\n              \"inert\",\n            ],\n          })\n          if (root.contains(element)) observer.observe(element)\n        }\n      }\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        controls.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "src/components/ui/marquee/marquee-toggle.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  hidden\n  data-slot={dataSlot}\n  data-marquee-toggle\n  data-state=\"playing\"\n  data-play-label={playLabel}\n  data-pause-label={pauseLabel}\n  data-variant={variant}\n  data-size={size}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"group/marquee-toggle\",\n    className\n  )}\n  {...props}\n>\n  <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n  <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n  <span class=\"sr-only\" data-marquee-label>\n    {pauseLabel}\n  </span>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n\n// The marquee shows and hides the toggle through its wrapper, so the button's\n// own hidden attribute, class and style stay the caller's.\n---\n\n<span data-marquee-control hidden class=\"contents\">\n  <button\n    type=\"button\"\n    data-slot={dataSlot}\n    data-marquee-toggle\n    data-state=\"playing\"\n    data-play-label={playLabel}\n    data-pause-label={pauseLabel}\n    data-variant={variant}\n    data-size={size}\n    class={cn(\n      buttonVariants({ variant, size }),\n      \"group/marquee-toggle\",\n      className\n    )}\n    {...props}\n  >\n    <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n    <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n    <span class=\"sr-only\" data-marquee-label>\n      {pauseLabel}\n    </span>\n  </button>\n</span>\n",
       "type": "registry:ui"
     },
     {
diff --git a/public/r/styles/base-vega/marquee.json b/public/r/styles/base-vega/marquee.json
index c5354ee8d..81916aedd 100644
--- a/public/r/styles/base-vega/marquee.json
+++ b/public/r/styles/base-vega/marquee.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides the toggle itself while no row moves, so visibility is read from its\n  // parent, where the caller's hiding applies.\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    toggle.parentElement !== null &&\n    visible(toggle.parentElement)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          toggle.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits or a toggle hidden at a breakpoint, and\n      // when a toggle is disabled or made inert.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const availability = new MutationObserver(refresh)\n      availability.observe(document.documentElement, {\n        subtree: true,\n        attributeFilter: [\"disabled\", \"aria-disabled\", \"inert\"],\n      })\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        availability.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"marquee\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot={dataSlot}\n  data-marquee\n  class={cn(\"relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, { type EmblaCarouselType } from \"embla-carousel\"\n  import AutoScroll, { type AutoScrollType } from \"embla-carousel-auto-scroll\"\n\n  type Row = {\n    viewport: HTMLElement\n    // Whether the caller left tabindex to the marquee.\n    ownTabIndex: boolean\n    api?: EmblaCarouselType\n    autoScroll?: AutoScrollType\n  }\n\n  // The data-marquee* markers stay in place when a caller overrides data-slot.\n  const rootSelector = \"[data-marquee]\"\n  const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n  const instances = new Map<HTMLElement, () => void>()\n\n  // A nested marquee owns its own parts.\n  const getParts = <T extends Element>(root: HTMLElement, selector: string) =>\n    [...root.querySelectorAll<T>(selector)].filter(\n      (part) => part.closest(rootSelector) === root\n    )\n\n  const focusableSelector =\n    \"a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable], [tabindex]\"\n  const visible = (element: Element) =>\n    element.checkVisibility?.({ visibilityProperty: true }) ??\n    element.getClientRects().length > 0\n  // A toggle is a pause control when it can be pressed and seen. The marquee\n  // hides a toggle through its private wrapper, so visibility is read from the\n  // button's own styles and from the wrapper's parent.\n  const shown = (toggle: HTMLButtonElement) => {\n    const style = getComputedStyle(toggle)\n    const outside = toggle.closest(\"[data-marquee-control]\")?.parentElement\n    return (\n      style.display !== \"none\" &&\n      style.visibility !== \"hidden\" &&\n      outside != null &&\n      visible(outside)\n    )\n  }\n  const usable = (toggle: HTMLButtonElement) =>\n    !toggle.matches(\":disabled\") &&\n    toggle.getAttribute(\"aria-disabled\") !== \"true\" &&\n    !toggle.closest(\"[inert]\") &&\n    shown(toggle)\n  const reachable = (element: HTMLElement) =>\n    element.tabIndex >= 0 &&\n    !element.matches(\":disabled\") &&\n    !element.closest(\"[inert]\") &&\n    visible(element)\n\n  // Embla turns loop off when the slides are too few to fill the viewport.\n  const loops = (api: EmblaCarouselType) =>\n    api.internalEngine().options.loop && api.scrollSnapList().length > 1\n\n  const initialize = () => {\n    for (const root of document.querySelectorAll<HTMLElement>(rootSelector)) {\n      if (instances.has(root)) continue\n      const toggles = getParts<HTMLButtonElement>(root, \"[data-marquee-toggle]\")\n      const rows: Row[] = getParts<HTMLElement>(\n        root,\n        \"[data-marquee-viewport]\"\n      ).map((viewport) => ({\n        viewport,\n        ownTabIndex: !viewport.hasAttribute(\"tabindex\"),\n      }))\n      // Moving content needs a way to pause it, so a marquee without an\n      // enabled toggle stays static. Focus, dragging and the toggle pause it until the toggle\n      // plays it again; hovering a row pauses it only while the pointer is\n      // over it.\n      let playing = true\n      let hovered = false\n\n      const sync = () => {\n        const moving = rows.filter((row) => row.autoScroll)\n        for (const row of moving) {\n          if (playing && !hovered) row.autoScroll?.play()\n          else row.autoScroll?.stop()\n        }\n        for (const toggle of toggles) {\n          const control = toggle.closest<HTMLElement>(\"[data-marquee-control]\")\n          if (control && control.hidden !== (moving.length === 0))\n            control.hidden = moving.length === 0\n          toggle.dataset.state = playing ? \"playing\" : \"paused\"\n          const label = toggle.querySelector(\"[data-marquee-label]\")\n          if (label)\n            label.textContent =\n              (playing\n                ? toggle.dataset.pauseLabel\n                : toggle.dataset.playLabel) ?? \"\"\n        }\n      }\n\n      const stop = (row: Row) => {\n        row.api?.destroy()\n        row.api = undefined\n        row.autoScroll = undefined\n        delete row.viewport.dataset.active\n        // A static row scrolls natively; give it a tab stop when it overflows\n        // and has no reachable content of its own.\n        if (!row.ownTabIndex) return\n        const overflows = row.viewport.scrollWidth > row.viewport.clientWidth\n        const focusable = [\n          ...row.viewport.querySelectorAll<HTMLElement>(focusableSelector),\n        ].some(reachable)\n        if (overflows && !focusable) row.viewport.tabIndex = 0\n        else row.viewport.removeAttribute(\"tabindex\")\n      }\n\n      const evaluate = (row: Row) => {\n        if (reducedMotion.matches || !toggles.some(usable)) return stop(row)\n        if (row.api) return\n        row.viewport.scrollLeft = 0\n        const autoScroll = AutoScroll({\n          speed: 1,\n          startDelay: 0,\n          playOnInit: false,\n          stopOnFocusIn: false,\n          stopOnInteraction: true,\n          direction: row.viewport.hasAttribute(\"data-reverse\")\n            ? \"backward\"\n            : \"forward\",\n        })\n        const api = EmblaCarousel(\n          row.viewport,\n          {\n            loop: true,\n            dragFree: true,\n            direction:\n              getComputedStyle(row.viewport).direction === \"rtl\"\n                ? \"rtl\"\n                : \"ltr\",\n          },\n          [autoScroll]\n        )\n        if (!loops(api)) {\n          api.destroy()\n          return stop(row)\n        }\n        row.api = api\n        row.autoScroll = autoScroll\n        row.viewport.dataset.active = \"\"\n        if (row.ownTabIndex) row.viewport.removeAttribute(\"tabindex\")\n        api.on(\"pointerDown\", () => {\n          playing = false\n          sync()\n        })\n        api.on(\"reInit\", () => {\n          if (!loops(api)) stop(row)\n          sync()\n        })\n      }\n\n      // Rows start or stop when their size changes, such as a static row\n      // whose content no longer fits, and when a toggle can no longer be\n      // pressed or seen. That covers changes to the toggle and its ancestors,\n      // and breakpoints that hide the toggle or its container.\n      let frame = 0\n      const refresh = () => {\n        cancelAnimationFrame(frame)\n        frame = requestAnimationFrame(() => {\n          for (const row of rows) evaluate(row)\n          sync()\n        })\n      }\n      const observer = new ResizeObserver(refresh)\n      const controls = new MutationObserver(refresh)\n      for (const toggle of toggles) {\n        for (\n          let element: Element | null = toggle;\n          element;\n          element = element.parentElement\n        ) {\n          if (element.hasAttribute(\"data-marquee-control\")) continue\n          controls.observe(element, {\n            attributeFilter: [\n              \"class\",\n              \"style\",\n              \"hidden\",\n              \"disabled\",\n              \"aria-disabled\",\n              \"inert\",\n            ],\n          })\n          if (root.contains(element)) observer.observe(element)\n        }\n      }\n      for (const row of rows) {\n        observer.observe(row.viewport)\n        for (const item of row.viewport.firstElementChild?.children ?? [])\n          observer.observe(item)\n      }\n\n      const onMotionChange = () => {\n        for (const row of rows) evaluate(row)\n        sync()\n      }\n      const onFocusIn = (event: FocusEvent) => {\n        if (\n          event.target instanceof Element &&\n          event.target.closest(\"[data-marquee-toggle]\")\n        )\n          return\n        playing = false\n        sync()\n      }\n      const onPointerEnter = (event: PointerEvent) => {\n        if (event.pointerType !== \"mouse\") return\n        hovered = true\n        sync()\n      }\n      const onPointerLeave = () => {\n        hovered = false\n        sync()\n      }\n      const onToggle = () => {\n        playing = !playing\n        sync()\n      }\n\n      reducedMotion.addEventListener(\"change\", onMotionChange)\n      root.addEventListener(\"focusin\", onFocusIn)\n      for (const row of rows) {\n        row.viewport.addEventListener(\"pointerenter\", onPointerEnter)\n        row.viewport.addEventListener(\"pointerleave\", onPointerLeave)\n      }\n      for (const toggle of toggles) toggle.addEventListener(\"click\", onToggle)\n      for (const row of rows) evaluate(row)\n      sync()\n\n      instances.set(root, () => {\n        cancelAnimationFrame(frame)\n        observer.disconnect()\n        controls.disconnect()\n        reducedMotion.removeEventListener(\"change\", onMotionChange)\n        root.removeEventListener(\"focusin\", onFocusIn)\n        for (const row of rows) {\n          row.viewport.removeEventListener(\"pointerenter\", onPointerEnter)\n          row.viewport.removeEventListener(\"pointerleave\", onPointerLeave)\n        }\n        for (const toggle of toggles)\n          toggle.removeEventListener(\"click\", onToggle)\n        for (const row of rows) row.api?.destroy()\n      })\n    }\n  }\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const cleanup of instances.values()) cleanup()\n    instances.clear()\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "src/components/ui/marquee/marquee-toggle.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  hidden\n  data-slot={dataSlot}\n  data-marquee-toggle\n  data-state=\"playing\"\n  data-play-label={playLabel}\n  data-pause-label={pauseLabel}\n  data-variant={variant}\n  data-size={size}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"group/marquee-toggle\",\n    className\n  )}\n  {...props}\n>\n  <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n  <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n  <span class=\"sr-only\" data-marquee-label>\n    {pauseLabel}\n  </span>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport PauseIcon from \"@lucide/astro/icons/pause\"\nimport PlayIcon from \"@lucide/astro/icons/play\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> &\n  ButtonVariantProps & {\n    playLabel: string\n    pauseLabel: string\n  }\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  playLabel,\n  pauseLabel,\n  \"data-slot\": dataSlot = \"marquee-toggle\",\n  ...props\n} = Astro.props\n\n// The marquee shows and hides the toggle through its wrapper, so the button's\n// own hidden attribute, class and style stay the caller's.\n---\n\n<span data-marquee-control hidden class=\"contents\">\n  <button\n    type=\"button\"\n    data-slot={dataSlot}\n    data-marquee-toggle\n    data-state=\"playing\"\n    data-play-label={playLabel}\n    data-pause-label={pauseLabel}\n    data-variant={variant}\n    data-size={size}\n    class={cn(\n      buttonVariants({ variant, size }),\n      \"group/marquee-toggle\",\n      className\n    )}\n    {...props}\n  >\n    <PauseIcon class=\"group-data-[state=paused]/marquee-toggle:hidden\" />\n    <PlayIcon class=\"hidden group-data-[state=paused]/marquee-toggle:block\" />\n    <span class=\"sr-only\" data-marquee-label>\n      {pauseLabel}\n    </span>\n  </button>\n</span>\n",
       "type": "registry:ui"
     },
     {

From 2a13f2c8ef072a61abba728422b2b6458ca5c0ea Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 18:29:22 +0200
Subject: [PATCH 56/60] Set foreground text on the dark Hero4, Hero9 and CTA4
 sections

These sections switch to the dark theme variables but inherited the page's text color, so the Hero4 and Hero9 checklists and the CTA4 outline link were dark on dark under a light page.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/blocks/cta-4.astro  | 2 +-
 src/components/blocks/hero-4.astro | 5 ++++-
 src/components/blocks/hero-9.astro | 2 +-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/blocks/cta-4.astro b/src/components/blocks/cta-4.astro
index dc69ab41c..f65f2d40e 100644
--- a/src/components/blocks/cta-4.astro
+++ b/src/components/blocks/cta-4.astro
@@ -54,7 +54,7 @@ const {
 
 <Section
   variant="floating"
-  class={cn("dark bg-background overflow-hidden", className)}
+  class={cn("dark bg-background text-foreground overflow-hidden", className)}
   {...props}
 >
   <Image
diff --git a/src/components/blocks/hero-4.astro b/src/components/blocks/hero-4.astro
index 4f7a9bb5d..4e6ddd2c7 100644
--- a/src/components/blocks/hero-4.astro
+++ b/src/components/blocks/hero-4.astro
@@ -33,7 +33,10 @@ const {
 ---
 
 <Section
-  class={cn("dark bg-background min-h-screen justify-center", className)}
+  class={cn(
+    "dark bg-background text-foreground min-h-screen justify-center",
+    className
+  )}
   {...props}
 >
   <SectionContainer class="flex flex-col relative z-10 items-center gap-8 text-center">
diff --git a/src/components/blocks/hero-9.astro b/src/components/blocks/hero-9.astro
index 83e8c1ddc..308b76046 100644
--- a/src/components/blocks/hero-9.astro
+++ b/src/components/blocks/hero-9.astro
@@ -49,7 +49,7 @@ const {
 } = Astro.props
 ---
 
-<Section class={cn("dark bg-background", className)} {...props}>
+<Section class={cn("dark bg-background text-foreground", className)} {...props}>
   <SectionContainer class="grid gap-12 lg:grid-cols-2 lg:items-center">
     <div class="relative z-10 flex flex-col gap-6">
       <div class="flex flex-col gap-4">

From 96d04947de396964a4e78b642a1f380e2bb550de Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 18:29:30 +0200
Subject: [PATCH 57/60] Regenerate registry for the dark section text color fix

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 public/r/cta-4.json                   | 2 +-
 public/r/hero-4.json                  | 2 +-
 public/r/hero-9.json                  | 2 +-
 public/r/styles/base-luma/cta-4.json  | 2 +-
 public/r/styles/base-luma/hero-4.json | 2 +-
 public/r/styles/base-luma/hero-9.json | 2 +-
 public/r/styles/base-lyra/cta-4.json  | 2 +-
 public/r/styles/base-lyra/hero-4.json | 2 +-
 public/r/styles/base-lyra/hero-9.json | 2 +-
 public/r/styles/base-maia/cta-4.json  | 2 +-
 public/r/styles/base-maia/hero-4.json | 2 +-
 public/r/styles/base-maia/hero-9.json | 2 +-
 public/r/styles/base-mira/cta-4.json  | 2 +-
 public/r/styles/base-mira/hero-4.json | 2 +-
 public/r/styles/base-mira/hero-9.json | 2 +-
 public/r/styles/base-nova/cta-4.json  | 2 +-
 public/r/styles/base-nova/hero-4.json | 2 +-
 public/r/styles/base-nova/hero-9.json | 2 +-
 public/r/styles/base-rhea/cta-4.json  | 2 +-
 public/r/styles/base-rhea/hero-4.json | 2 +-
 public/r/styles/base-rhea/hero-9.json | 2 +-
 public/r/styles/base-sera/cta-4.json  | 2 +-
 public/r/styles/base-sera/hero-4.json | 2 +-
 public/r/styles/base-sera/hero-9.json | 2 +-
 public/r/styles/base-vega/cta-4.json  | 2 +-
 public/r/styles/base-vega/hero-4.json | 2 +-
 public/r/styles/base-vega/hero-9.json | 2 +-
 27 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/public/r/cta-4.json b/public/r/cta-4.json
index 43d7c1bd8..9e65a555a 100644
--- a/public/r/cta-4.json
+++ b/public/r/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background text-foreground overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/hero-4.json b/public/r/hero-4.json
index b0e278928..1254a5a66 100644
--- a/public/r/hero-4.json
+++ b/public/r/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\n    \"dark bg-background text-foreground min-h-screen justify-center\",\n    className\n  )}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/hero-9.json b/public/r/hero-9.json
index 3fc4a2faa..de5e91c14 100644
--- a/public/r/hero-9.json
+++ b/public/r/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background text-foreground\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/cta-4.json b/public/r/styles/base-luma/cta-4.json
index 43d7c1bd8..9e65a555a 100644
--- a/public/r/styles/base-luma/cta-4.json
+++ b/public/r/styles/base-luma/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background text-foreground overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-luma/hero-4.json b/public/r/styles/base-luma/hero-4.json
index b0e278928..1254a5a66 100644
--- a/public/r/styles/base-luma/hero-4.json
+++ b/public/r/styles/base-luma/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\n    \"dark bg-background text-foreground min-h-screen justify-center\",\n    className\n  )}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/hero-9.json b/public/r/styles/base-luma/hero-9.json
index 3fc4a2faa..de5e91c14 100644
--- a/public/r/styles/base-luma/hero-9.json
+++ b/public/r/styles/base-luma/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background text-foreground\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/cta-4.json b/public/r/styles/base-lyra/cta-4.json
index 43d7c1bd8..9e65a555a 100644
--- a/public/r/styles/base-lyra/cta-4.json
+++ b/public/r/styles/base-lyra/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background text-foreground overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-lyra/hero-4.json b/public/r/styles/base-lyra/hero-4.json
index b0e278928..1254a5a66 100644
--- a/public/r/styles/base-lyra/hero-4.json
+++ b/public/r/styles/base-lyra/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\n    \"dark bg-background text-foreground min-h-screen justify-center\",\n    className\n  )}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/hero-9.json b/public/r/styles/base-lyra/hero-9.json
index 3fc4a2faa..de5e91c14 100644
--- a/public/r/styles/base-lyra/hero-9.json
+++ b/public/r/styles/base-lyra/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background text-foreground\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/cta-4.json b/public/r/styles/base-maia/cta-4.json
index 43d7c1bd8..9e65a555a 100644
--- a/public/r/styles/base-maia/cta-4.json
+++ b/public/r/styles/base-maia/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background text-foreground overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-maia/hero-4.json b/public/r/styles/base-maia/hero-4.json
index b0e278928..1254a5a66 100644
--- a/public/r/styles/base-maia/hero-4.json
+++ b/public/r/styles/base-maia/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\n    \"dark bg-background text-foreground min-h-screen justify-center\",\n    className\n  )}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/hero-9.json b/public/r/styles/base-maia/hero-9.json
index 3fc4a2faa..de5e91c14 100644
--- a/public/r/styles/base-maia/hero-9.json
+++ b/public/r/styles/base-maia/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background text-foreground\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/cta-4.json b/public/r/styles/base-mira/cta-4.json
index 43d7c1bd8..9e65a555a 100644
--- a/public/r/styles/base-mira/cta-4.json
+++ b/public/r/styles/base-mira/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background text-foreground overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-mira/hero-4.json b/public/r/styles/base-mira/hero-4.json
index b0e278928..1254a5a66 100644
--- a/public/r/styles/base-mira/hero-4.json
+++ b/public/r/styles/base-mira/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\n    \"dark bg-background text-foreground min-h-screen justify-center\",\n    className\n  )}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/hero-9.json b/public/r/styles/base-mira/hero-9.json
index 3fc4a2faa..de5e91c14 100644
--- a/public/r/styles/base-mira/hero-9.json
+++ b/public/r/styles/base-mira/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background text-foreground\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/cta-4.json b/public/r/styles/base-nova/cta-4.json
index 43d7c1bd8..9e65a555a 100644
--- a/public/r/styles/base-nova/cta-4.json
+++ b/public/r/styles/base-nova/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background text-foreground overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-nova/hero-4.json b/public/r/styles/base-nova/hero-4.json
index b0e278928..1254a5a66 100644
--- a/public/r/styles/base-nova/hero-4.json
+++ b/public/r/styles/base-nova/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\n    \"dark bg-background text-foreground min-h-screen justify-center\",\n    className\n  )}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/hero-9.json b/public/r/styles/base-nova/hero-9.json
index 3fc4a2faa..de5e91c14 100644
--- a/public/r/styles/base-nova/hero-9.json
+++ b/public/r/styles/base-nova/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background text-foreground\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/cta-4.json b/public/r/styles/base-rhea/cta-4.json
index 43d7c1bd8..9e65a555a 100644
--- a/public/r/styles/base-rhea/cta-4.json
+++ b/public/r/styles/base-rhea/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background text-foreground overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-rhea/hero-4.json b/public/r/styles/base-rhea/hero-4.json
index b0e278928..1254a5a66 100644
--- a/public/r/styles/base-rhea/hero-4.json
+++ b/public/r/styles/base-rhea/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\n    \"dark bg-background text-foreground min-h-screen justify-center\",\n    className\n  )}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/hero-9.json b/public/r/styles/base-rhea/hero-9.json
index 3fc4a2faa..de5e91c14 100644
--- a/public/r/styles/base-rhea/hero-9.json
+++ b/public/r/styles/base-rhea/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background text-foreground\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/cta-4.json b/public/r/styles/base-sera/cta-4.json
index 43d7c1bd8..9e65a555a 100644
--- a/public/r/styles/base-sera/cta-4.json
+++ b/public/r/styles/base-sera/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background text-foreground overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-sera/hero-4.json b/public/r/styles/base-sera/hero-4.json
index b0e278928..1254a5a66 100644
--- a/public/r/styles/base-sera/hero-4.json
+++ b/public/r/styles/base-sera/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\n    \"dark bg-background text-foreground min-h-screen justify-center\",\n    className\n  )}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/hero-9.json b/public/r/styles/base-sera/hero-9.json
index 3fc4a2faa..de5e91c14 100644
--- a/public/r/styles/base-sera/hero-9.json
+++ b/public/r/styles/base-sera/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background text-foreground\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/cta-4.json b/public/r/styles/base-vega/cta-4.json
index 43d7c1bd8..9e65a555a 100644
--- a/public/r/styles/base-vega/cta-4.json
+++ b/public/r/styles/base-vega/cta-4.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/blocks/cta-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n  SectionTitle,\n} from \"@/components/ui/section\"\nimport PlaceholderImage from \"@/assets/placeholder.svg\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image?: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image = { src: PlaceholderImage },\n  ...props\n} = Astro.props\n---\n\n<Section\n  variant=\"floating\"\n  class={cn(\"dark bg-background text-foreground overflow-hidden\", className)}\n  {...props}\n>\n  <Image\n    src={image.src}\n    alt=\"\"\n    class=\"absolute inset-0 size-full object-cover opacity-50\"\n    widths={[640, 960, 1280, 1536]}\n    sizes=\"(min-width: 80rem) 80rem, 100vw\"\n  />\n  <SectionContainer class=\"flex flex-col gap-8 items-center text-center\">\n    <div class=\"flex max-w-2xl flex-col items-center gap-5\">\n      <SectionTitle class=\"leading-[1.1]\">{title}</SectionTitle>\n      <SectionDescription>{description}</SectionDescription>\n    </div>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"outline\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup aria-hidden=\"true\">\n        {socialProof.avatars.map((avatar) => (\n          <Avatar class=\"ring-background size-11 ring\">\n            <AvatarImage src={avatar.image} />\n            <AvatarFallback>{avatar.initials}</AvatarFallback>\n          </Avatar>\n        ))}\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating\n          value={socialProof.rating}\n          aria-label={socialProof.ratingLabel}\n        />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     },
     {
diff --git a/public/r/styles/base-vega/hero-4.json b/public/r/styles/base-vega/hero-4.json
index b0e278928..1254a5a66 100644
--- a/public/r/styles/base-vega/hero-4.json
+++ b/public/r/styles/base-vega/hero-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\n    \"dark bg-background text-foreground min-h-screen justify-center\",\n    className\n  )}\n  {...props}\n>\n  <SectionContainer class=\"flex flex-col relative z-10 items-center gap-8 text-center\">\n    <h1 class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\">\n      {title}\n    </h1>\n    <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\">\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {features.map((feature) => (\n        <li class=\"flex items-start gap-2 text-sm\">\n          <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n          {feature}\n        </li>\n      ))}\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {buttons.map(({ href, label }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          size=\"lg\"\n          variant={index === 0 ? \"default\" : \"secondary\"}\n        >\n          {label}\n        </Button>\n      ))}\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/hero-9.json b/public/r/styles/base-vega/hero-9.json
index 3fc4a2faa..de5e91c14 100644
--- a/public/r/styles/base-vega/hero-9.json
+++ b/public/r/styles/base-vega/hero-9.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n    }[]\n    rating: number\n    ratingLabel: string\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background text-foreground\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\">\n          {title}\n        </h1>\n        <p class=\"text-foreground/80 text-lg leading-relaxed\">{description}</p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {features.map((feature) => (\n          <li class=\"flex items-start gap-3 text-sm\">\n            <CheckIcon class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))}\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {buttons.map(({ href, label }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={index === 0 ? \"default\" : \"secondary\"}\n          >\n            {label}\n          </Button>\n        ))}\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup aria-hidden=\"true\">\n          {socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage src={avatar.image} />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating\n            value={socialProof.rating}\n            aria-label={socialProof.ratingLabel}\n          />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\">\n    <Image\n      src={image.src}\n      alt=\"\"\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n      fetchpriority=\"high\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],

From 8abd559c4b1263cb7ca282d07bcfa52a08d88294 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 18:34:22 +0200
Subject: [PATCH 58/60] Stack the Header5 menu card copy under its image

NavigationMenuLink lays out in a row, so the promotional card put its label and description beside the full-width image, over the link column.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/blocks/header-5.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/blocks/header-5.astro b/src/components/blocks/header-5.astro
index 3ad0d88eb..1094cffb6 100644
--- a/src/components/blocks/header-5.astro
+++ b/src/components/blocks/header-5.astro
@@ -203,7 +203,7 @@ const {
                   <NavigationMenuLink
                     href={item.href}
                     active={item.active}
-                    class="bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3"
+                    class="bg-muted/50 hover:bg-muted focus:bg-muted flex-col items-start gap-3 p-3"
                   >
                     {item.image && (
                       <Image

From da7bf9467f3aaa22d95bf6ff1367fe1924b1d28e Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 18:34:32 +0200
Subject: [PATCH 59/60] Regenerate registry for the Header5 menu card layout

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 public/r/header-5.json                  | 2 +-
 public/r/styles/base-luma/header-5.json | 2 +-
 public/r/styles/base-lyra/header-5.json | 2 +-
 public/r/styles/base-maia/header-5.json | 2 +-
 public/r/styles/base-mira/header-5.json | 2 +-
 public/r/styles/base-nova/header-5.json | 2 +-
 public/r/styles/base-rhea/header-5.json | 2 +-
 public/r/styles/base-sera/header-5.json | 2 +-
 public/r/styles/base-vega/header-5.json | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/public/r/header-5.json b/public/r/header-5.json
index a09f4b53b..d7567215a 100644
--- a/public/r/header-5.json
+++ b/public/r/header-5.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex-col items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-luma/header-5.json b/public/r/styles/base-luma/header-5.json
index 3fe98b775..693e1e935 100644
--- a/public/r/styles/base-luma/header-5.json
+++ b/public/r/styles/base-luma/header-5.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex-col items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-lyra/header-5.json b/public/r/styles/base-lyra/header-5.json
index be9b68bd9..2db015dec 100644
--- a/public/r/styles/base-lyra/header-5.json
+++ b/public/r/styles/base-lyra/header-5.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex-col items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-maia/header-5.json b/public/r/styles/base-maia/header-5.json
index a09f4b53b..d7567215a 100644
--- a/public/r/styles/base-maia/header-5.json
+++ b/public/r/styles/base-maia/header-5.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex-col items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-mira/header-5.json b/public/r/styles/base-mira/header-5.json
index a09f4b53b..d7567215a 100644
--- a/public/r/styles/base-mira/header-5.json
+++ b/public/r/styles/base-mira/header-5.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex-col items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-nova/header-5.json b/public/r/styles/base-nova/header-5.json
index be9b68bd9..2db015dec 100644
--- a/public/r/styles/base-nova/header-5.json
+++ b/public/r/styles/base-nova/header-5.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-3 right-3\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex-col items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-rhea/header-5.json b/public/r/styles/base-rhea/header-5.json
index 3fe98b775..693e1e935 100644
--- a/public/r/styles/base-rhea/header-5.json
+++ b/public/r/styles/base-rhea/header-5.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex-col items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-sera/header-5.json b/public/r/styles/base-sera/header-5.json
index 3fe98b775..693e1e935 100644
--- a/public/r/styles/base-sera/header-5.json
+++ b/public/r/styles/base-sera/header-5.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex-col items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
diff --git a/public/r/styles/base-vega/header-5.json b/public/r/styles/base-vega/header-5.json
index a09f4b53b..d7567215a 100644
--- a/public/r/styles/base-vega/header-5.json
+++ b/public/r/styles/base-vega/header-5.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-4\">\n            {navigation.map((item) => (\n              <div class=\"grid gap-1\">\n                <SheetClose\n                  as=\"a\"\n                  href={item.href}\n                  aria-current={item.active ? \"page\" : undefined}\n                  variant=\"ghost\"\n                  class=\"justify-start font-medium\"\n                >\n                  {item.label}\n                </SheetClose>\n                {item.links && item.links.length > 0 && (\n                  <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                    {item.links.map((link) => (\n                      <SheetClose\n                        as=\"a\"\n                        href={link.href}\n                        aria-current={link.active ? \"page\" : undefined}\n                        variant=\"ghost\"\n                        class=\"text-muted-foreground justify-start\"\n                      >\n                        {link.icon && <Icon name={link.icon} />}\n                        {link.label}\n                      </SheetClose>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n          {buttons.length > 0 && <Separator />}\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu\n      aria-label={navigationLabel}\n      class=\"max-w-none justify-start\"\n      align=\"start\"\n    >\n      <NavigationMenuList class=\"justify-start\">\n        {navigation.map((item, index) =>\n          item.links?.length ? (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                  <NavigationMenuLink\n                    href={item.href}\n                    active={item.active}\n                    class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex-col items-start gap-3 p-3\"\n                  >\n                    {item.image && (\n                      <Image\n                        src={item.image.src}\n                        alt=\"\"\n                        class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                        widths={[320, 480, 640]}\n                        sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                      />\n                    )}\n                    <span class=\"grid gap-1\">\n                      <span class=\"font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </span>\n                  </NavigationMenuLink>\n                  <div class=\"grid gap-1 lg:grid-cols-2\">\n                    {item.links.map((link) => (\n                      <NavigationMenuLink\n                        href={link.href}\n                        active={link.active}\n                        class=\"items-start gap-3 p-3\"\n                      >\n                        {link.icon && (\n                          <Icon\n                            name={link.icon}\n                            class=\"text-muted-foreground mt-0.5\"\n                          />\n                        )}\n                        <span class=\"grid gap-1\">\n                          <span class=\"font-medium\">{link.label}</span>\n                          {link.description && (\n                            <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                              {link.description}\n                            </span>\n                          )}\n                        </span>\n                      </NavigationMenuLink>\n                    ))}\n                  </div>\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink\n                href={item.href}\n                active={item.active}\n                class={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],

From 5b37bbed56a3087a09e72c08ce6ea7fd814e828e Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Fri, 9 Oct 2026 18:45:25 +0200
Subject: [PATCH 60/60] Skip paused animations in the axe settling wait

A paused finite animation never finishes, so it held the scan for the full 5s and failed it. Running finite animations are still awaited, endless ones still skipped, and the timeout is unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 scripts/a11y.mjs | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/scripts/a11y.mjs b/scripts/a11y.mjs
index 95e74eecf..0f411280e 100644
--- a/scripts/a11y.mjs
+++ b/scripts/a11y.mjs
@@ -165,7 +165,7 @@ try {
         .catch(() => errors.push("Images did not finish loading in 10s"))
       // Axe measures colors as they are now, so let finite animations and
       // transitions, such as styles settling after load, finish first.
-      // Endless animations are not waited for.
+      // Endless and paused animations are not waited for.
       const settled = await page.evaluate(() =>
         Promise.race([
           Promise.all(
@@ -173,7 +173,11 @@ try {
               .getAnimations()
               .filter((animation) => {
                 const { endTime } = animation.effect?.getComputedTiming() ?? {}
-                return endTime !== undefined && endTime !== Infinity
+                return (
+                  animation.playState !== "paused" &&
+                  endTime !== undefined &&
+                  endTime !== Infinity
+                )
               })
               .map((animation) => animation.finished.catch(() => {}))
           ).then(() => true),